Manglende alt-tekst

Silktide finder billeder på dine sider, som slet ikke har nogen alternativ tekst. Alternativ tekst er den skrevne beskrivelse, der læses højt i stedet for et billede, så billeder uden den er meningsløse for personer, der ikke kan se dem.

<!-- Problem: intet alt-attribut -->
<img src="apple.png">

<!-- Rettet: beskrivende alt-tekst -->
<img src="apple.png" alt="Et rødt æble">

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

Hvorfor det er vigtigt

En har intet at meddele for et billede uden – i bedste fald læser den filnavnet højt, hvilket sjældent er nyttigt og ofte forvirrende. Personer, der er blinde eller har nedsat syn, mister det, som billedet formidler, og hvis billedet er et diagram, en knap eller et link, kan de muligvis slet ikke bruge siden.

Alt-tekst vises også, når billeder ikke indlæses, og hjælper søgemaskiner med at forstå dine billeder, så en rettelse gavner alle besøgende.

Sådan retter du det

Tilføj alternativ tekst til hvert billede i dit – de fleste har et felt til det, hvor du indsætter et billede. I kode skal du bruge attributten alt som vist ovenfor.
Beskriv billedets information eller formål, ikke dets udseende. For et billede, der fungerer som et link eller en knap, skal du beskrive, hvor det fører hen, eller hvad det gør.
Hvis billedet kun er , skal du give det en tom alt="", så skærmlæsere springer det over. Opfind ikke fyldtekst – at høre "dekorativ spiral-grafik" er værre end ikke at høre noget.

WebAIM udgiver en grundig vejledning i at skrive alternativ tekst.

Sådan tester Silktide dette

Find hvert billede på hver side.
Spring billeder over, der ikke behøver alternativ tekst: billeder uden kilde, billeder på 1 pixel eller mindre (som regel sporingspixels) og billeder, der er skjult for skærmlæsere.
Spring billeder over, der er markeret som dekorative med attributten role="presentation", da disse med vilje er skjult for .
Rapportér hvert resterende billede, der slet ikke har nogen alt-attribut.

Et billede med en tom alt="" består dette tjek, men behandles af Dekorative billeder, som beder dig bekræfte, at det er reelt dekorativt. Alt-tekst, der findes, men ikke er nyttig, behandles af Utilstrækkelig alt-tekst.

Fejlfinding

Billedet er dekorativt, så hvorfor er det markeret?

Et billede behandles kun som dekorativt, når det angiver det i koden, via en tom alt="" eller role="presentation". Et billede uden nogen alt-attribut er utvetydigt – hjælpeteknologi kan ikke skelne mellem "dekorativt" og "glemt" – så det består ikke dette tjek. Tilføj den tomme attribut for at gøre hensigten tydelig.

Billedet kommer fra en tredjepartstjeneste

Billeder, der genereres af indlejrede tjenester såsom kort, kan muligvis ikke redigeres af dig. Dine websiteindstillinger kan udelukke tredjepartsindhold fra dette tjek, eller du kan individuelle fund, som du ikke kan ændre.