destadserven.nl hertoetsing versie 1.1

Hele sample

Uitkomst: Onvoldoende

Team

Uitkomst: Onvoldoende

PDF Beleidsvisie

Uitkomst: Onvoldoende

Hele sample

Bevindingen:

Opmerking: Er zijn veel iconen die een alt-tekst hebben terwijl deze beter leeg kunnen worden gelaten. Hierdoor hebben de links namelijk veel overbodige teksten. Zie bijvoorbeeld bij het nieuwsoverzicht de links met" Lees dit artikel Icoon lees meer“. Ook wanneer er geen link om heen staat, kunnen iconen nog overbodige informatie oplezen, zoals bij gele icoontjes bij nieuwsitems (Wat is een afbeelding ‘algemeen’? ). Deze categorieën staan ook al in tekst onder de titel, dus dan kunnen de iconen beter een lege alt-tekst krijgen. Bovendien kloppen de iconen met tekst ook niet qua betekenisvolle volgorde, omdat ze boven de kop staan waar ze onder horen (1.3.2).

Team

Er staan meerdere portretten op deze pagina met een lege alt-tekst, waardoor deze foto’s afwezig zijn voor hulpsoftware. Deze foto’s hebben echter wel degelijk een functie. Voeg alt-teksten toe die beschrijven van wie de portretten zijn. Hertoetsing: de foto’s worden nu geplaatst met CSS. Dit zijn echter geen decoratieve afbeeldingen.

PDF Beleidsvisie

Afbeeldingen met veel informatie, zoals tabellen, diagrammen en grafieken, hebben geen voldoende tekstalternatief. Een korte alt-tekst als samenvating volstaat hier niet.

Hele sample

Uitkomst: Niet van toepassing

Hele sample

Uitkomst: Niet van toepassing

Hele sample

Uitkomst: Niet van toepassing

Hele sample

Uitkomst: Niet van toepassing

Hele sample

Uitkomst: Niet van toepassing

Hele sample

Uitkomst: Onvoldoende

Homepage

Uitkomst: Onvoldoende

Team

Uitkomst: Onvoldoende

Contact

Uitkomst: Onvoldoende

PDF Beleidsvisie

Uitkomst: Onvoldoende

Homepage

Er staan 2 paragrafen tekst op de pagina die staan opgemaakt als kop. Het gaat om de h2 ‘We voeren het pachtbeleid uit, zetten in op duurzame gebieds- en bedrijfsontwikkeling en dragen zorg voor natuur en landschap.’ en de h3 ‘De Stadserven beheert de historische en waardevolle gronden op het Kampereiland e.o. We voeren het pachtbeleid uit, zetten in op duurzame gebieds- en bedrijfsontwikkeling en dragen zorg voor natuur en landschap.’ Screenreadergebruikers navigeren vaak via koppen en dat kan dit verwarrend zijn, omdat het geen koppen zijn waarachter content volgt. Maak hier ‘gewone’ paragrafen van. Dit komt op meerdere pagina’s voor.

Het invoerveld bij de nieuwsbrief mist een label. Er staat nu alleen een placeholder, maar die wordt mogelijk niet door alle hulpsoftware goed ondersteund. Ook verdwijnt deze wanneer de bezoeker in het veld staat. Het is aan te raden dat het label altijd zichtbaar blijft tijdens het invullen. Hertoetsing: er staat nu een zichtbaar label, maar deze is in de code nog niet gekoppeld aan het invoerveld. Dit kan worden gedaan door het label element via for="id" aan het betreffende invoerveld te verbinden. Hierdoor leest een screenreader op wat waar moet worden ingevuld.

Team

De namen van de teamleden zijn visueel kopjes, maar in de code niet als kop opgemaakt. Omdat de ‘kaartjes’ verder in de code ook geen aparte opmaak hebben, zoals list items of secties, is er nu geen duidelijke stuctuur. Het zijn nu enkel losse div-elementen en links. Als er koppen worden gebruikt, kan via die koppen worden genavigeerd.

Contact

De invoervelden missen een label. Er staat nu alleen een placeholder, maar die wordt mogelijk niet door alle hulpsoftware goed ondersteund. Ook verdwijnt deze wanneer de bezoeker in het veld staat. Het is aan te raden dat het label altijd zichtbaar blijft tijdens het invullen. Zie screenshot 3. Hertoetsing: er staan nu zichtbare labels, maar deze zijn in de code nog niet gekoppeld aan de invoervelden. Dit kan worden gedaan door het label element via for="id" aan het betreffende invoerveld te verbinden. Hierdoor leest een screenreader op wat waar moet worden ingevuld.

