Toegankelijkheidsonderzoek

Issues:
Audit digitale toegankelijkheid website praatmee.alblasserdam.nl

(Alleen de bevindingen)

Scope van de evaluatie

Naam website praatmee.alblasserdam.nl
Datum 11 december 2023
Scope van de website Alle pagina's op https://praatmee.alblasserdam.nl/.
Conformiteitsdoel WCAG 2.1 niveau AA

Uitgebreide toetsresultaten

Aantal bevindingen: 31

1. Waarneembaar

1.1 Tekstalternatieven

1.1.1 Niet-tekstuele content (Niveau A)

Informatie over succescriterium 1.1.1 Niet-tekstuele content

Uitkomst: Onvoldoende

Bevinding 1: Op pagina https://praatmee.alblasserdam.nl staat het logo van Gemeente Alblasserdam inclusief een ander groen logo. Deze afbeelding heeft geen (goede) alternatieve tekst. De alternatieve tekst van een logo moet minimaal de naam van de organisatie bevatten evenals andere teksten die opgenomen zijn in de afbeelding. Als de afbeelding als link dient kan er ook een beschrijvend linkdoel aan de alternatieve tekst toegevoegd worden. Een goede alternatieve tekst voor deze afbeelding zou zijn: "Gemeente Alblasserdam, Fit en groen, hoe zou jij dat doen?, ga naar homepage".

Bevinding 2: Als je de website bekijkt op een scherm met een lagere resolutie, bijvoorbeeld een op een mobiel, dan verandert de hoofdnavigatie in een knop, een afbeelding met 3 horizontale strepen. Als het navigatiemenu is geopend, wijzigt deze afbeelding in een kruisje. Deze afbeelding is toegevoegd via het <img>-element, waarbij het alt-attribuut ontbreekt. Deze afbeelding kan als decoratief worden beschouwd, omdat een tekstalternatief geboden is in de vorm van een tekst die door hulpsoftware gelezen kan worden. Voeg een leeg alt-attribuut toe (alt="") om de afbeelding voor hulpsoftware te verbergen.

Bevinding 3: Op de pagina https://praatmee.alblasserdam.nl/suggestiekaart staat een zoekbalk. De knop om de zoekopdracht te versturen heeft een afbeelding via een <img>-element. Op dit element ontbreekt het alt-attribuut. Hierdoor zijn er meer problemen ontstaan: de knop mist een toegankelijke naam. Dit valt onder succescriterium 4.1.2.

Bevinding 4: In het pdf-document https://praatmee.alblasserdam.nl/uploads/attachments/clezsrg820cgx0igi42u6siek-verslagen-activiteiten-wijk-centrum.pdf missen informatieve afbeeldingen die via <figure>-tags zijn toegevoegd, tekstalternatieven. Zie de groene kaders met tekst die als afbeeldingen zijn toegevoegd vanaf pagina 9. De decoratieve afbeeldingen zijn niet verborgen voor hulpsoftware. Dit kan worden gedaan door ze te coderen als artefact.

Bevinding 5: In het pdf-document https://praatmee.alblasserdam.nl/uploads/attachments/clk6xq1q915u40ie9k56qyz4w-verslag-jeugdpunt.pdf zijn afbeeldingen aanwezig op pagina 4 en 5 die geen betekenis hebben. Het zijn witte vlakken. Zorg dat deze afbeeldingen verborgen zijn voor hulpsoftware door ze te coderen als artefact.

1.3 Aanpasbaar

1.3.1 Info en relaties (Niveau A)

Informatie over succescriterium 1.3.1 Info en relaties

Uitkomst: Onvoldoende

Bevinding 6: Op pagina https://praatmee.alblasserdam.nl/suggestie/15 is de eerste alinea opgemaakt met het strong-element: "We zouden heel graag dat er een nieuwe grasmat of, beter nog, kunstgras wordt gelegd. Ook een hoger hek tussen het veld en de sloot.". Het strong-element is bedoeld om nadruk te geven aan een of enkele woorden, niet voor hele zinnen. Als het de bedoeling is om de tekst vet af te drukken gebruik daar dan de code in de stylesheet voor of gebruik het b-element. Dit komt ook voor op de pagina https://praatmee.alblasserdam.nl/suggestie/11.

