WCAG 1.4.4 Redimensionarea textului

Criteriul de succes 1.4.4 le permite persoanelor cu vedere slabă să mărească textul fără software special și să folosească în continuare site-ul. Mulți vizitatori în vârstă apasă pur și simplu Ctrl și + sau măresc cu două degete pe telefon. Este de nivelul AA și face parte din EN 301 549 (clauza 9.1.4.4).

Ce cere criteriul

Textul poate fi redimensionat fără tehnologii asistive până la 200 la sută fără pierdere de conținut sau de funcționalitate.

• Contează orice mecanism de scalare a textului pe care îl acceptă browserul, inclusiv zoomul întregii pagini; nu aveți nevoie de propriile butoane „A+”.
• La 200 %, tot textul trebuie să rămână vizibil și lizibil, iar toate funcțiile trebuie să funcționeze în continuare: fără text tăiat sau suprapus, fără butoane împinse în afara ecranului sau ascunse în spatele altor elemente.

Excepții: subtitrările și imaginile cu text (pentru imaginile cu text, vedeți 1.4.5).

Greșeli tipice într-un magazin online

• eticheta meta viewport conține user-scalable=no sau maximum-scale=1, așa că mărirea cu două degete nu funcționează pe telefoane;
• textul din butoane, insigne sau file este tăiat, deoarece containerele lor au înălțime sau lățime fixă;
• un antet fix și o bară de cookie-uri cresc atât de mult la 200 % încât acoperă cea mai mare parte a ecranului;
• meniurile derulante sau mini-coșul devin inaccesibile la mărimi mai mari;
• mărimi de font doar în unități de viewport (vw), astfel încât textul nu crește la zoom.

Cum se verifică

Automat: verificatorul nostru semnalează o etichetă meta viewport care dezactivează zoomul sau îl limitează sub 2× (regula meta viewport). Dacă se pierde conținut la 200 % depinde de așezarea paginii și necesită o verificare manuală.

Manual: într-o fereastră de browser desktop cu lățimea de aproximativ 1280 px, măriți la 200 % și parcurgeți sarcinile principale: căutare, deschiderea unui produs, alegerea opțiunilor, adăugarea în coș, finalizarea comenzii. Căutați text tăiat, suprapuneri și orice element la care nu puteți ajunge. Pe telefon, verificați că mărirea cu două degete funcționează. Zoomul doar pentru text (în Firefox, „Zoom text only”) este un test suplimentar mai strict.

Cum se remediază

• Eliminați user-scalable=no și maximum-scale din eticheta meta viewport.
• Folosiți unități relative (rem, em) pentru mărimile de font și evitați înălțimile fixe la elementele care conțin text.
• Permiteți butoanelor, etichetelor și insignelor să treacă pe două rânduri în loc să taie textul.
• Păstrați antetele fixe mici la zoom mare sau renunțați la fixarea lor pe ecranele scunde.

Criterii conexe

• 1.4.10 Reflow (readaptarea conținutului) — fără derulare orizontală la un zoom de 400 %.
• 1.4.12 Spațierea textului — interlinie și spațiere între litere mai mari fără pierderi.
• 1.4.5 Imagini cu text — textul din imagini nu se redimensionează bine.

Întrebări frecvente

Este suficient zoomul browserului pentru a îndeplini 1.4.4?

Da, zoomul paginii din browser este o modalitate acceptată de a redimensiona textul. Pagina trebuie să rămână utilizabilă la 200 %: fără text tăiat, elemente suprapuse sau butoane ascunse.

Stabilește WCAG o mărime minimă a fontului?

Nu. WCAG 2.2 nu are o mărime minimă a fontului. 1.4.4 cere ca textul să poată fi mărit la 200 %, iar 1.4.3 stabilește contrastul textului, indiferent de mărimea lui.

Este user-scalable=no o greșeală?

O etichetă meta viewport care dezactivează sau limitează zoomul (user-scalable=no sau un maximum-scale mic) îi împiedică pe utilizatorii de telefoane mobile să mărească textul și este raportată la acest criteriu.

Cum verific WCAG 1.4.4?

Setați browserul la o fereastră cu lățimea de 1280 px, măriți la 200 % și parcurgeți paginile și sarcinile principale. Totul trebuie să rămână lizibil și să funcționeze.