Presentatierol op interactief element

Silktide voert controles uit op interactieve elementen, zoals knoppen, links en formuliervelden, die zijn gemarkeerd als puur decoratief. Door een interactief element op deze manier te markeren, verliest het zijn betekenis voor ondersteunende technologie, terwijl het op het scherm wel klikbaar blijft.

<!-- Probleem: de knop werkt nog steeds, maar wordt aangekondigd als niets -->
<button role="presentation">Delete</button>

<!-- Oplossing: verwijder de rol -->
<button>Delete</button>

Waarom dit belangrijk is

De -rollen presentation en none vertellen dat een element geen betekenis heeft. Ze zijn bedoeld om de semantiek te verwijderen van bijvoorbeeld lay-outtabellen. Wanneer ze op een interactief element worden toegepast, creëren ze het ergste soort obstakel: een bedieningselement waarop ziende muisgebruikers dagelijks klikken, maar dat door een als inactieve inhoud wordt weergegeven of volledig wordt overgeslagen. De gebruiker kan niet weten dat er überhaupt een knop aanwezig is.

Hoe je dit oplost

Verwijder role="presentation" of role="none" van het interactieve element. Native elementen geven de juiste betekenis al door zonder rol.
Als het element echt niet interactief hoort te zijn, maak het dan zo: vervang het door een niet-interactief element zoals <div> en verwijder elke tabindex.
Als je de betekenis van een wrapper probeerde te onderdrukken (bijvoorbeeld een lay-outtabel rond bedieningselementen), plaats de rol dan op de wrapper en niet op de bedieningselementen erin.

Hoe Silktide dit test

Zoek elk element op de pagina met role="presentation" of role="none".
Bepaal of het element interactief is: een knop, een link of een gebied van een afbeeldingskaart met een href, een formulierveld, of een element dat met een tabindex van 0 of hoger in de toetsenbordtabvolgorde is geplaatst.
Rapporteer elk interactief element met een presentatierol.

Elementen die met een negatieve tabindex uit de tabvolgorde zijn gehaald, worden niet gerapporteerd. Dat geldt ook voor decoratieve elementen zoals afbeeldingen of SVG-afbeeldingen.

Problemen oplossen

Een framework of bibliotheek heeft de rol toegevoegd

Sommige UI-bibliotheken passen role="presentation" toe op interne wrappers en soms op het verkeerde element. Inspecteer het gerapporteerde element: als het echt met de muis kan worden bediend, maar geen informatie geeft aan ondersteunende technologie, moet je de oplossing zoeken in de manier waarop je de bibliotheek gebruikt of in de bibliotheek zelf.

Deze controle rapporteert niets, hoewel ik resultaten verwacht

ARIA-tests kunnen per website worden uitgeschakeld. Controleer de geavanceerde instellingen voor de website.