Bevinding 7: Op pagina https://praatmee.alblasserdam.nl/ volgt op een kop van niveau 2 een kop van niveau 3 waardoor het lijkt dat de eerste kop ("Je kan binnenkort weer meedenken! ") de onderstaande koppen ("Februari 2023", "Maart 2023", ...) beschrijft. Bezoekers die gebruikmaken van schermvoorleessoftware kunnen aan de hand van een sneltoets of een koppenlijst over een pagina navigeren om snel informatie te vinden. Daarom is het belangrijk om een goed lopende koppenstructuur te gebruiken. Dit is hier bijvoorbeeld op te lossen door boven de tijdlijn een kopje te plaatsen met kopniveau 2 die beschrijft wat hieronder vermeld staat.

Bevinding 8: In het pdf-document https://praatmee.alblasserdam.nl/uploads/attachments/clezsrg820cgx0igi42u6siek-verslagen-activiteiten-wijk-centrum.pdf ontbreken koppen. Er zijn visueel veel kopteksten aanwezig, maar ze zijn allemaal opgemaakt met <p>-tags. Hierdoor leest een schermlezer een andere structuur voor dan een ziende bezoeker ziet.

Bevinding 9: In het pdf-document https://praatmee.alblasserdam.nl/uploads/attachments/clk6xq1q915u40ie9k56qyz4w-verslag-jeugdpunt.pdf bevinden zich tabellen. De tabel begint elke pagina met tabelkoppen. In de code ontbreekt deze code echter en zijn de cellen als gewone cellen gecodeerd. Zorg voor een correcte codering (<TH>) zodat de cellen koppen zijn.

1.3.5 Identificeer het doel van de input (Niveau AA)

Informatie over succescriterium 1.3.5 Identificeer het doel van de input

Uitkomst: Onvoldoende

Bevinding 10: Op pagina https://praatmee.alblasserdam.nl/contact is een formulier waar de bezoeker onder andere een eigen voornaam, achternaam en e-mail kan invullen. Het doel van deze en een aantal andere velden moet programmatisch kunnen worden bepaald, zodat velden automatisch kunnen worden ingevuld of extra hulp kan worden geboden bij het invullen. Dit kan door het autocomplete-attribuut aan de input-elementen toe te voegen. Bijvoorbeeld voor e-mailadres autocomplete="email".
Een overzicht van de velden waarvoor het autocomplete-attribuut van toepassing is en de waarde die nodig is in dit attribuut, staat op de pagina: https://www.w3.org/tr/wcag21/#input-purposes.

1.4 Onderscheidbaar

1.4.1 Gebruik van kleur (Niveau A)

Informatie over succescriterium 1.4.1 Gebruik van kleur

Uitkomst: Onvoldoende

Bevinding 11: Op de pagina https://praatmee.alblasserdam.nl/contact, onder het kopje "Kom in contact", staat een link "veelgestelde vragen" die alleen in kleur verschilt van de normale tekst. De tekst wordt onderstreept als de bezoeker met de muis over deze link beweegt, maar deze aanwijzing is niet beschikbaar op alle apparaten. Zorg dat links in doorlopende tekst duidelijk onderscheidbaar is door ze bijvoorbeeld te onderstrepen. Dit doet zich ook voor op andere pagina's:

1.4.3 Contrast (minimum) (Niveau AA)

Informatie over succescriterium 1.4.3 Contrast (minimum)

Uitkomst: Onvoldoende

Bevinding 12: Op de pagina https://praatmee.alblasserdam.nl/, in de footer van de website, staan links. Wanneer deze links focus krijgen, verandert de tekstkleur van zwart naar wit. Op de bruine achtergrond van de footer (#CC9F52) wordt de contrastverhouding 2,4:1. Dit moet minimaal 4,5:1 zijn.

