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.
Leer hoe u ARIA en HTML kunt gebruiken om te begrijpen wanneer u het beste ontbrekende semantiek voor aangepaste besturingselementen kunt toevoegen.
Hoe te 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 CSS kun je de elementen <div> en <button> opmaken om dezelfde visuele voordelen over te brengen, maar de ervaring is heel anders 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 op te lossen
De 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> .
<button>Learn more</button>
Als je een <div> moet gebruiken, voeg dan role="button" en aria-pressed="false" .
<div role="button" aria-pressed="false">Learn more</div>
Schermlezers kondigen nu de rol en interactieve status aan voor de <div> .
Waarom dit ertoe doet
Als u nog niet eerder ondersteunende technologie heeft gebruikt, weet u mogelijk niet hoe uw inhoud presteert voor gebruikers van ondersteunende technologie. Idealiter kunt u spreken met gebruikers die regelmatig ondersteunende technologie gebruiken en feedback delen over hoe uw website of webapplicatie presteert.
Een andere manier om te begrijpen hoe gebruikers van ondersteunende technologie uw inhoud ervaren, is door te testen met ondersteunende technologie . Door een schermlezer te gebruiken, krijgt u een duidelijker inzicht in hoe uw inhoud is gelabeld en of er navigatiebelemmeringen zijn.
Bronnen
U kunt de broncode voor de aangepaste besturingselementen bekijken en ARIA-rollen laten controleren