Presentationsroll på interaktivt element
Silktide kontrollerar om interaktiva element, till exempel knappar, länkar och formulärfält, har markerats som rent dekorativa. När ett interaktivt element markeras på detta sätt försvinner dess betydelse för hjälpmedel, samtidigt som det fortfarande går att klicka på skärmen.
<!-- Problem: knappen fungerar fortfarande, men presenteras som ingenting -->
<button role="presentation">Delete</button>
<!-- Lösning: ta bort rollen -->
<button>Delete</button>
Varför detta är viktigt
-rollerna presentation och none talar om för
att ett element saknar betydelse – de
finns för att ta bort semantik från exempelvis layouttabeller. När de används
på ett interaktivt element skapar de den värsta sortens hinder: ett reglage
som seende musanvändare klickar på varje dag, men som en
presenterar som inaktivt innehåll eller
hoppar över helt. Användaren har inget sätt att veta att en knapp ens finns.
Så åtgärdar du problemet
- Ta bort
role="presentation"ellerrole="none"från det interaktiva elementet. Inbyggda element exponerar redan rätt betydelse utan någon roll. - Om elementet verkligen inte ska vara interaktivt, gör det icke-interaktivt:
ersätt det med ett icke-interaktivt element, till exempel
<div>, och ta bort eventuelltabindex. - Om du försökte dölja betydelsen hos en omslutande behållare (till exempel en layouttabell runt kontroller), placera rollen på behållaren, inte på kontrollerna i den.
Så testar Silktide detta
- Hitta alla element på sidan med
role="presentation"ellerrole="none". - Fastställ om elementet är interaktivt: en knapp, en länk eller ett område i
en bildkarta med
href, ett formulärfält eller ett element som placerats i tangentbordets tabbordning medtabindexpå 0 eller högre. - Rapportera varje interaktivt element som har en presentationsroll.
Element som har tagits bort från tabbordningen med ett negativt tabindex
rapporteras inte, och inte heller dekorativa element som bilder eller
SVG-grafik.
Felsökning
Ett ramverk eller bibliotek lade till rollen
Vissa UI-bibliotek tillämpar role="presentation" på interna omslutande
behållare och ibland på fel element. Inspektera det rapporterade elementet:
om det verkligen går att använda med musen men tystas för hjälpmedel finns
lösningen i hur du använder biblioteket eller i bibliotekets källkod.
Den här kontrollen rapporterar inget trots att jag förväntar mig resultat
ARIA-testning kan stängas av per webbplats. Kontrollera webbplatsens avancerade inställningar.