Bevinding 13: Op de pagina https://praatmee.alblasserdam.nl/contact staat een contactformulier. Als het formulier leeg wordt verzonden, verschijnt er een foutmelding. De rode tekst van de foutmelding op witte achtergrond heeft onvoldoende contrast (#FF0000), de contrastverhouding is 4.0:1. Dat moet minimaal 4,5:1 zijn.

Bevinding 14: Op de pagina https://praatmee.alblasserdam.nl/suggestiekaart staat een zoekbalk. Als je op het zoekveld klikt, verschijnt er een lichtgrijze (placeholder)tekst op witte achtergrond met onvoldoende contrast (#B4B4B4), de contrastverhouding is 2,1:1. Dat moet minimaal 4,5:1 zijn. Dezelfde problemen met het zoekveld doen zich ook voor op de pagina https://praatmee.alblasserdam.nl/plannen.

Bevinding 15: In het pdf-document https://praatmee.alblasserdam.nl/uploads/attachments/clezsrg820cgx0igi42u6siek-verslagen-activiteiten-wijk-centrum.pdf zijn kleurcontrastproblemen aangetroffen. De blauwe tekst die vanaf pagina 1 te zien is, heeft een contrastverhouding van 2,9:1. Dit moet minimaal 4,5:1 zijn.

1.4.5 Afbeeldingen van tekst (Niveau AA)

Informatie over succescriterium 1.4.5 Afbeeldingen van tekst

Uitkomst: Onvoldoende

Bevinding 16: In het pdf-document https://praatmee.alblasserdam.nl/uploads/attachments/clezsrg820cgx0igi42u6siek-verslagen-activiteiten-wijk-centrum.pdf, op pagina's 9 tot en met 13, staan afbeeldingen van lijsten met tekst die in platte tekst in het document kunnen worden geplaatst. Voor bezoekers met een visuele beperking is het belangrijk dat tekst als echte tekst op een pagina wordt geplaatst en niet als een afbeelding. Deze tekst kan dan eenvoudig worden voorgelezen door hulpsoftware en schaalt automatisch mee met vergroten.

1.4.11 Contrast van niet-tekstuele content (Niveau AA)

Informatie over succescriterium 1.4.11 Contrast van niet-tekstuele content

Uitkomst: Onvoldoende

Bevinding 17: Op pagina https://praatmee.alblasserdam.nl/suggestiekaart, onder de kaart, staat een zoekbalk. De randkleur is lichtgrijs als het veld geen focus heeft. Het kleurcontrast is 1,2:1. Dit moet minimaal 3,0:1 zijn.

2. Bedienbaar

2.4.2 Paginatitel (Niveau A)

Informatie over succescriterium 2.4.2 Paginatitel

Uitkomst: Onvoldoende

Bevinding 18: In de metadata van pdf-document https://praatmee.alblasserdam.nl/uploads/attachments/clezsrg820cgx0igi42u6siek-verslagen-activiteiten-wijk-centrum.pdf is de titel niet ingesteld. De titel moet een korte beschrijving van de inhoud van het bestand zijn. Voor mensen die gebruik maken van hulpsoftware is een goede titel waardoor ze weten waar ze zijn als ze tussen meerdere documenten navigeren. Dit kan worden ingesteld via de bestandseigenschappen. Hier moet ook worden ingesteld dat de titel wordt getoond in de titelbalk en niet de bestandsnaam, zoals nu het geval is.
Dit komt ook voor in het pdf-document https://praatmee.alblasserdam.nl/uploads/attachments/clezsrg820cgx0igi42u6siek-verslagen-activiteiten-wijk-centrum.pdf

2.4.3 Focus volgorde (Niveau A)

Informatie over succescriterium 2.4.3 Focus volgorde

Uitkomst: Onvoldoende

