Onderzoek toegankelijkheid destadserven.nl

Hele sample

Uitkomst: Onvoldoende

Team

Uitkomst: Onvoldoende

Hele sample

Bevindingen:

Het logo van de organisatie bovenaan de website heeft een lege alt-tekst. Deze afbeelding is echter niet decoratief. Geef in de alt-tekst aan wat er te zien is op de afbeelding, dus “Logo de Stadserven - Kampereiland e.o.”. Dit geldt ook voor het logo bij de footer.

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 onder ‘Direct naar’ de link “icoon Groenonderhoud Groenonderhoud Icoon lees meer”. Wanneer deze alt-teksten leeg worden gelaten, wordt de linktekst enkel ‘Groenonderhoud’ wat veel overzichtelijker is. Ook wanneer er geen link om heen staat kunnen iconen nog overbodige informatie oplezen, zoals bij lees meer-pijltjes en de gele icoontjes bij nieuwsitems (Wat is een afbeelding ‘algemeen’? ). De 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.

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

Hele sample

Bevindingen:

Opmerking: De knop naar het (mobiele, ingezoomde) menu is in Windows High Contrast mode niet zichtbaar. Dit komt doordat de knop geen tekst heeft en ook geen afbeelding, alleen CSS layout. Windows herkent dit niet als content. Dit kan worden opgelost door de afbeelding in svg te plaatsen en er een (transparante) outline omheen te zetten. Zie screenshot 15.

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.

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.

PDF Beleidsvisie

De PDF heeft geen tags (codelaag) en daardoor is er voor hulpsoftware zoals screenreaders geen informatie beschikbaar om de PDF te interpreteren. Deze codelaag wordt aangemaakt in het bronbestand (bijvoorbeeld Word of Indesign) en moet van daaruit goed worden geëxporteerd. Wanneer de codelaag aanwezig is en aan de richtlijnen voldoet, kan hulpsoftware de inhoud juist weergeven voor de gebruiker, zoals ook bij goed opgebouwde HTML-pagina's het geval is.

Hele sample

Uitkomst: Voldoende

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.

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: de ‘versturen’-knop bij de nieuwsbrief en het emailadres en telefoonnnummer in de footer.

PDF Beleidsvisie

Er zijn meerdere elementen in het document met te laag contrast, zoals de lichtblauwe kopjes op een witte achtergrond (bijvoorbeeld pagina 3) of witte kopjes op een lichtgroene achtergrond (pagina 12).

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.

Hele sample

Uitkomst: Onvoldoende

Random pagina 1: ontdek kampereiland

Uitkomst: Onvoldoende

Random pagina 1: ontdek kampereiland

Bovenaan de pagina staat een afbeelding met tekst ('Tijd voor wat nieuws...') zonder tekstalternatief. Voeg bijvoorbeeld een onderschrift toe zodat de tekst ook voor iedereen beschikbaar is als HTML content.

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.

Opmerking: wanneer ingezoomd op 400% nemen de menuknop en de naar boven-knop relatief veel ruimte in en vallen daarmee over de content heen. Dit maakt het lezen lastig. Overweeg om deze elementen wat kleiner te maken. Zie ook screenshot 7.

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Onvoldoende

Team

Uitkomst: Onvoldoende

Vraag en antwoord

Uitkomst: Onvoldoende

Nieuwsoverzicht

Uitkomst: Onvoldoende

Contact

Uitkomst: Onvoldoende

Team

Wanneer tekstafstand-instellingen worden aangepast (zoals line-height, letter of word spacing) is niet alle tekst meer goed leesbaar. De email-adressen vallen deels buiten de kaders. Zie screenshot 8. Bezoekers die hun eigen styles gebruiken om de tekst leesbaar te maken missen nu mogelijk een deel van de tekst. Dit kan worden opgelost door containers in de layout te laten meegroeien met de tekst. Dit criterium kun je gemakkelijk testen met deze bookmarklet: https://dylanb.github.io/bookmarklets.html

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: Onvoldoende

Hele sample

Bevindingen:

De submenu’s kunnen alleen worden gesloten door de muis of de toetsenbordfocus te verplaatsen. Mensen die vergrotingssoftware gebruiken moeten de muis bewegen om delen van de pagina te bekijken. Wanneer dan (onbedoeld) hover content over iets heen valt, moeten ze deze met het toetsenbord weg kunnen halen. Zorg dat deze ook op een andere manier gesloten kan worden, bijvoorbeeld met de escape toets.

Hele sample

Uitkomst: Onvoldoende

Homepage

Uitkomst: Onvoldoende

Nieuwsoverzicht

Uitkomst: Onvoldoende

