Dimensiunea fontului în WCAG: ce cere ghidul și ce nu cere

Mulți caută „dimensiunea minimă a fontului WCAG”, pentru că pare firesc să existe una. Nu există o dimensiune minimă a fontului în WCAG 2.0, 2.1 sau 2.2. Niciun criteriu de succes nu spune „textul principal trebuie să aibă cel puțin 16 pixeli”. Ce cere WCAG este ca oamenii să poată mări textul, ca macheta să reziste la asta și ca textul mic să aibă contrast suficient. Această pagină explică cele patru criterii care contează și, separat și clar marcat, recomandările pe care le dăm în plus.

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

Răspunsul scurt

1.4.4 Redimensionarea textului: 200 % fără pierderi

Textul, cu excepția subtitrărilor și a imaginilor cu text, poate fi mărit până la 200 % fără tehnologii asistive și fără pierderi de conținut sau funcționalitate. În practică, testați cu zoom-ul browserului (Ctrl/Cmd și +) sau cu setarea de dimensiune a textului din browser:

• niciun text nu este tăiat și nu se suprapune peste alt text;
• butoanele, meniurile și câmpurile de formular funcționează în continuare;
• nimic important nu dispare în spatele unui antet fix.

Erori tipice: text în casete cu înălțime fixă, font-size blocat doar cu unități vw și un maximum-scale=1 sau user-scalable=no în meta tagul viewport, care împiedică mărirea pe telefon.

1.4.10 Reflow: 320 pixeli CSS

Conținutul trebuie să poată fi citit la o lățime de 320 pixeli CSS — la fel ca un zoom de 400 % într-o fereastră de 1280 de pixeli — fără derulare în două direcții. Textul lung trebuie să se rupă pe rânduri; pentru a citi un rând nu trebuie să fie nevoie de derulare orizontală. Există excepții pentru conținutul care are nevoie de o machetă bidimensională, precum hărțile, tabelele de date și diagramele complexe.

1.4.12 Spațierea textului

Persoanele cu vedere slabă sau cu dislexie înlocuiesc adesea spațierea cu o extensie de browser sau cu o foaie de stil proprie. WCAG cere să nu se piardă nimic atunci când setează:

• înălțimea rândului la cel puțin 1,5 ori dimensiunea fontului;
• spațiul după paragrafe la cel puțin 2 ori dimensiunea fontului;
• spațierea literelor la cel puțin 0,12 ori dimensiunea fontului;
• spațierea cuvintelor la cel puțin 0,16 ori dimensiunea fontului.

Nu trebuie să folosiți aceste valori în design. Designul trebuie doar să funcționeze în continuare când cineva le aplică. Erorile obișnuite sunt înălțimile fixe ale butoanelor și cardurilor și textul tăiat cu overflow: hidden.

1.4.3 și definiția textului mare

Singurul loc în care apare o dimensiune a fontului într-un criteriu de nivel AA este definiția textului de dimensiune mare, folosită de regula de contrast:

• Text mare: cel puțin 18 puncte (24 pixeli CSS) la grosime normală sau cel puțin 14 puncte aldin (aprox. 18,66 pixeli CSS).
• Textul mare are nevoie de un raport de contrast de cel puțin 3:1; orice alt text are nevoie de 4,5:1.
• La nivelul AAA (1.4.6), valorile sunt 7:1 și 4,5:1.

Dimensiunea schimbă deci contrastul de care aveți nevoie, nu dacă textul este permis. O etichetă de preț gri, subțire, de 13px este eroarea clasică dintr-un magazin: mică, deschisă la culoare și cu contrast scăzut în același timp. Testați perechile de culori cu verificarea contrastului.

Criterii înrudite

• 1.4.5 Imagini cu text (AA): folosiți text real în locul textului inclus în imagini, ca să poată fi mărit, recolorat și citit cu voce tare. Bannerele cu textul reducerii în imagine sunt o eroare frecventă.
• 1.4.8 Prezentare vizuală (AAA): cere, printre altele, blocuri de text de cel mult 80 de caractere lățime și text care poate fi mărit la 200 % fără derulare orizontală. Este AAA și nu este cerut de legi, dar este util ca orientare pentru textele lungi.
• 2.5.8 Dimensiunea țintei (AA): nu se referă la text, dar linkurile text mici dintr-un meniu nu trec adesea nici cerința de țintă de 24 pe 24 de pixeli.

Text aliniat stânga-dreapta, centrat și aldin, fonturi și lungimea rândului

Aceste întrebări apar des. Majoritatea răspunsurilor se află într-un singur criteriu de nivel AAA, 1.4.8 Prezentare vizuală. AAA nu este cerut de legi și nici de o declarație de conformitate la nivelul AA, așa că tratați tot ce urmează din 1.4.8 drept recomandare.