Bevinding 19: Bij een lage resolutie, bijvoorbeeld op tablet of mobiel wordt het navigatiemenu vervangen door een knop op https://praatmee.alblasserdam.nl/. Als je het menu opent en vervolgens met de tabtoets verder navigeert verlaat je het menu, maar blijft deze open staan. Hierna zie je niet of nauwelijks waar je bent. Zorg dat bij verlaten van het uitgevouwen navigatiemenu het menu weer automatisch invouwt of zorg ervoor dat je met het toetsenbord het menu niet kunt verlaten zonder deze te sluiten.

Bevinding 20: Op pagina https://praatmee.alblasserdam.nl/veelgestelde-vragen wordt gebruikgemaakt van uitvouwbare blokken (accordeons) zoals bij "Wat gebeurt er met de reacties". Er doet zich hier een probleem voor met de focusvolgorde. De items in de uitvouwbare tekstblokken krijgen toetsenbordfocus, terwijl dit geen interactief element is (bijvoorbeeld knop of link). Dit is verwarrend voor gebruikers die met het toetsenbord navigeren. Laat de focus op het tekstblok weg.

Informatie over succescriterium 2.4.4 Linkdoel (in context)

Uitkomst: Onvoldoende

Bevinding 21: Op de pagina https://praatmee.alblasserdam.nl/ staat een logo die als een link fungeert. Het linkdoel van deze link is niet duidelijk aangezien de enige informatie die hulpsoftware krijgt is "logo". Deze tekst is afkomstig van het tekstalterantief. Geef deze link een beter linkdoel. Zie ook SC 1.1.1

2.4.5 Meerdere manieren (Niveau AA)

Informatie over succescriterium 2.4.5 Meerdere manieren

Uitkomst: Onvoldoende

Bevinding 22: Er is maar één manier om alle pagina's binnen deze website te vinden en dat is de hoofdnavigatie. Zorg dat er nog een manier is om elke pagina te kunnen bereiken.

2.4.7 Focus zichtbaar (Niveau AA)

Informatie over succescriterium 2.4.7 Focus zichtbaar

Uitkomst: Onvoldoende

Bevinding 23: Bij een lage resolutie, bijvoorbeeld op tablet of mobiel wordt het navigatiemenu vervangen door een knop op https://praatmee.alblasserdam.nl/. Deze knopknop heeft geen zichtbare focus. Iemand die met het toetsenbord door de pagina navigeert ziet hier niet waar de focus op staat. Zorg ervoor dat alle interactieve elementen zichtbare focus krijgen.

2.5 Input modaliteiten

2.5.3 Label in naam (Niveau A)

Informatie over succescriterium 2.5.3 Label in naam

Uitkomst: Onvoldoende

Bevinding 24: Op pagina https://praatmee.alblasserdam.nl staat het logo van Gemeente Alblasserdam inclusief een ander groen logo. Deze klikbare afbeelding heeft een alternatieve tekst die niet overeenkomt met de zichtbare tekst. De link is daarom niet makkelijk met spraak te besturen. Zog dat de toegankelijke naam overeenkomt met de zichtbare. Zie SC 1.1.1

3. Begrijpelijk

3.1 Leesbaar

3.1.1 Taal van de pagina (Niveau A)

Informatie over succescriterium 3.1.1 Taal van de pagina

Uitkomst: Onvoldoende

Bevinding 25: Op de pagina https://praatmee.alblasserdam.nl/ is de taal niet correct ingesteld. Het lang-attribuut heeft geen waarde. Dit moet lang="nl" zijn. Zonder de juiste waarde in dit attribuut wordt de inhoud van de pagina mogelijk een verkeerd eandere taal voorgelezen.

3.3 Assistentie bij invoer

3.3.1 Foutidentificatie (Niveau A)

Informatie over succescriterium 3.3.1 Foutidentificatie

Uitkomst: Onvoldoende

