Kontroll med endast ikon

Silktide letar efter knappar och länkar som endast är märkta med en ikon – till exempel ett kryss för att stänga, en hamburgermeny eller ett förstoringsglas för sökning – utan ett textnamn för personer som inte kan se ikonen.

<!-- Problem: inget meddelar vad den här knappen gör -->
<button><svg>…</svg></button>

<!-- Åtgärd: namnge kontrollen -->
<button aria-label="Öppna meny"><svg>…</svg></button>

Varför detta är viktigt

Seende användare förstår vad en ikonknapp gör utifrån dess form och sammanhang. Användare av har ingen motsvarande reservlösning: utan ett meddelar deras programvara en namnlös ”knapp” eller ”länk”, eller läser upp kvarvarande kod, som ikonens CSS-klassnamn. Varje kontroll med endast en ikon och utan namn är en kontroll som dessa användare måste aktivera blint eller hoppa över helt – och detta är ofta de viktigaste kontrollerna på sidan: menyer, sökning, stängning, nästa.

Så åtgärdar du det

Lägg till en -etikett som beskriver vad kontrollen gör, inte hur ikonen ser ut: aria-label="Search", inte aria-label="Magnifying glass".
Om samma formulering redan finns som synlig text i närheten, hänvisa till den med aria-labelledby i stället för att duplicera den.
Om ikonen är en <img> namnges kontrollen också om du ger den meningsfull alt-text.
Om kontrollen inte gör någon nytta och endast finns som dekoration, gör den icke-interaktiv i stället för att namnge den.

Så testar Silktide detta

Hitta de synliga knapparna, länkarna och expanderingskontrollerna på varje sida, inklusive element med role="button" eller role="link".
Hoppa över alla kontroller som redan har ett namn: synlig text med minst två tecken, ett aria-label, ett aria-labelledby eller ett title-attribut.
Kontrollera om de återstående kontrollerna innehåller en ikon: en infogad SVG, en bild med tom alt-text eller text som återges med ett identifierat ikonfont.
Rapportera kontroller som visar en ikon men saknar namn.

Felsökning

Kontrollen är märkt på något annat sätt

Silktide tar hänsyn till aria-label, aria-labelledby, title, synlig text och bilders alt-text. Om kontrollen namnges genom en mekanism utanför dessa – vilket är ovanligt – verifierar du med en skärmläsare att namnet faktiskt meddelas och resultatet om så är fallet.

Ikonen är dekorativ och står bredvid text

Kontroller med meningsfull synlig text rapporteras inte, även när en ikon står bredvid texten. Om en kontroll rapporterades nådde texten inte upp till två meningsfulla tecken – text med ett enda tecken, som ”×”, räknas inte som en etikett.