Text aliniat stânga-dreapta (justified)

1.4.8 cere să existe un mecanism prin care blocurile de text să nu fie aliniate stânga-dreapta (aliniate atât la marginea din stânga, cât și la cea din dreapta). W3C explică de ce: alinierea stânga-dreapta întinde inegal spațiile dintre cuvinte și poate crea „râuri de alb” care curg în josul paginii, ceea ce face lectura grea, iar uneori imposibilă, pentru unele persoane cu dizabilități cognitive. La nivelul AA, textul aliniat stânga-dreapta nu este o eroare. Recomandarea noastră: aliniați textul principal la stânga (sau la dreapta în limbile scrise de la dreapta la stânga), mai ales pe ecranele înguste, unde alinierea stânga-dreapta produce cele mai mari goluri.

Lungimea rândului

1.4.8 cere și ca lățimea blocurilor de text să poată fi limitată la cel mult 80 de caractere sau glife (40 pentru chineză, japoneză și coreeană). Același criteriu cere o interlinie de cel puțin un rând și jumătate în paragrafe, o spațiere între paragrafe de cel puțin 1,5 ori mai mare decât interlinia, culori ale textului și fundalului alese de utilizator și text care poate fi mărit la 200 % fără derulare orizontală într-o fereastră pe tot ecranul. Mecanismul poate fi oferit de browser; pagina nu trebuie să își construiască propriile controale.

Text centrat

Niciun criteriu WCAG nu menționează textul centrat. Recomandarea noastră: centrați dacă doriți titlurile scurte și butoanele, dar păstrați paragrafele, listele și etichetele formularelor aliniate la stânga. Un text lung centrat are marginea din stânga neregulată, așa că cititorii trebuie să caute începutul fiecărui rând, ceea ce este mai greu la zoom de 200 % și pentru persoanele cu dislexie.

Text aldin

Aldinul apare în WCAG în două locuri:

• Text mare: 14 puncte aldin (aproximativ 18,66 pixeli CSS) contează deja ca text mare și are nevoie la nivelul AA doar de un contrast de 3:1 în loc de 4,5:1 (1.4.3).
• Semnificație: dacă aldinul sau alt stil de text transmite o semnificație — „câmpurile cu aldin sunt obligatorii”, un cuvânt îngroșat care marchează un avertisment — acea semnificație trebuie să fie disponibilă și în marcaj sau în text. W3C enumeră folosirea schimbărilor de prezentare a textului pentru a transmite informații fără marcajul sau textul potrivit drept eroarea F2 pentru 1.3.1 Informații și relații. Folosiți <strong> sau <em> pentru accentuare și scrieți „obligatoriu” în cuvinte.

WCAG nu limitează cât aldin folosiți. Pasajele lungi cu aldin se parcurg mai greu; păstrați-l pentru accentuare.

Dimensiunea textului „normal”

WCAG nu definește „textul normal”. Definește textul de dimensiune mare, iar tot ce este mai mic este ceea ce instrumentele de verificare numesc text normal: orice sub 18 puncte (24 pixeli CSS) la grosime normală sau sub 14 puncte aldin. Textul normal are nevoie la nivelul AA de un raport de contrast de cel puțin 4,5:1, textul mare de 3:1. Nici pentru textul normal nu există o dimensiune minimă; vedeți tabelul de la începutul paginii.

Fonturi și verificatoare de fonturi

WCAG nu numește și nu interzice niciun font și nu stabilește nicio cerință privind familia de fonturi. Contează ca fontul să funcționeze cu criteriile de mai sus: să poată fi mărit la 200 %, să funcționeze în continuare când spațierea este mărită (1.4.12) și să aibă contrast suficient la grosimea sa — fonturile subțiri pot părea mai șterse decât sugerează culoarea lor, lucru pe care W3C îl notează în Understanding 1.4.3. Recomandarea noastră: alegeți o familie cu caractere clar diferite (I, l și 1; O și 0), o grosime normală care nu este extrem de subțire și suport complet pentru limbile site-ului dumneavoastră.

Un „WCAG font checker” nu poate aproba un font, pentru că nu există o listă de fonturi permise. Ce poate face o verificare automată — și ce face WCAG checker-ul nostru — este să testeze contrastul fiecărui text după regula textului mare și să semnaleze un viewport care blochează zoom-ul. Lungimea rândului, alinierea stânga-dreapta și comportamentul textului la 200 % trebuie verificate de o persoană.

Recomandări, nu cerințe

Valorile următoare sunt recomandările noastre pentru site-uri de magazine și servicii ușor de citit. Nu sunt cerințe WCAG, iar o pagină nu încalcă WCAG dacă folosește alte valori.

