Cum scrii un text alternativ bun pentru imagini
Textul alternativ descrie o imagine pentru persoanele care nu o pot vedea. Unul bun este scurt, spune ce rol are imaginea pe pagină și rămâne gol atunci când imaginea este doar decor.
La ce folosește textul alternativ
Textul alternativ este alternativa text a unei imagini, scrisă în atributul alt. Cititoarele de ecran îl citesc cu voce tare, afișajele braille îl arată, iar browserul îl afișează când imaginea nu se încarcă. Îl pot folosi și motoarele de căutare. Standardul web pentru accesibilitate, WCAG, cere o alternativă text care îndeplinește același rol ca imaginea (criteriul de succes 1.1.1, nivel A).
Ideea de bază: textul alternativ nu este o legendă și nici o descriere a imaginii de dragul ei. El spune ce adaugă imaginea paginii. Aceeași fotografie poate avea nevoie de texte alternative diferite pe două pagini sau de niciunul.
Patru tipuri de imagini
- Imaginile informative adaugă sens: o fotografie, o pictogramă lângă un număr de telefon, o diagramă. Scrie un text alternativ scurt care transmite acel sens.
- Imaginile funcționale se află în linkuri și butoane. Textul alternativ numește acțiunea sau ținta, nu imaginea: „Caută” pentru o lupă, „Tipărește această pagină” pentru o pictogramă de imprimantă.
- Imaginile decorative nu adaugă nimic: un chenar, un spațiu de umplutură, un ornament sau o imagine care doar repetă textul de lângă ea. Dă-le un atribut alt gol (alt=""), ca cititoarele de ecran să le sară, sau pune-le în foaia de stil ca fundal.
- Imaginile cu text sunt o ultimă soluție. Dacă ai nevoie de una, textul alternativ repetă cuvintele din imagine. Un logo care nu este link primește numele organizației.
Cum scrii un text alternativ bun
- 1Întreabă-te de ce este imaginea pe pagină. Ce i-ar lipsi unui vizitator dacă ea nu ar fi acolo?
- 2Scrie ce contează pentru acel scop, într-o expresie sau într-o propoziție.
- 3Începe cu conținutul. Un cititor de ecran anunță de obicei că este vorba de o imagine, așa că „imagine cu” sau „fotografie cu” ajută rareori.
- 4Nu repeta ce spune deja textul de lângă imagine. Dacă spune tot, imaginea este decorativă și primește un alt gol.
- 5Citește textul alternativ cu voce tare fără să te uiți la pagină. Are sens singur?
Greșeli frecvente
- Niciun atribut alt. Unele cititoare de ecran citesc atunci numele fișierului.
- Un nume de fișier sau un cod ca text alternativ, de exemplu „IMG_2041.jpg”.
- Același șir de cuvinte-cheie pe multe imagini. Textul alternativ este în primul rând pentru oameni.
- O descriere lungă a unei imagini pur decorative.
- Descrierea aspectului unei imagini-buton în locul acțiunii ei. Un buton de căutare nu este „lupă”, ci „Caută”.
Cât de lung ar trebui să fie?
WCAG 1.1.1 nu indică un număr de caractere. Sfatul W3C este să fie scurt, ideal o expresie sau o propoziție. Pentru grafice și alte imagini complexe, dă informația completă ca text pe pagină și păstrează scurt textul alternativ. Dacă ai nevoie de mai mult de o propoziție, imaginea conține probabil un conținut care își are locul în textul paginii.
Verifică-ți site-ul
Ca să găsești imaginile fără un text alternativ util, rulează pe o pagină verificatorul gratuit de texte alternative. Ca să primești propuneri pentru multe imagini, folosește instrumentul Texte alternative. O propunere automată poate rata ce contează pe pagina ta, așa că citește fiecare text și schimbă-l când nu se potrivește scopului imaginii.
Instrumentele Do4U te ajută la scris, nu la decizie: dacă o imagine este informativă, funcțională sau decorativă știi tu cel mai bine. Verifică din nou după schimbări mari pe site.
Surse
- W3C: Understanding 1.1.1 Non-text Content (în limba engleză) (www.w3.org)
- W3C WAI: tutorial despre imagini, arbore de decizie (în limba engleză) (www.w3.org)
- W3C WAI: imagini informative (în limba engleză) (www.w3.org)
- W3C WAI: imagini decorative (în limba engleză) (www.w3.org)
- W3C WAI: imagini funcționale (în limba engleză) (www.w3.org)
- W3C WAI: imagini cu text (în limba engleză) (www.w3.org)