WCAG 1.4.5 Imagini cu text

Criteriul de succes 1.4.5 asigură că textul poate fi adaptat de cei care îl citesc. Textul real poate fi mărit fără să devină neclar, recolorat cu setări de contrast ridicat, spațiat, citit cu voce tare și tradus. Textul inclus într-o imagine nu poate. Este de nivelul AA și face parte din EN 301 549 (clauza 9.1.4.5).

Ce cere criteriul

Dacă tehnologiile pe care le folosiți pot realiza prezentarea vizuală dorită, pentru transmiterea informațiilor trebuie folosit text, nu imagini cu text.

Excepții:

• Personalizabil: imaginea cu text poate fi personalizată vizual după nevoile utilizatorului (font, mărime, culoare, fundal);
• Esențial: o anumită prezentare a textului este esențială pentru informație — de exemplu o mostră de font sau un document istoric.

Logotipurile (text care face parte dintr-o siglă sau dintr-un nume de brand) sunt considerate esențiale.

Cu fonturile web și CSS-ul moderne, aproape orice aspect tipografic se poate obține cu text real, așa că excepțiile sunt restrânse.

Greșeli tipice într-un magazin online

• bannere principale și promoționale cu oferta, datele și condițiile incluse într-un JPG;
• casete de categorii în care numele categoriei este în imagine;
• tabele de mărimi, liste de ingrediente sau instrucțiuni de întreținere încărcate ca imagini;
• „Livrare gratuită peste 50 €” sau mesaje de încredere afișate ca benzi de imagini;
• butoane realizate din imagini care conțin eticheta.

Cum se verifică

Automat: nicio regulă automată din verificatorul nostru nu corespunde acestui criteriu. Un instrument nu poate spune în mod fiabil dacă o imagine conține text. Este nevoie de o verificare manuală. Verificatorul nostru raportează însă imaginile fără text alternativ la 1.1.1, ceea ce găsește adesea aceleași bannere.

Manual: măriți pagina la 200–400 %: textul din imagini devine neclar. Încercați să selectați textul cu mouse-ul: dacă nu puteți, probabil este o imagine. Parcurgeți pagina principală, paginile de categorie și de produs, precum și paginile de destinație din newslettere, și notați fiecare imagine care conține cuvinte. Pentru fiecare, decideți dacă textul real ar putea produce același aspect.

Cum se remediază

• Construiți bannerele ca imagine de fundal cu un strat de text HTML deasupra; majoritatea temelor de magazin au o secțiune „slideshow” sau „imagine cu text” pentru aceasta.
• Publicați tabelele de mărimi și ingredientele ca tabele sau liste HTML.
• Folosiți fonturi web pentru tipografia specială în locul imaginilor.
• Păstrați text în imagini doar pentru sigle și cazurile cu adevărat esențiale și oferiți-le text alternativ.

Criterii conexe

• 1.1.1 Conținut non-text — text alternativ pentru imagini.
• 1.4.3 Contrast (minim) — se aplică și imaginilor cu text.
• 1.4.4 Redimensionarea textului — textul trebuie să poată fi redimensionat la 200 %.

Întrebări frecvente

Sunt permise siglele cu text?

Da. Logotipurile — text care face parte dintr-o siglă sau dintr-un nume de brand — sunt considerate esențiale și sunt exceptate. Au totuși nevoie de text alternativ conform 1.1.1.

Este suficient textul alternativ pentru un banner cu text?

Textul alternativ îndeplinește 1.1.1, dar nu și 1.4.5. Dacă același aspect se poate obține cu text HTML și CSS, textul ar trebui să fie text real, astfel încât utilizatorii să îl poată redimensiona, recolora și traduce.

Sunt o problemă fotografiile de produs cu text imprimat?

Nu. WCAG nu consideră imagine cu text textul care face parte dintr-o imagine cu alt conținut vizual semnificativ, cum ar fi eticheta de pe o fotografie de produs. Detaliile importante ar trebui totuși să fie în descrierea produsului.