Manglende alternativ tekst

Silktide finner bilder på sidene dine som ikke har noen alternativ tekst. Alternativ tekst er den skriftlige beskrivelsen som leses opp i stedet for et bilde, så bilder uten slik tekst er meningsløse for personer som ikke kan se dem.

<!-- Problem: ingen alt-attributt -->
<img src="apple.png">

<!-- Løst: beskrivende alt-tekst -->
<img src="apple.png" alt="Et rødt eple">

<!-- Også gyldig: eksplisitt dekorativt -->
<img src="decorative-swirl.png" alt="">

Hvorfor dette er viktig

En har ingenting å lese opp for et bilde uten – i beste fall leser den opp filnavnet, noe som sjelden hjelper og ofte er forvirrende. Personer som er blinde eller har nedsatt syn, mister informasjonen bildet formidler, og hvis bildet er en graf, en knapp eller en lenke, kan de kanskje ikke bruke siden i det hele tatt.

Alt-tekst vises også når bilder ikke lastes inn, og hjelper søkemotorer med å forstå bildene dine. Å rette dette er derfor nyttig for alle besøkende.

Slik løser du det

Legg til alternativ tekst for hvert bilde i – de fleste har et felt for dette der du setter inn et bilde. I kode bruker du alt- attributtet som vist ovenfor.
Beskriv informasjonen eller formålet med bildet, ikke utseendet. For et bilde som fungerer som en lenke eller knapp, beskriver du hvor det leder eller hva det gjør.
Hvis bildet er rent , gir du det en tom alt="", slik at skjermlesere hopper over det. Ikke finn på fylltekst – å høre «dekorativ virvelgrafikk» er verre enn å ikke høre noe.

WebAIM publiserer en grundig veiledning i hvordan du skriver alternativ tekst.

Slik tester Silktide dette

Finn hvert bilde på hver side.
Hopper over bilder som ikke trenger alternativ tekst: bilder uten kilde, bilder som er 1 piksel eller mindre (vanligvis sporingspiksler), og bilder som er skjult for skjermlesere.
Hopper over bilder som er merket som dekorative med et role="presentation"- attributt, siden disse med hensikt er skjult for .
Rapporterer hvert gjenværende bilde som ikke har noe alt-attributt.

Et bilde med en tom alt="" består denne kontrollen, men dekkes av dekorative bilder, som ber deg bekrefte at det faktisk er dekorativt. Alt-tekst som finnes, men ikke er nyttig, dekkes av svak alt-tekst.

Feilsøking

Bildet er dekorativt – hvorfor flagges det?

Et bilde behandles bare som dekorativt når dette angis i koden, gjennom en tom alt="" eller role="presentation". Et bilde som ikke har noe alt-attributt i det hele tatt, er tvetydig – hjelpeteknologi kan ikke skille mellom «dekorativt» og «glemt» – og består derfor ikke denne kontrollen. Legg til det tomme attributtet for å gjøre hensikten tydelig.

Bildet kommer fra en tredjepartstjeneste

Bilder som genereres av innebygde tjenester, for eksempel kart, kan hende du ikke kan redigere. Nettstedinnstillingene dine kan utelate tredjepartsinnhold fra denne kontrollen, eller du kan individuelle funn du ikke kan endre.