Textul alternativ și WCAG: cum descrieți imaginile, cu exemple

Fiecare imagine de pe o pagină cere o decizie: ce ar trebui să audă în schimb o persoană care nu o poate vedea? Pentru asta există textul alternativ (alt text). Cititoarele de ecran îl citesc cu voce tare, motoarele de căutare îl folosesc, iar browserele îl afișează când imaginea nu se încarcă. WCAG nu prescrie o formulare exactă, dar stabilește o cerință clară, iar W3C publică un tutorial practic despre cum o îndepliniți. Această pagină le rezumă pe amândouă, cu exemple din magazine online.

Sunt informații generale, nu consultanță juridică.

Ce cere WCAG

Cerința este 1.1.1 Conținut non-text, nivelul A: tot conținutul non-text prezentat utilizatorului are o alternativă text care servește unui scop echivalent. Există excepții. Elementele de control au nevoie de un nume care le descrie scopul; media bazată pe timp, testele, experiențele senzoriale și CAPTCHA-urile au nevoie doar de o identificare descriptivă; iar decorațiunile, formatarea sau conținutul invizibil trebuie implementate astfel încât tehnologia asistivă să le poată ignora.

Alte două criterii sunt strâns legate:

• 1.4.5 Imagini cu text (AA): folosiți text real în loc de text integrat într-o imagine, cu excepția cazului în care imaginea cu text poate fi personalizată de utilizator sau o anumită prezentare este esențială; logotipurile sunt considerate esențiale.
• 2.4.4 Scopul linkului (în context) (A): dacă o imagine este singurul conținut al unui link, textul ei alternativ este textul linkului.

Cuvântul-cheie este scopul. Documentul Understanding al W3C arată aceeași imagine a unui glob pământesc care are nevoie de „International Travel” pe un site și de „International Campuses” pe altul. Decide contextul, nu pixelii.

Arborele de decizie W3C în cinci întrebări

Arborele de decizie pentru alt al W3C întreabă, în această ordine:

1. Conține imaginea text? Dacă același text există și în apropiere ca text real sau textul este doar un efect vizual, folosiți un alt gol. Dacă este o pictogramă cu o funcție, descrieți funcția. Altfel, alt-ul include textul din imagine.
2. Este imaginea într-un link sau într-un buton și ar fi scopul acestuia neclar fără ea? Atunci alt-ul descrie destinația sau acțiunea.
3. Adaugă imaginea sens? O fotografie sau o grafică simplă primește o descriere scurtă a acelui sens; un grafic sau o diagramă are nevoie ca informația să fie și în altă parte a paginii; o imagine care repetă textul din apropiere primește un alt gol.
4. Este pur decorativă? Atunci folosiți un alt gol.
5. Niciuna dintre cele de mai sus? Arborele nu acoperă orice caz; vedeți tutorialul complet despre imagini.

Imagini informative

Fotografiile și ilustrațiile care transmit informații primesc o descriere scurtă a informației esențiale, cum spune tutorialul W3C. Într-un magazin, acestea sunt în principal fotografiile de produs.

Recomandările noastre peste WCAG: spuneți ce i-ar scăpa cuiva — culoarea, materialul, detaliul pentru care există fotografia. Nu începeți cu „imagine cu”; cititoarele de ecran anunță deja o imagine. Păstrați textul scurt și puneți specificațiile lungi în descrierea produsului, unde le poate citi toată lumea.

Imagini decorative

Texturi de fundal, separatoare, imagini de atmosferă lângă un titlu care spune deja totul: folosiți alt="" (un atribut gol) sau un fundal CSS. Alt-ul gol le spune cititoarelor de ecran să sară peste imagine. Omiterea atributului nu este același lucru: fără el, cititoarele de ecran pot citi numele fișierului sau URL-ul.

Atenție cu „decorativ”. O fotografie lifestyle pe o pagină de destinație poate fi decorativă; aceeași fotografie pe o pagină de produs, unde arată cum se folosește produsul, nu este.

Imagini funcționale: linkuri, butoane și pictograme

Când o imagine este singurul conținut al unui link sau al unui buton, textul ei alternativ numește destinația sau acțiunea, nu imaginea. Tutorialul W3C despre imaginile funcționale folosește aceste exemple:

• un logo cu link spre prima pagină: „W3C home”, nu „logo”;
• o lupă pe un buton de căutare: „Căutare”;
• o pictogramă de imprimantă: „Tipăriți această pagină”, nu „imprimantă”.

Într-un magazin, aceeași idee dă „Coș”, „Eliminați din coș”, „Fotografia următoare”, „Adăugați la favorite”. Dacă pictograma stă lângă un text vizibil care spune deja același lucru — o pictogramă de coș urmată de cuvântul „Coș” — pictograma primește un alt gol sau este ascunsă de tehnologia asistivă, ca numele să nu fie citit de două ori.

Logouri

• Logo ca singur conținut al unui link spre prima pagină: alt-ul spune unde duce linkul, de exemplu „Example Shop – prima pagină”.
• Logo lângă numele firmei scris ca text în același link: alt gol, pentru că textul îl numește deja.
• Logouri de parteneri sau de plată: alt-ul numește marca („Visa”, „Trusted Shops”), pentru că logoul transmite această informație.