PDF Beleidsvisie

Niet alle onderdelen in de PDF zijn in de code goed opgemaakt. Zo zijn er tussenkopjes (bijvoorbeeld pagina 6, 10) en lijsten (bijvoorbeeld pagina 9) die enkel als paragraaf zijn opgemaakt. De lijst op pagina 53 heeft in de code maar 1 list-item, maar visueel 6. De tabellen staan niet als code opgemaakt.

Hele sample

Uitkomst: Onvoldoende

PDF Beleidsvisie

Uitkomst: Onvoldoende

PDF Beleidsvisie

De visuele volgorde en de bronvolgorde van de PDF komen niet overeen. De code van de content op de eerste pagina staat bijvoorbeeld achteraan in de code. Hierdoor wordt de content niet in de juiste volgorde voorgelezen door een screenreader.

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Onvoldoende

Hele sample

Bevindingen:

In landschapsmodus op mobiel is het menu niet goed te gebruiken. De bovenste items vallen buiten beeld. Zie screenshot 5. Hertoetsing: Bovenaan staat het nu goed, maar het is niet mogelijk bij items lager in het menu te komen.

Hele sample

Uitkomst: Onvoldoende

Homepage

Uitkomst: Onvoldoende

Contact

Uitkomst: Onvoldoende

Homepage

Het invoerveld voor het emailadres heeft geen mechanisme waarmee de invoer automatisch kan worden aangevuld. Dit maakt het invullen van formulieren voor veel gebruikers gemakkelijker, bijvoorbeeld voor mensen voor wie het invoeren van tekst veel tijd kost omdat dit via speciale hulpmiddelen gaat, of voor mensen met cognitieve beperkingen. Dit kan worden verbeterd door ‘autocomplete’ attributen te plaatsen bij de invoervelden. Zie voor meer informatie https://www.w3.org/WAI/WCAG21/Techniques/html/H98 en voor een lijst van alle attributen https://www.w3.org/TR/WCAG21/#input-purposes.

Contact

De invoervelden voor persoonlijke informatie zoals naam en adres hebben geen mechanisme waarmee de invoer automatisch kan worden aangevuld. Dit kan worden verbeterd door ‘autocomplete’ attributen te plaatsen bij de invoervelden.

Hele sample

Uitkomst: Onvoldoende

PDF Beleidsvisie

Uitkomst: Onvoldoende

PDF Beleidsvisie

In de grafiek in figuur 2 worden categorieën alleen onderscheiden door middel van kleur. Voeg een ander visueel middel toe voor mensen die de kleuren niet kunnen zien, zoals een tekst of arcering.

Hele sample

Uitkomst: Niet van toepassing

Hele sample

Uitkomst: Onvoldoende

PDF Beleidsvisie

Uitkomst: Onvoldoende

Hele sample

Bevindingen:

Tekst moet een contrast hebben van minimaal 4,5:1 voor slechtzienden en kleurenblinden. Dat geldt ook voor actieve elementen zoals op hover en focus. Diverse knoppen op deze site hebben bij hover een lichtgroene achtergrondkleur en witte tekst. Het contrast hiervan is 2,3:1 en daarmee onvoldoende. Voorbeelden: het emailadres en telefoonnnummer in de footer.

PDF Beleidsvisie

De witte teksten op lichtblauwe achtergrond hebben te weinig contrast (pagina 1 en 6).

Hele sample

Uitkomst: Onvoldoende

Hele sample

Bevindingen:

Boven de 150% ingezoomd (getest bij 1280px breed) valt een deel van het menu aan de bovenkant weg. Zie ook 1.3.4. Hertoetsing: het is nu niet mogelijk om naar de onderste items te scrollen wanneer er een submenu is geopend. Met het toetsenbord kun je er wel bij, maar de focus is dan niet zichtbaar.

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Onvoldoende

Hele sample

Bevindingen:

Boven de 200% ingezoomd (bij 1280px breed) valt een deel van het menu aan de bovenkant weg. Zie ook screenshot 6. Hertoetsing: zie 1.4.4

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Onvoldoende

Vraag en antwoord

Uitkomst: Onvoldoende

Nieuwsoverzicht

Uitkomst: Onvoldoende

Contact

Uitkomst: Onvoldoende

Vraag en antwoord

Wanneer tekstafstand-instellingen worden aangepast is niet alle tekst meer goed leesbaar. Sommige elementen lopen door elkaar heen in het submenu met de vragen en in de footer. Zie screenshot 9.

