Kontrolelement kun med ikon

Silktide leder efter knapper og links, der kun er mærket med et ikon – f.eks. et luk-kryds, en hamburgermenu eller et søgeforstørrelsesglas – uden et tilknyttet tekstnavn til personer, der ikke kan se ikonet.

<!-- Problem: intet angiver, hvad denne knap gør -->
<button><svg>…</svg></button>

<!-- Løsning: giv kontrolelementet et navn -->
<button aria-label="Åbn menu"><svg>…</svg></button>

Hvorfor dette er vigtigt

Seende brugere kan udlede, hvad en ikonknap gør, ud fra dens form og kontekst. Brugere af har ikke en tilsvarende reserve: Uden et angiver deres software en unavngiven "knap" eller et unavngivet "link" eller læser resterende kode op, f.eks. et ikons CSS-klassenavn. Ethvert kontrolelement kun med ikon uden et navn er et kontrolelement, som disse brugere skal aktivere i blinde eller helt springe over – og det er ofte de vigtigste kontrolelementer på siden: menuer, søgning, luk, næste.

Sådan løser du det

Tilføj en -etiket, der beskriver, hvad kontrolelementet gør, ikke hvordan ikonet ser ud: aria-label="Søg", ikke aria-label="Forstørrelsesglas".
Hvis den samme ordlyd allerede findes som synlig tekst i nærheden, skal du pege på den med aria-labelledby i stedet for at duplikere den.
Hvis ikonet er et <img>, giver en meningsfuld alt-tekst også kontrolelementet et navn.
Hvis kontrolelementet ikke gør noget nyttigt og kun findes som dekoration, skal du gøre det ikke-interaktivt i stedet for at navngive det.

Sådan tester Silktide dette

Find de synlige knapper, links og kontrolelementer til udvidelse/skjul på hver side, herunder elementer med role="button" eller role="link".
Spring ethvert kontrolelement over, der allerede har et navn: synlig tekst på 2 eller flere tegn, en aria-label, en aria-labelledby eller en title-attribut.
Tjek, om de resterende kontrolelementer indeholder et ikon: en indlejret SVG, et billede med tom alt-tekst eller tekst, der vises med en genkendt ikonfont.
Rapportér kontrolelementer, der viser et ikon, men ikke har et navn.

Fejlfinding

Kontrolelementet er mærket på en anden måde

Silktide accepterer aria-label, aria-labelledby, title, synlig tekst og billeders alt-tekst. Hvis dit kontrolelement er navngivet via en mekanisme uden for disse – hvilket er sjældent – skal du med en skærmlæser bekræfte, at navnet faktisk angives, og fundet, hvis det gør.

Ikonet er dekorativt og står ved siden af tekst

Kontrolelementer med meningsfuld synlig tekst rapporteres ikke, selv når et ikon står sammen med teksten. Hvis et kontrolelement blev rapporteret, nåede dets tekst ikke op på 2 meningsfulde tegn – tekst med ét enkelt glyf, f.eks. "×", tæller ikke som en etiket.