Controleer of alle aangepaste besturingselementen de juiste role hebben en eventuele vereiste ARIA-attributen die hun eigenschappen en status verlenen. Een aangepast selectievakje heeft bijvoorbeeld een role="checkbox" en aria-checked="true|false" nodig om de status correct weer te geven. Zie de Inleiding tot ARIA voor een algemeen overzicht van hoe ARIA ontbrekende semantiek voor aangepaste besturingselementen kan bieden.
Handmatig testen
Om te controleren of alle aangepaste interactieve besturingselementen de juiste ARIA-rollen hebben, test u de pagina met behulp van het toegankelijkheidspaneel van Chrome DevTools of een schermlezer. JAWS en NVDA zijn twee van de populairste schermlezers voor Windows. VoiceOver is de schermlezer die in MacOS is ingebouwd.
Met behulp van CSS is het mogelijk om de <div> - en <button> -elementen zo op te maken dat ze dezelfde visuele voordelen overbrengen, maar de twee ervaringen zijn heel verschillend bij gebruik van een schermlezer. Een <div> is slechts een algemeen groepselement, dus een schermlezer kondigt alleen de tekstinhoud van de <div> aan. De <button> wordt aangekondigd als een "knop", een veel sterker signaal voor de gebruiker dat het iets is waarmee hij kan communiceren. Zie ook Semantiek en schermlezers .
Hoe te repareren
De eenvoudigste en vaak beste oplossing voor dit probleem is het geheel vermijden van aangepaste interactieve besturingselementen. Vervang bijvoorbeeld een <div> die als een knop fungeert, door een daadwerkelijke <button> .
Als je de <div> moet behouden, voeg dan role="button" en aria-pressed="false" toe aan de <div> .
Nu zullen schermlezers de rol en interactieve status voor de <div> aankondigen.
Waarom dit ertoe doet
De enige manier om echt te begrijpen hoe gebruikers van ondersteunende technologie uw inhoud ervaren, is door die inhoud zelf te controleren met behulp van een schermlezer. Als u uit de eerste hand een schermlezer gebruikt, krijgt u een duidelijk inzicht in hoe uw inhoud is gelabeld en of er obstakels zijn voor navigatie met ondersteunende technologie. Als u niet bekend bent met de manier waarop semantische markup wordt geïnterpreteerd door ondersteunende technologie, raadpleeg dan de Inleiding tot de semantiek voor een opfrisser.
Zie ook Een toegankelijkheidsbeoordeling uitvoeren .
Bronnen
Broncode voor aangepaste besturingselementen heeft ARIA-rollenaudit