Logourile sunt exceptate și de la cerința de contrast și de la 1.4.5 Imagini cu text.

Imagini cu text

Bannerele de reduceri cu procentul scris în imagine sunt cazul clasic într-un magazin. Potrivit 1.4.5, acest text ar trebui să fie, unde se poate, text HTML real peste imagine, ca să poată fi mărit, recolorat și tradus. Dacă imaginea cu text rămâne, tutorialul W3C spune că alternativa text ar trebui să conțină aceleași cuvinte ca în imagine — întregul „Reduceri de vară −30% până pe 31 august”, nu „banner”.

Imagini complexe și grupuri

• Grafice, tabele de mărimi sub formă de imagine, infografice: un alt scurt care spune ce este, plus informația completă ca text sau tabel în apropiere. W3C recomandă să oferiți datele de bază acolo unde este practic.
• Grupuri de imagini, de exemplu cele cinci stele ale unui rating: o singură alternativă pentru întregul grup („Evaluat cu 4 din 5”), celelalte imagini cu alt gol.

Ce găsește un checker automat de imagini

Verificările noastre folosesc regulile axe-core pentru alternative text într-un browser real. Ele găsesc:

• imagini fără nicio alternativă text (image-alt);
• butoane-imagine fără descriere (input-image-alt);
• elemente cu rol de imagine și grafice SVG fără alternativă text (role-img-alt, svg-img-alt) — ratinguri cu stele, pictograme, insigne;
• zone de hărți de imagine fără descriere (area-alt) și obiecte încorporate fără descriere (object-alt);
• linkuri și butoane fără nume accesibil, ceea ce înseamnă adesea o pictogramă fără etichetă;
• ca bună practică, text alternativ care repetă textul vizibil de lângă imagine (image-redundant-alt).

Ce nu poate judeca niciun instrument automat: dacă „Cămașă albastră din in” este descrierea potrivită, dacă o imagine marcată ca decorativă chiar este decorativă și dacă un banner conține text. Pentru asta e nevoie de o persoană. Citiți mai mult în biblioteca de reguli.

Cum vă verificați imaginile

1. Rulați WCAG checkerul gratuit pe o pagină de produs și pe o pagină de categorie; listează imaginile fără alternative, fiecare cu o captură de ecran.
2. Citiți textele alternative ale șabloanelor principale: produs, categorie, prima pagină, coș.
3. Porniți un cititor de ecran sau uitați-vă la arborele de accesibilitate din instrumentele pentru dezvoltatori ale browserului și ascultați o pagină de produs.
4. Reparați mai întâi șablonul, apoi imaginile: majoritatea sistemelor de magazin vă permit să setați textul alternativ al fiecărei fotografii de produs din panoul de administrare.

Verificările noastre sunt automate, nu un audit complet, și nu constituie consultanță juridică. Celelalte criterii despre imagini și culori sunt în prezentarea WCAG și în checklistul WCAG 2.2.

Întrebări frecvente

Ce spune WCAG despre textul alternativ?

Criteriul de succes 1.1.1 Conținut non-text (nivelul A) cere pentru tot conținutul non-text o alternativă text care servește unui scop echivalent. Imaginile decorative trebuie implementate astfel încât tehnologia asistivă să le poată ignora, de obicei cu un atribut alt gol.

Când trebuie textul alternativ să fie gol?

Când imaginea este pur decorativă sau când aceeași informație există deja ca text chiar lângă ea, de exemplu un logo alături de numele vizibil al firmei în același link. Folosiți alt="" — omiterea atributului este o greșeală, pentru că cititoarele de ecran pot citi în schimb numele fișierului.

Cum scriu textul alternativ pentru un buton cu pictogramă?

Descrieți acțiunea, nu imaginea: „Căutare” pentru o lupă, „Tipăriți această pagină” pentru o imprimantă, „Eliminați din coș” pentru un coș de gunoi. Tutorialul W3C despre imagini folosește primele două ca exemple.

Poate un checker de imagini să-mi spună dacă textul alternativ este bun?

Doar parțial. Verificările automate găsesc imagini, butoane-imagine, grafice SVG și zone de hărți de imagine fără nicio alternativă text, precum și texte alternative care repetă textul din apropiere. Dacă textul descrie cu adevărat imaginea poate judeca doar o persoană.

Sunt permise imaginile cu text în WCAG?

La nivelul AA, 1.4.5 Imagini cu text vă cere să folosiți text real în loc de text în imagini acolo unde tehnologia permite. Logourile sunt o excepție. Dacă folosiți o imagine cu text, textul ei alternativ ar trebui să conțină aceleași cuvinte.

Surse

• W3C, Understanding 1.4.5 Images of Text: https://www.w3.org/WAI/WCAG22/Understanding/images-of-text.html
• W3C, Understanding 1.1.1 Non-text Content: https://www.w3.org/WAI/WCAG22/Understanding/non-text-content.html
• W3C WAI, Images tutorial: https://www.w3.org/WAI/tutorials/images/
• W3C WAI, An alt decision tree: https://www.w3.org/WAI/tutorials/images/decision-tree/
• W3C WAI, Functional images: https://www.w3.org/WAI/tutorials/images/functional/
• W3C, WCAG 2.2: https://www.w3.org/TR/WCAG22/