Nieuwsoverzicht

Wanneer tekstafstand-instellingen worden aangepast is niet alle tekst meer goed leesbaar. Een deel van de teksten in de nieuwsblokjes wordt onzichtbaar. Zie screenshot 10.

Contact

Wanneer tekstafstand-instellingen worden aangepast is niet alle tekst meer goed leesbaar. Het telefoonnummer verdwijnt deels achter de kaart.

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Onvoldoende

Homepage

Uitkomst: Onvoldoende

Nieuwsoverzicht

Uitkomst: Onvoldoende

Homepage

De filters bij de nieuwsberichten werken niet met het toetsenbord. Een filter button kan wel focus krijgen, maar activeren van de button geeft geen resultaat. Met de muis worden de berichten wel gefilterd.

Nieuwsoverzicht

De filters bij de nieuwsberichten werken niet met het toetsenbord.

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Niet van toepassing

Hele sample

Uitkomst: Niet van toepassing

Hele sample

Uitkomst: Niet van toepassing

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Onvoldoende

Nieuwsbericht (vervangende pagina)

Uitkomst: Onvoldoende

Nieuwsbericht (vervangende pagina)

De pagina’s met de nieuwsberichten hebben geen unieke titel. De titel luidt bij beide ‘De Stadserven | Kampereiland e.o’. Voor gebruikers van hulpsoftware is het voor de navigatie tussen documenten/webpagina’s belangrijk dat de titel duidelijk maakt waar ze zijn. Geef daarom elke pagina een unieke titel.

Hele sample

Uitkomst: Onvoldoende

Hele sample

Bevindingen:

Na de skiplink komt de focus op de ‘naar boven’-knop, maar deze is dan nog niet in beeld. Dit kan verwarrend zijn. Zorg dat de focus op de knop komt wanneer deze in beeld is (en nuttig om te gebruiken, dus lager op de pagina). Hertoetsing: de focus op de ‘naar boven’-knop komt nu voor de skiplink, wanneer deze nog niet in beeld is. Wanneer de knop wel in beeld is, kun je er met het toetsenbord niet meer bij.

Hele sample

Uitkomst: Onvoldoende

Homepage

Uitkomst: Onvoldoende

Team

Uitkomst: Onvoldoende

Nieuwsoverzicht

Uitkomst: Onvoldoende

Homepage

Er zijn meerdere links op de pagina met de tekst ‘Lees dit artikel’. Gebruikers van hulpsoftware vragen vaak lijsten op van links op de pagina. Wanneer deze teksten geen duidelijke informatie geven kunnen ze niks met deze links. Voeg teksten toe aan de link die duidelijk maken waar het precies om gaat, zodat de diverse links van elkaar te onderscheiden zijn. Dit kan met een extra tekst in de link, eventueel met CSS verborgen, of via een aria-labelledby verwijzing naar een tekst elders op de pagina. Zie voor meer info https://www.w3.org/TR/WCAG20-TECHS/ARIA7.html.

Team

Er zijn meerdere links op de pagina met de tekst ‘Ga de de Linked In pagina van deze persoon’. Zorg dat deze links specifieke teksten krijgen waarin het doel duidelijk wordt, bijvoorbeeld door een relatie te leggen via aria-labelledby met de naam van het teamlid.

Nieuwsoverzicht

Er zijn meerdere links op de pagina met de tekst ‘Lees dit artikel Icoon lees meer’. Voeg teksten toe aan de link die duidelijk maken waar het precies om gaat, zodat de diverse links van elkaar te onderscheiden zijn. Dit kan met een extra tekst in de link, eventueel met CSS verborgen, of via een aria-labelledby verwijzing naar een tekst elders op de pagina. Daarnaast wordt ook aangeraden om het icoon een lege alt-tekst te geven, omdat deze niks toevoegt aan de tekst van de link. Zie screenshot 1 voor een weergave van de links in de screenreader VoiceOver.

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Niet van toepassing

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Onvoldoende

Hele sample

Bevindingen:

De link om het logo bovenaan de site heeft als toegankelijke naam ‘home’. Deze is hierdoor niet met stem te bedienen. Zorg dat de toegankelijke naam minimaal de zichtbare tekst bevat. Wanneer het aria-label hier wordt weggehaald, wordt de alt-tekst de toegankelijke naam. Dit voldoet wel aan dit criterium.

Hele sample

Uitkomst: Niet van toepassing

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Niet van toepassing

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Onvoldoende

Homepage

Uitkomst: Niet getoetst

Contact