• Text principal de aproximativ 16 px. Este dimensiunea implicită a textului în browserele uzuale. Un text principal mult mai mic pune mai multă presiune pe zoom-ul de 200 %.
• Folosiți unități relative (rem, em) pentru dimensiunea fontului și înălțimea rândului, ca să fie respectată dimensiunea textului setată de oameni în browser.
• Înălțimea rândului de 1,4–1,6 pentru textul principal și o lungime a rândului de aproximativ 50–80 de caractere.
• Evitați înălțimile fixe pentru elementele care conțin text; lăsați-le să crească.
• Nu blocați zoom-ul în meta tagul viewport.
• Atenție la textul mărunt. Notele juridice, prețurile pe unitate și indicațiile din formulare sunt citite de toată lumea, așa că dați-le același contrast ca textului principal.

Cum verificați problemele de font și zoom

1. Verificare automată. WCAG checker-ul nostru gratuit găsește contrastul scăzut, inclusiv după regula textului mare, și un viewport care blochează zoom-ul. Nu poate aprecia dacă o machetă mărită mai funcționează.
2. Zoom la 200 %. Folosiți zoom-ul browserului și parcurgeți pagina principală, pagina de produs, coșul și comanda.
3. Fereastră îngustă sau zoom la 400 %. Verificați că textul se rupe pe rânduri și nimic nu cere derulare orizontală.
4. Spațierea textului. Aplicați valorile din 1.4.12 cu un bookmarklet sau cu instrumentul de spațiere a textului din extensia noastră de browser și căutați text tăiat.

Rutina completă este în cum se testează WCAG. Verificările noastre sunt o verificare automată, nu un audit complet, și nu constituie consultanță juridică.

Întrebări frecvente

Care este dimensiunea minimă a fontului în WCAG?

Nu există. Niciun criteriu de succes din WCAG 2.0, 2.1 sau 2.2 nu fixează o dimensiune minimă a fontului. În schimb, WCAG cere ca textul să poată fi mărit la 200 % (1.4.4), să se reașeze pe un ecran îngust (1.4.10), să reziste la o spațiere mai mare (1.4.12) și să aibă contrast suficient (1.4.3).

Ce dimensiune a fontului înseamnă text mare în WCAG?

Cel puțin 18 puncte, adică 24 pixeli CSS, la grosime normală, sau cel puțin 14 puncte aldin, aproximativ 18,66 pixeli CSS. Textul mare are nevoie la nivelul AA de un raport de contrast de 3:1 în loc de 4,5:1.

Cere WCAG 16px?

Nu. 16 pixeli este dimensiunea implicită a textului în browserele uzuale și o recomandare rezonabilă pentru textul principal, dar WCAG nu o cere. Un text de 16px care nu poate fi mărit nu trece, un text mai mic care se mărește bine poate trece.

Ce nivel de zoom cere WCAG?

Textul trebuie să poată fi mărit până la 200 % fără pierderi de conținut sau funcționalitate (1.4.4). Conținutul trebuie și să se reașeze la o lățime de 320 pixeli CSS, echivalentul unui zoom de 400 % într-o fereastră de 1280 de pixeli, fără derulare în două direcții (1.4.10).

Ce unități folosesc pentru font: px, em sau rem?

WCAG nu prescrie unități. Unitățile relative, precum rem și em, fac mai ușoară respectarea dimensiunii textului setate de oameni în browser, de aceea le recomandăm, dar px nu este în sine o eroare.

Permite WCAG textul aliniat stânga-dreapta (justified)?

La nivelul AA, da. Doar criteriul AAA 1.4.8 Prezentare vizuală cere să existe un mecanism prin care blocurile de text să nu fie aliniate stânga-dreapta, pentru că spațierea inegală dintre cuvinte creează „râuri” de spațiu alb. AAA este o recomandare, nu o cerință legală.

Surse

• W3C, WCAG 2.2 (1.4.3, 1.4.4, 1.4.10, 1.4.12 și definiția textului de dimensiune mare): https://www.w3.org/TR/WCAG22/
• W3C, Understanding 1.4.4 Resize Text: https://www.w3.org/WAI/WCAG22/Understanding/resize-text.html
• W3C, Understanding 1.4.10 Reflow: https://www.w3.org/WAI/WCAG22/Understanding/reflow.html
• W3C, Understanding 1.4.8 Visual Presentation: https://www.w3.org/WAI/WCAG22/Understanding/visual-presentation.html
• W3C, Understanding 1.3.1 Info and Relationships: https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships.html
• W3C, Understanding 1.4.3 Contrast (Minimum): https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html