Bevinding 26: Wanneer bezoekers op pagina https://praatmee.alblasserdam.nl/contact geen of foutieve invoer invullen, verschijnt er een foutmelding bij het betreffende veld. Bijvoorbeeld 'Dit is een verplicht veld.' Een goede foutidentificatie vermeld welke fout is gemaakt, en waar de fout is gemaakt. Bijvoorbeeld 'Dit veld is niet ingevuld’. Dat een veld verplicht is, is een foutsuggestie zoals omschreven bij succescriterium 3.3.3.

3.3.2 Labels of instructies (Niveau A)

Informatie over succescriterium 3.3.2 Labels of instructies

Uitkomst: Onvoldoende

Bevinding 27: Op de pagina https://praatmee.alblasserdam.nl/contact staat een contactformulier. Er zijn verplichte invoervelden (voornaam, achternaam, e-mail), maar deze zijn op geen enkele manier gemarkeerd; er is geen indicator, zoals een asterisk "*" en een tekst. Ook is er in deze velden een minimumaantal tekens vereist (2), maar ook dit wordt nergens aangegeven. Informatie hierover verschijnt pas nadat de tekens zijn ingevoerd.

4. Robuust

4.1 Compatibel

4.1.2 Naam, rol, waarde (Niveau A)

Informatie over succescriterium 4.1.2 Naam, rol, waarde

Uitkomst: Onvoldoende

Bevinding 28: Op elke pagina is het navigatiemenu. Hier zijn rollen toegekend aan een aantal elementen. Zo bevat het nav-element role="menubar". De links hebben role="menuitem". Deze rollen zijn verkeerd ingezet. De menuitems staan bijvoorbeeld op de verkeerde plaats. Voor de hoofdnavigatie zijn deze rollen overbodig en volstaat de huidige HTML-structuur met het het ul-elementen en daaronder de li-elementen. Haal alle rollen uit de navigatie.

Bevinding 29: Op pagina https://praatmee.alblasserdam.nl/contact is bij de 4 velden het label niet expliciet geassocieerd met het invulveld. Tekstlabels moeten gekoppeld worden aan invoervelden door gebruik te maken van het for-attribuut bij het label-element die verwijst naar een id-attribuut bij het invoerveld. Zo krijgt een bezoeker die gebruik maakt van een screenreader direct te horen om welk veld het gaat als direct naar het invoerveld wordt gesprongen.

Bevinding 30: Op de pagina https://praatmee.alblasserdam.nl/suggestiekaart staat een zoekbalk. De knop heeft geen toegankelijke naam. Zie ook SC 1.1.1

Bevinding 31: Op pagina https://praatmee.alblasserdam.nl/veelgestelde-vragen wordt gebruikgemaakt van uitvouwbare blokken (accordeons) zoals bij "Wat gebeurt er met de reacties?". Voor ziende gebruikers is het duidelijk dat een tekstblok in- of uitgevouwen is. Voor screenreadergebruikers die blind of slechtziend zijn is dat niet zo. Geef in de code de status aan met aria-expanded of een vergelijkbare techniek, om dit probleem op te lossen. Advies is om van het klikbare deel een knop te maken in plaats van een link.

Onderbouwing van de evaluatie

Het onderzoek is uitgevoerd op basis van de evaluatiemethode van het W3C, WCAG-EM. Dit gebeurt grotendeels handmatig door een steekproef te nemen. Voor een quickscan geldt dat we slechts delen uit deze methodiek gebruiken. Ondanks alle zorgvuldigheid en ervaring van de onderzoeker kan het voorkomen dat een probleem niet gesignaleerd is. Houd er rekening mee dat in een volgend onderzoek bepaalde onderdelen anders worden beoordeeld omdat technologieën en hulpsoftware worden doorontwikkeld. Bij het handmatig onderzoek wordt gebruik gemaakt van tools.

Steekproef getoetste webpagina's

Ondersteunende technieken

Bronnen

Deze rapportage is grotendeels gemaakt met de online evaluatietool van W3C.

Geprint: 2025-03-14 14:06:52 v2.4-011