Uitkomst: Onvoldoende

Homepage

Wanneer jet invoerveld bij de nieuwsbrief niet goed is ingevuld, krijgt de bezoeker geen goede beschrijving van de fout. Er verschijnt enkel een tijdelijke browsermelding in het Engels. (Zie screenshot 12.) Dit is mogelijk niet voor iedereen duidelijk. Zorg voor een beschrijving van de fout in het Nederlands, die blijft staan.

Contact

Wanneer velden niet goed zijn ingevuld, krijgt de bezoeker geen goede beschrijving van de fout. Er verschijnt enkel een tijdelijke browsermelding in het Engels. (Zie screenshot 13.) Dit is mogelijk niet voor iedereen duidelijk. Zorg voor een beschrijving van de fout in het Nederlands, die blijft staan. Wees hierbij specifiek, dus niet ‘dit veld is verplicht’, maar bijvoorbeeld ‘de naam is verplicht, maar niet ingevuld’.

Hele sample

Uitkomst: Onvoldoende

Contact

Uitkomst: Onvoldoende

Contact

De invoervelden hebben geen goed label of instructie wat er ingevuld moet worden. Een placeholder is niet voldoende omdat die niet altijd in beeld blijft staan. Hertoetsing: er is nu een zichtbaar label, maar de asteriks (dit is een instructie) staat daar niet in.

Hele sample

Uitkomst: Niet van toepassing

Hele sample

Uitkomst: Niet van toepassing

Hele sample

Uitkomst: Onvoldoende

Homepage

Uitkomst: Onvoldoende

Vraag en antwoord

Uitkomst: Onvoldoende

Nieuwsoverzicht

Uitkomst: Onvoldoende

Nieuwsbericht (vervangende pagina)

Uitkomst: Onvoldoende

Homepage

Het id ‘checkbox’ komt meerdere keren voor. Zorg dat id’s altijd uniek zijn op de pagina, zodat hulpsoftware het goed kan interpreteren.

Vraag en antwoord

Alle accordions (waar de antwoorden in zitten) hebben hetzelfde id ‘accordion1’. Alle links (de vragen) verwijzen daardoor naar hetzelfde id. Zorg dat id’s altijd uniek zijn op de pagina.

Nieuwsoverzicht

Het id ‘checkbox-2’ komt meerdere keren voor.

Nieuwsbericht (vervangende pagina)

Het id ‘E-mailadres’ komt 2 keer voor. Zorg dat id’s altijd uniek zijn op de pagina. Dit komt bij meerdere nieuwsitems voor.

Hele sample

Uitkomst: Onvoldoende

Vraag en antwoord

Uitkomst: Onvoldoende

Hele sample

Bevindingen:

De knop om het mobiele menu te openen (bij 150% ingezoomd en meer) heeft geen goede rol, naam en waarde. Het is een nav-element en geen interactief element zoals een button. Ook is de status niet duidelijk, dus of het menu in- of uitgeklapt is. Aangeraden wordt om hier een button element van de te maken met een goede naam en de status toe te voegen via een ‘screenreadertekst’ of via het aria-expanded attribuut. Dit zelfde geldt ook voor de uitklapbare menu-items zoals ‘Vraag & antwoord’. Hertoetsing: De menu-knop is nu goed gecodeerd. De submenu-structuur is echter nog niet goed. Ten eerste zijn deze menu-items nu buttons waarbinnen een link staat. Het wordt afgeraden om interactieve elementen te nesten, omdat deze dan mogelijk niet goed herkend worden door hulpsoftware. Ook krijgen deze items nu 2 keer toetsenbordfocus, wat verwarrend is. Ten tweede wordt gebruik gemaakt van aria-haspopup=”menu”. Dit moet dan verwijzen naar content dat binnen een rol van ‘menu’ staat. Dit is echter niet aanwezig. De submenu’s staan in een navigation element. Aangeraden wordt om de structuur eenvoudiger te maken met enkel lijsten waarbinnen de submenu’s staan. De status van aria-expanded geeft dan de status aan (nu wordt dit niet voorgelezen).

Opmerking: op desktopweergave in Safari vallen de submenu-items weg onder het lichtblauwe blok van de content.

Vraag en antwoord

De antwoorden openen alleen visueel, maar niet voor screenreadergebruikers. De ‘aria-expanded’-status blijft op ‘false’ staan en de content van de vraag blijft verborgen via ‘aria-hidden’. Hierdoor zijn de antwoorden onbereikbaar. Zie screenshot 2.

Hele sample

Uitkomst: Niet van toepassing