Toegankelijkheid

HoverCraft gebruikt praktische toegankelijkheidspatronen die passen bij de klassieke WordPress-themaarchitectuur. De nadruk ligt op semantische HTML-markup, voorspelbaar toetsenbordgedrag, zichtbare focusmarkering en een beperkte hoeveelheid JavaScript waar interactieve bediening dat vereist.

Interactieve themaonderdelen gebruiken geschikte standaard HTML-elementen in plaats van klikbare containers of lege links. Knoppen voeren acties uit, zoals het openen van menu's, sluiten van overlays en in- of uitschakelen van interfaceonderdelen. Normale links blijven bedoeld voor navigatie. Decoratieve pictogrammen worden waar nodig verborgen voor ondersteunende technologieën, terwijl het omringende bedieningselement een toegankelijke naam krijgt.

HoverCraft bevat aan het begin van de pagina een link met de tekst Skip to content ('Ga naar inhoud'), die rechtstreeks naar het hoofdgedeelte verwijst. Tijdens normaal browsen valt deze link niet op, maar zodra hij toetsenbordfocus krijgt, wordt hij zichtbaar. Zo kunnen bezoekers die een toetsenbord of ondersteunende technologie gebruiken de herhaalde headernavigatie overslaan.

De toetsenbordfocus blijft zichtbaar bij links, knoppen, formuliervelden, menu's en andere interactieve onderdelen. Uitklapbare navigatie op desktops reageert zowel op toetsenbordfocus als op muisbediening, werkt de informatie over geopende submenu's bij en laat bezoekers open menu's sluiten met de Escape-toets.

De schermvullende zoekfunctie en de overlaymenu's op mobiele apparaten gebruiken toegankelijkheidssemantiek die bij dialoogvensters past. Hun zichtbaarheid blijft gesynchroniseerd met attributen zoals aria-hidden en aria-expanded. Verborgen mobiele panelen kunnen niet normaal worden bediend totdat ze geopend zijn. Bij het openen verplaatst de focus zich naar het actieve paneel; bij het sluiten keert de focus terug naar de knop waarmee het paneel werd geopend.

Mobiele overlay- en offcanvasmenu's kunnen ook met de Escape-toets worden gesloten. Bij de offcanvasindeling kan dat bovendien via de achtergrond achter het menu. Zolang deze interfaces open zijn, wordt scrollen op de achterliggende pagina tijdelijk uitgeschakeld, zodat die pagina niet onafhankelijk van het actieve menu blijft bewegen.

HoverCraft houdt dit gedrag bewust klein en controleerbaar, zonder een groot toegankelijkheidsframework toe te voegen. Verbeteringen worden gerealiseerd met de gewone PHP-sjablonen, semantische markup, gerichte JavaScript en gedeelde CSS van het thema. Toegankelijkheid blijft daardoor onderdeel van het thema zelf en geen aparte frontendlaag.

Gerelateerde documentatie