Info en relaties ontbreken in de code
Informatie en relaties die je visueel ziet — dat een aantal velden bij elkaar horen, dat iets een kop is, dat iets een lijst is — moeten ook in de HTML staan. Anders is de samenhang alleen toegankelijk voor wie het scherm kan zien.
Onder de tekst "Services:" staat een ul-element zonder lijstitems. Een lege lijst geeft geen betekenisvolle structuur en kan door hulpsoftware worden aangekondigd als een lijst zonder items, wat verwarrend is.
Hetzelfde probleem komt voor op onder andere de pagina https://geoservices.zuid-holland.nl/arcgis/rest/services/Anders/Europese_Projectie_EPSG3035/MapServer onder de teksten "Initial Extent:", "Full Extent:" en "Document Info:".
Web — Lege lijst zonder lijstitems
Knoppen zonder toegankelijke naam
Voor wie een schermlezer of spraakbediening gebruikt, bestaat een knop pas zodra hij een naam heeft. Zonder naam kondigt de schermlezer alleen "knop" aan — de gebruiker weet niet wat er gebeurt als hij hem activeert.
Op deze pagina heeft het invoerveld "Historic Moment:" geen toegankelijke naam. Bezoekers die blind of slechtziend zijn en een schermlezer gebruiken, kunnen daardoor niet vaststellen waar het veld voor dient. Elk invoerveld moet een toegankelijke naam hebben die de functie duidelijk beschrijft. Dit raakt ook succescriterium 2.5.3, omdat de zichtbare tekst niet in de toegankelijke naam is opgenomen.
Web — Invoerveld heeft geen toegankelijke naam
Tekst schaalt niet mee
Veel mensen vergroten tekst — via de browser, via systeeminstellingen, of via een loep. Werkt jouw site daar niet aan mee, dan sluit je iedereen uit die geen kleine tekst kan lezen.
Bij een schermresolutie van 1280 bij 1024 pixels en 400% zoom verschijnt op de website een horizontale schuifbalk. Een deel van de links is dan niet meer zichtbaar, bijvoorbeeld "Login".
Web — Bij 400% inzoomen verschijnt een horizontale schuifbalk
Onvoldoende kleurcontrast
Niet iedereen heeft perfecte ogen — denk aan slechtzienden of iedereen die de site in fel zonlicht bekijkt. Met genoeg contrast (4,5:1 voor tekst, 3:1 voor randen en iconen) blijven knoppen en links voor iedereen leesbaar.
Bij het verzenden van een leeg formulier verschijnt de foutmelding "Invalid 'size'" in rood (#FF6666) op een witte achtergrond. Het contrast is 2,9:1. Normale tekst (kleiner dan 18pt, of kleiner dan 14pt vet) heeft een contrast van minimaal 4,5:1 nodig om leesbaar te zijn. Onvoldoende contrast maakt tekst lastig of onmogelijk leesbaar voor bezoekers met een visuele beperking of kleurzwakte.
Web — Tekstcontrast is lager dan 4,5:1
Taal niet gedefinieerd
Een schermlezer moet weten in welke taal hij zit, anders leest hij Nederlandse tekst voor met Engelse uitspraakregels. Het lang-attribuut op het html-element vertelt hem de paginataal.
Op alle pagina's staat tekst in een andere taal (Nederlands) zonder taalcode (nl), bijvoorbeeld in de broodkruimels: "Gebiedsprofielen" en andere termen. Hierdoor leest een schermlezer deze tekst voor met de uitspraakregels van de hoofdtaal, waardoor de woorden verkeerd worden uitgesproken.
Web — Anderstalige content heeft geen taalcode