Præsentationsrolle på interaktivt element

Silktide tjekker for interaktive elementer, såsom knapper, links og formularfelter, der er markeret som rent dekorative. Når et interaktivt element markeres på denne måde, mister det sin betydning for hjælpeteknologi, samtidig med at det forbliver klikbart på skærmen.

<!-- Problem: Knappen virker stadig, men annonceres som ingenting -->
<button role="presentation">Slet</button>

<!-- Løsning: Fjern rollen -->
<button>Slet</button>

Hvorfor det er vigtigt

ARIA-rollerne presentation og none fortæller , at et element ikke har nogen betydning – de findes for at fjerne semantik fra ting som layouttabeller. Når de anvendes på et interaktivt element, skaber de den værst tænkelige barriere: Et kontrolelement, som seende musebrugere klikker på hver dag, men som en præsenterer som inaktivt indhold eller helt springer over. Brugeren har ingen mulighed for at vide, at knappen overhovedet er der.

Sådan løser du det

Fjern role="presentation" eller role="none" fra det interaktive element. Native elementer angiver allerede den korrekte betydning uden nogen rolle.
Hvis elementet reelt ikke skal være interaktivt, så gør det ikke-interaktivt: Erstat det med et ikke-interaktivt element såsom <div>, og fjern eventuelle tabindex.
Hvis du forsøgte at undertrykke betydningen af en wrapper (for eksempel en layouttabel omkring kontrolelementer), skal du sætte rollen på wrapperen, ikke på kontrolelementerne indeni.

Sådan tester Silktide dette

Find alle elementer på siden med role="presentation" eller role="none".
Afgør, om elementet er interaktivt: en knap, et link eller et område på et billedkort med en href, et formularfelt eller ethvert element, der er placeret i tastaturets tabulatorrækkefølge med tabindex på 0 eller højere.
Rapportér hvert interaktivt element med en præsentationsrolle.

Elementer, der er fjernet fra tabulatorrækkefølgen med en negativ tabindex, rapporteres ikke, og det gør dekorative elementer såsom billeder eller SVG-grafik heller ikke.

Fejlfinding

Et framework eller bibliotek tilføjede rollen

Nogle UI-biblioteker anvender role="presentation" på interne wrappers og indimellem på det forkerte element. Undersøg det rapporterede element: Hvis det reelt kan betjenes med mus, men er gjort tavst for hjælpeteknologi, skal løsningen findes i din brug af biblioteket eller opstrøms.

Dette tjek rapporterer intet, selvom jeg forventer fund

ARIA-test kan slås fra for hvert website. Kontrollér de avancerede indstillinger for websitet.