TL;DR
- Det samme billede kan være informativt ét sted og overflødigt et andet.
- Tom alt-tekst og manglende alt-attribut er ikke det samme.
- En ikonknap skal have et navn for handlingen; ikonet behøver ikke sit eget navn.
Begynd med funktionen
Spørg ikke først “Hvad forestiller billedet?”, men “Hvilken information eller handling skal billedet bidrage med her?”.
På en produktside kan form, farve og materialets udseende hjælpe med at vælge en vare. I en ordrebekræftelse kan det samme lille billede blot gentage varen, som allerede er identificeret i teksten. Et produktfoto er altså ikke automatisk dekorativt, fordi produktnavnet står ved siden af.
Gennemgå de fire fokuspunkter, og begrund valget:
- Produktbilledet: Hvilken relevant information ville mangle uden billedet?
- Logoet ved siden af brandnavnet: Tilfører det information, eller gentager det teksten?
- Ikonet i den navngivne knap: Gør det navnet tydeligere eller blot længere?
- Ikonknappen uden tekst: Hvad er handlingen, og hvor skal knappens navn komme fra?
Der er ikke én perfekt formulering til alle kontekster.
Tom alt eller skjult ikon
Når et img kun gentager information eller er dekorativt, angives det
eksplicit:
<img src="brand-mark.svg" alt=""><span>NOVA</span>Udeladt alt fortæller ikke det samme; browser og hjælpemiddel kan i
stedet forsøge at identificere billedet på andre måder.
Et dekorativt inline SVG inde i en allerede navngivet knap kan skjules:
<button type="button"> <svg aria-hidden="true" viewBox="0 0 24 24"> <!-- Dekorativt ikon --> </svg> Læg i kurv</button>Et inline SVG får ikke et tekstalternativ via alt, som et img gør.
Navngiv handlingen, ikke formen
Hvis knappen kun viser et hjerte, skal dens navn beskrive formålet,
fx “Favorit, Nova Runner”, ikke “Hjerteikon”. Brug synlig tekst, visuelt
skjult tekst eller en passende aria-label på knappen.
At et produkt er valgt som favorit, er en separat tilstand. Den skal også formidles og opdateres; se States og statusfeedback.
Kontrollér billedernes eksponering i Chrome og knappens beregnede navn. At inspektionsværktøjet kan udpege et SVG, betyder ikke i sig selv, at en skærmlæser bør læse det op.