Aangepaste besturingselementen hebben bijbehorende labels

Aangepaste interactieve bedieningselementen moeten focusseerbaar zijn. Als u bijvoorbeeld JavaScript gebruikt om van een <div> een mooie vervolgkeuzelijst te maken, wordt die vervolgkeuzelijst niet automatisch in de juiste tabvolgorde ingevoegd.

U moet handmatig controleren of alle aangepaste besturingselementen via het toetsenbord kunnen worden gefocust .

Gebruik waar mogelijk semantische HTML-elementen die interactie mogelijk maken.

Hoe te testen

Om te testen of het aangepaste besturingselement focusbaar is, drukt u op de TAB toets om door de site te navigeren:

Kunt u alle interactieve bedieningselementen op de pagina bereiken? Als dat niet het geval is, moet u mogelijk tabindex gebruiken om de focusbaarheid van deze besturingselementen te verbeteren. Zie ook Focus regelen met tabindex .

Hoe te repareren

Om een ​​aangepast besturingselement focusseerbaar te maken, voegt u het aangepaste besturingselement in de natuurlijke tabvolgorde in met behulp van tabindex="0" . Bijvoorbeeld:

<div tabindex="0">Focus me with the TAB key</div>

Waarom dit ertoe doet

Voor gebruikers die geen muis kunnen of willen gebruiken, is toetsenbordnavigatie het belangrijkste middel om alles op een scherm te bereiken. Goede toetsenbordervaringen zijn afhankelijk van een logische tabvolgorde en waarneembare focusstijlen. Als een toetsenbordgebruiker niet kan zien wat de focus is, heeft hij geen enkele mogelijkheid om met de pagina te communiceren.

Als u nog niet bekend bent met het testen van toegankelijkheid, raden we u aan meer te lezen over het handmatig testen van toegankelijkheid en het testen van ondersteunende technologie .

Bronnen