Interactieve elementen geven hun doel en staat aan

Interactieve elementen, zoals links en knoppen, moeten hun status aangeven en te onderscheiden zijn van niet-interactieve elementen. Om te controleren of interactieve elementen hun doel en status aangeven, gebruikt u zowel een visuele test als een schermlezertest.

Hoe u de visuele focus handmatig kunt testen

Als u de visuele focus handmatig wilt testen, TAB door uw pagina.

  • Kunt u met de tab naar elk interactief element gaan?
  • Wanneer u bij een interactief element komt, is er dan een visuele aanwijzing dat gebruikers ermee kunnen communiceren?
  • Verandert elk interactief element van uiterlijk wanneer u het selecteert?

Er zijn veel manieren om de focusindicatoren voor elk interactief element vorm te geven. Eén zekere manier is om :focus te gebruiken. Met de pseudo-klasse :focus kunt u een uniforme stijl op een element toepassen. Die stijl wordt elke keer toegepast wanneer het element wordt gefocust, ongeacht het invoerapparaat of de methode die wordt gebruikt om het te focusseren.

Lees meer in Stijlfocus .

Handmatig testen met een schermlezer

Gebruik een schermlezer om door uw pagina te navigeren en controleer of de schermlezer de naam van elk interactief besturingselement, de rol van dat besturingselement en de huidige interactieve status kan aankondigen. Als de rol van een element onduidelijk is en de status van het element onduidelijk is, moet u mogelijk de juiste ARIA-rollen toevoegen. Meer informatie vindt u in Aangepaste besturingselementen hebben ARIA-rollen .

Het is ook belangrijk om goed te letten op de manier waarop interactieve elementen worden gelabeld. Gebruikers van schermlezers en andere ondersteunende technologieën vertrouwen op labels om de context van dat element te begrijpen. Vage labels komen vaak voor en zijn niet nuttig bij het navigeren door de inhoud. Leer hoe u labels en tekstalternatieven kunt verbeteren.

Waarom dit ertoe doet

Door visuele hints te geven over wat een besturingselement zal doen, kunnen mensen uw site bedienen en navigeren. Deze hints worden 'affordances' genoemd. Door betaalbare prijzen te bieden, kunnen mensen uw site op een breed scala aan apparaten gebruiken.

Bronnen

Broncode voor interactieve elementen geeft hun doel en statusaudit aan