Technisch: verborgen elementen

Er kunnen elementen op een website staan, die niet direct zichtbaar zijn voor de bezoeker, maar wel degelijk toegankelijk moeten zijn. Denk hier bijvoorbeeld aan navigatie-elementen met een dropdown; het navigatie-element zelf is wel zichtbaar, maar wat daaronder zit niet direct.

Hoe lossen wij dat op?

Wij zorgen ervoor dat op het navigatie-element een attribute zit dat aangeeft dat de status van het element op 'Niet uitgeklapt' staat (aria-expanded="false") en het navigatie-menu eronder op onzichtbaar (display:none;) staat.
Dit zorgt ervoor dat de hulpsoftware weet dat er nog wel meer navigatie is, maar dat dit gesloten is en dus niet relevant op het moment. De software gaat dan ook voorbij aan het niet relevante navigatie-menu.

Op het moment dat er een actie plaatsvindt (namelijk met de muis over het element bewegen) verandert de status van het navigatie-element van 'Niet uitgeklapt' naar 'Uitgeklapt' (aria-expanded="true") en wordt het navigatie-menu eronder op zichtbaar (display: block;) gezet.
Het navigatie-menu wordt daardoor direct toegankelijk voor de hulpsoftware, zodat de gebruiker gewoon kan navigeren.

Maar er is nog meer...

Het navigatie-element krijgt van ons ook nog mee aan wélk navigatie-menu deze is gekoppeld. Dit is handig, omdat de navigatie-software dan weet, welk navigatie-menu relevant is op dat moment. Zeker als er meer navigatie-menu's aanwezig zijn, is dit een vereiste. Dit doe je door aan het navigatie element een aria-controls attribuut mee te geven met daarin de naam (#id) van het gekoppelde navigatie-menu.

Ook geef je aan het navigatie-element een extra 'visually-hidden' tekst mee, dat aangeeft dat het element geopend kan worden.

Op welk soort elementen moet je dit gebruiken?

Deze opbouw van navigatie, en andere elementen, is essentieel voor het maken een goede toegankelijke website. Denk hierbij aan alle elementen waarbij niet alle content direct zichtbaar is, zoals zogenaamde hamburger-navigatie en content dat verborgen is achter tabbladen.

Voor zogenoemde accordeon elementen (elementen die open- en dichtschuiven) bestaat er specifieke semantische HTML en is in de basis al voldoende voor speciale hulpsoftware om mee te navigeren.