Presentasjonsrolle på interaktivt element

Silktide kontrollerer interaktive elementer, for eksempel knapper, lenker og skjemafelt, som er merket som rent dekorative. Når et interaktivt element merkes på denne måten, fjernes betydningen for hjelpeteknologi, samtidig som elementet fortsatt er klikkbart på skjermen.

<!-- Problem: knappen fungerer fortsatt, men kunngjøres som ingenting -->
<button role="presentation">Delete</button>

<!-- Løsning: fjern rollen -->
<button>Delete</button>

Hvorfor dette er viktig

-rollene presentation og none forteller at et element ikke har noen betydning – de finnes for å fjerne semantikk fra ting som layouttabeller. Når de brukes på et interaktivt element, skaper de den verste typen barriere: en kontroll som seende musebrukere klikker på hver dag, men som en presenterer som inaktivt innhold eller hopper over fullstendig. Brukeren har ingen måte å vite at en knapp i det hele tatt finnes.

Slik løser du det

Fjern role="presentation" eller role="none" fra det interaktive elementet. Native elementer eksponerer allerede riktig betydning uten noen rolle.
Hvis elementet faktisk ikke skal være interaktivt, gjør det slik: bytt det ut med et ikke-interaktivt element, for eksempel <div>, og fjern eventuell tabindex.
Hvis du forsøkte å undertrykke betydningen til en omsluttende beholder (for eksempel en layouttabell rundt kontroller), plasser rollen på beholderen, ikke på kontrollene inni den.

Slik tester Silktide dette

Finn alle elementer på siden med role="presentation" eller role="none".
Finn ut om elementet er interaktivt: en knapp, en lenke eller et område i et bildekart med en href, et skjemafelt eller et element som er plassert i tastaturnavigasjonen med tabindex på 0 eller høyere.
Rapporter hvert interaktivt element som har en presentasjonsrolle.

Elementer som er tatt ut av tastaturnavigasjonen med en negativ tabindex, rapporteres ikke, og det gjør heller ikke dekorative elementer som bilder eller SVG-grafikk.

Feilsøking

Et rammeverk eller bibliotek la til rollen

Noen UI-biblioteker bruker role="presentation" på interne beholdere, og av og til på feil element. Inspiser det rapporterte elementet: Hvis det faktisk kan betjenes med mus, men er gjort taus for hjelpeteknologi, ligger løsningen i hvordan du bruker biblioteket, eller oppstrøms i biblioteket.

Denne kontrollen rapporterer ingenting selv om jeg forventer funn

ARIA-testing kan slås av for hvert nettsted. Sjekk de avanserte innstillingene for nettstedet.