Hele sample

Bevindingen:

Wanneer je bent ingezoomd op 150% of meer is het menu niet meer te gebruiken met het toetsenbord. Zie ook 4.1.2.

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: Onvoldoende

PDF Beleidsvisie

Uitkomst: Onvoldoende

PDF Beleidsvisie

Het document heeft geen bladwijzers. Bij documenten met veel pagina’s geven bladwijzers de gebruiker de mogelijkheid om meteen naar bepaalde content te springen. Dat is hier niet mogelijk. Voeg bladwijzers toe aan de PDF via koppen. Dit kan automatisch of handmatig, afhankelijk van het gebruikte programma. (Zie ook 1.3.1 voor codering van PDF documenten.)

Hele sample

Uitkomst: Onvoldoende

Vacature

Uitkomst: Onvoldoende

PDF Beleidsvisie

Uitkomst: Onvoldoende

Vacature

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.

PDF Beleidsvisie

De titel van het document luidt ‘beleidstukken 2019.qxp_Stadserven’. Dit is niet erg duidelijk. Beter is om de titel bijvoorbeeld te maken ‘Beleidsvisie de Stadserven 2019-2028’.

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).

Hele sample

Uitkomst: Onvoldoende

Homepage

Uitkomst: Onvoldoende

Team

Uitkomst: Onvoldoende

Hele sample

Bevindingen:

De link om het logo van de organisatie bovenaan de website heeft als tekst ‘Main’ via het aria-label. Dit is verwarrend. Aangeraden wordt om het aria-label hier weg te halen en de alt-tekst bij het logo goed in te vullen (zie 1.1.1). Daarmee wordt het doel van de link duidelijk. (De role ‘navigation’ is hier niet correct, omdat het maar om 1 link gaat. Dit zorgt voor een onlogische landmark structuur.)

Homepage

Er zijn meerdere links op de pagina met de tekst ‘Lees dit artikel Icoon lees meer’. 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.

Daarnaast wordt ook aangeraden om het icoon hier 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.

Dit issue komt ook voor op de pagina Nieuwsoverzicht.

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.

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Voldoende

Hele sample

Uitkomst: Voldoende

Hele sample

Bevindingen:

Opmerking: bij de filters verschijnt op focus alleen een hele lichte schaduw. Bezoekers kunnen deze gemakkelijk missen. Zie screenshot 4 (Beleidsvisie is actief). Onder WCAG 2.1 is er nog geen eis omtrent de mate van zichtbaarheid van de focusstijl, maar in WCAG 2.2 (2023) komt deze eis wel. Aangeraden wordt om de focusstijl aan te passen naar een duidelijke rand en tenminste een contrastverschil van 3:1 met de inactieve stijl. (Nu is het contrast omgeveer 1:1). Zie ook https://www.w3.org/TR/WCAG22/#focus-appearance.

Dit advies geldt ook voor de focusstijl in het hoofdmenu van de submenu-items. Deze is nu helderblauw op lichtblauw, contrast 2,6:1. Zie screenshot 11.

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 ‘main’. Deze is hierdoor niet met stem te bedienen. Zorg dat de toegankelijke naam minimaal de zichtbare tekst bevat. Zie ook 2.4.4.

Hele sample

Uitkomst: Niet van toepassing

Hele sample

Uitkomst: Onvoldoende

PDF Beleidsvisie

Uitkomst: Onvoldoende

PDF Beleidsvisie

Het document heeft geen taal gespecificeerd. Screenreaders lezen de pdf mogelijk niet in de juiste taal voor. Stel de juiste taal in bij de documenteigenschappen in Acrobat.

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

Homepage

Uitkomst: Onvoldoende

Contact

Uitkomst: Onvoldoende

Homepage

Het invoerveld voor de nieuwsbrief heeft geen goed label of instructie wat er ingevuld moet worden. Een placeholder is niet voldoende omdat die niet altijd in beeld blijft staan. (Onder dit criterium gaat het om een zichtbaar label, onafhankelijk van wat hulpsoftware kan detecteren.)

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.

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

Vacature

Uitkomst: Onbekend

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.

Vacature

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’.

Opmerking: De indeling van de landmarks is op veel pagina’s niet logisch. Zie bijvoorbeeld e pagina Team: er zijn 2 ‘main’ landmarks, waarvan een binnen de banner en een binnen een section. Logischerwijs zou er een ‘main’ landmark moeten zijn, en niet binnen een ander element. Gebruikers van hulpsoftware gebruiken landmarks om te navigeren binnen een website. Dit werkt alleen goed als de structuur logisch is opgebouwd. Zie ook screenshot 14.

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