Van de achttien bevindingen die in de vorige audit op alle pagina's stonden, zijn er twaalf opgelost. In de cookiemelding zijn dat er vijf: het venster heeft nu de rol van dialoogvenster en een toegankelijke naam, de toetsenbordfocus blijft erin, de secties eronder geven door of ze open of dicht staan, de pijlen bij die secties hebben een tekstalternatief, en de selectievakjes hebben genoeg contrast.
Bovenaan elke pagina staat nu een skiplink, "Ga naar paginainhoud". Het kruimelpad staat in een nav-element met een ol eromheen. De menuknop op een klein scherm is een button-element geworden en werkt met de spatiebalk en Enter. De toetsenbordfocus blijft in het mobiele menu zolang dat openstaat, en komt op een klein scherm na het logo niet meer op elementen die je niet ziet. En de tekst "Custom website by Omelette du Fromage" onderaan de pagina is wit op blauw (#345DA8), met een contrastratio van 6,4:1.
Het oplossen van de focus in het mobiele menu heeft wel een nieuw probleem opgeleverd. Dat staat hieronder als bevinding 35, samen met de zes punten die nog openstaan en één andere nieuwe bevinding.
#5 - Taalwisseling ontbreekt op anderstalige content
Wanneer een bezoeker de website voor het eerst opent, verschijnt er een cookiebanner. De knop "Details bekijken" toont secties met verborgen inhoud onder "De cookies die wij gebruiken per categorie". In deze secties staan delen in de Engelse taal zonder taalcode. Zie de tabellen en zinnen zoals "We do not use any functional cookies". Deze tekst wordt nu voorgelezen volgens de uitspraakregels van de primaire taal van de pagina. Die staat in het lang-attribuut op het html-element, in dit geval op nl. De schermlezer zou juist op de taal van de zin moeten overschakelen.
Oplossing:
Voeg een lang-attribuut met de juiste taalcode toe aan het element dat de tekst in een andere taal bevat. Staat er Engelse tekst, dan zet je er lang="en" op.
#6 - Kleurcontrast van tekst is te laag (tekst kleiner dan 24px en niet vetgedrukt)
In het hoofdmenu staan links met witte tekst op een video als achtergrond. In sommige fragmenten komt die witte tekst op een zeer lichte achtergrond te staan. Het kleurcontrast wordt dan lager dan de 4,5:1 die nodig is voor deze tekst van 16 pixels.
Wanneer een bezoeker de website voor het eerst opent, verschijnt er een cookiebanner. De knop "Details bekijken" toont de sectie "De cookies die wij gebruiken per categorie". Die sectie heeft donkerblauwe tekst (#345DA8) op een lichtgrijze achtergrond (#D4D4D0). De contrastratio is te laag: 4,3:1. De tekst wordt blauw wanneer je er met de muis overheen gaat, wanneer je hem selecteert en wanneer het gedeelte is uitgevouwen.
Oplossing:
Deze tekst is kleiner dan 24px en niet vetgedrukt, daarom moet de contrastratio minimaal 4,5:1 zijn. Op https://properaccess.nl/hoe-test-ik-kleurcontrast/ staat een instructie die uitlegt hoe je kleurcontrast test.
#10 - Er is maar één manier om een webpagina te vinden
Er is geen tweede manier om de pagina's van deze website te vinden. Alle pagina's die op de website staan moeten op meerdere manieren te vinden zijn.
Oplossing:
Zorg dat de webpagina's op meerdere manieren te vinden zijn. Dat mag met een zoekveld, een sitemap of een inhoudsopgave.
#11 - Elementen die toetsenbordfocus krijgen zijn bedekt door sticky header
Wanneer de website wordt verkleind tot een lagere resolutie, bedekt een sticky header een deel van de pagina. Interactieve elementen zoals links kunnen dan nog wel toetsenbordfocus krijgen, maar de focusindicator gaat schuil achter die header. Zie bijvoorbeeld de link "Alle nieuwsberichten" onderaan de pagina bij 400% zoom. Bezoekers die met het toetsenbord navigeren kunnen daardoor niet zien waar de focus staat.
Oplossing:
Zorg dat de sticky header of footer geen interactieve elementen of hun focusindicatoren bedekt. Dat kan door de z-index aan te passen, de elementen anders te plaatsen, of de header of footer kleiner te maken op kleine schermen.
#12 - Tekstalternatief van het logo is niet voldoende
De alt-tekst van het logo bovenaan is veranderd sinds de vorige audit, maar de volledige tekst van het logo staat er nog steeds niet in.
Het logo bovenaan de website toont de tekst "NZKG noordzeekanaalgebied kanaal naar de toekomst". Het bestaat uit een afbeelding met de alt-tekst "NZKG - Noordzeekanaalgebied Logo" en een svg met de tekst "kanaal naar de toekomst". Die svg heeft geen tekstalternatief. De link om het logo heen heeft daarnaast een aria-label met de waarde "Navigeer naar home". Dat label vervangt de alt-tekst, dus een schermlezer leest alleen "Navigeer naar home" voor.
Het logo onderaan de pagina toont de tekst "NZKG noordzeekanaalgebied", terwijl het tekstalternatief "Kanaal naar de toekomst Logo" is. In het tekstalternatief staat dus niet alle tekst die in het logo te zien is. Dat hoort wel: zo weten bezoekers die het plaatje niet kunnen zien ook precies wat er staat.
Oplossing:
Zorg dat de volledige tekst van het logo in de toegankelijke naam van de link staat. Dat kan op twee manieren:
- Haal het
aria-label"Navigeer naar home" weg en geef het logo een tekstalternatief met alle tekst die erin te zien is. Zet de alt-tekst bijvoorbeeld op "NZKG noordzeekanaalgebied kanaal naar de toekomst" en geef desvghet attribuutaria-hidden="true". - Of neem de volledige tekst van het logo op in het
aria-label.
Verander ook de alt-tekst van het logo onderaan de pagina, zodat de volledige tekst van dat logo erin staat.
#13 - Tekst van het logo staat niet in toegankelijke naam
Bovenaan de pagina toont het logo de tekst "NZKG noordzeekanaalgebied kanaal naar de toekomst". De link om het logo heen heeft een aria-label met de waarde "Navigeer naar home", en dat is daardoor de toegankelijke naam van de link. Het logo onderaan de pagina toont de tekst "NZKG noordzeekanaalgebied", maar de toegankelijke naam van die link is "Kanaal naar de toekomst Logo".
De toegankelijke naam van de links bevat dus niet de tekst die in het logo zichtbaar is. Daardoor werken de links niet goed als je ze met je stem wilt activeren. Je noemt dan namelijk de tekst die je in het logo ziet. Omdat de toegankelijke naam anders is, herkent het systeem de link niet.
Oplossing:
Zorg dat de tekst die in het logo zichtbaar is voorkomt in de toegankelijke naam, het liefst vooraan. Nog beter is het als de toegankelijke naam gelijk is aan de zichtbare tekst.
#34 - Menuknop heeft geen toegankelijke naamNieuw
Op een klein scherm heeft de menuknop bovenaan geen toegankelijke naam. Het button-element bevat alleen drie lege span-elementen, de streepjes van het icoon, zonder aria-label en zonder verborgen tekst. Schermlezers lezen daardoor alleen "knop" voor, zonder te vertellen waarvoor de knop dient.
Oplossing:
Geef de menuknop een toegankelijke naam, bijvoorbeeld met aria-label="Menu" of met tekst die visueel verborgen is.
#35 - Toetsenbordfocus zit vast op de menuknop nadat het mobiele menu is geslotenNieuw
Deze bevinding is ontstaan na het oplossen van bevinding 16 uit de vorige audit, over de toetsenbordfocus in het mobiele menu.
Op een klein scherm blijft de toetsenbordfocus vastgehouden nadat het mobiele menu is gesloten, met de sluitknop of met Esc. Met Tab en Shift + Tab komt de focus daarna steeds opnieuw op de menuknop. Bezoekers die met het toetsenbord navigeren bereiken de rest van de pagina niet meer. Sluit je het menu met Esc, dan staat de focus bovendien eerst op een link in het menu dat op dat moment niet meer te zien is.
Oplossing:
Zorg dat de focus in het menu blijft totdat de bezoeker het sluit met de sluitknop of met Esc, en zet de focus daarna terug op de menuknop zonder hem daar vast te houden. Je kunt het menu ook automatisch sluiten als de focus het menu verlaat.