Kontroll uten tekst, bare ikon

Silktide ser etter knapper og lenker som bare er merket med et ikon – for eksempel et kryss for å lukke, en hamburgermeny eller et forstørrelsesglass for søk – uten et tekstnavn som kan brukes av personer som ikke kan se ikonet.

<!-- Problem: ingenting forteller hva denne knappen gjør -->
<button><svg>…</svg></button>

<!-- Løsning: gi kontrollen et navn -->
<button aria-label="Open menu"><svg>…</svg></button>

Hvorfor dette er viktig

Seende brukere forstår hva en ikonknapp gjør ut fra formen og sammenhengen. Brukere av har ingen tilsvarende reserve: uten et kunngjør programvaren deres en knapp eller lenke uten navn, eller leser opp kode som er blitt liggende igjen, for eksempel CSS-klassen til et ikon. Hver kontroll uten tekst og uten navn er en kontroll disse brukerne må aktivere i blinde eller hoppe helt over – og dette er ofte de viktigste kontrollene på siden: menyer, søk, lukk og neste.

Slik løser du det

Legg til en -etikett som beskriver hva kontrollen gjør, ikke hvordan ikonet ser ut: aria-label="Search", ikke aria-label="Magnifying glass".
Hvis den samme ordlyden allerede finnes som synlig tekst i nærheten, kan du peke på den med aria-labelledby i stedet for å gjenta den.
Hvis ikonet er et <img>, kan du også gi kontrollen et navn ved å gi bildet meningsfull alternativ tekst i alt.
Hvis kontrollen ikke gjør noe nyttig og bare finnes som dekorasjon, bør du gjøre den ikke-interaktiv i stedet for å gi den et navn.

Slik tester Silktide dette

Finn de synlige knappene, lenkene og kontrollene for å vise eller skjule innhold på hver side, inkludert elementer med role="button" eller role="link".
Hopp over alle kontroller som allerede har et navn: synlig tekst på 2 eller flere tegn, en aria-label, en aria-labelledby eller et title-attributt.
Kontroller om de gjenværende kontrollene inneholder et ikon: en innebygd SVG, et bilde med tom alternativ tekst i alt, eller tekst som er gjengitt i en gjenkjent ikonfont.
Rapporter kontroller som viser et ikon, men ikke har noe navn.

Feilsøking

Kontrollen er merket på en annen måte

Silktide tar hensyn til aria-label, aria-labelledby, title, synlig tekst og alternativ tekst i alt for bilder. Hvis kontrollen har fått navn gjennom en mekanisme som ikke er blant disse – noe som er sjeldent – bør du kontrollere med en skjermleser at navnet faktisk blir kunngjort, og funnene hvis det er tilfelle.

Ikonet er dekorativt og står ved siden av tekst

Kontroller med meningsfull synlig tekst rapporteres ikke, selv når et ikon står ved siden av teksten. Hvis en kontroll ble rapportert, nådde ikke teksten 2 meningsfulle tegn – tekst med ett enkelt tegn, for eksempel «×», teller ikke som en etikett.