WCAG 1.4.12 Spațierea textului

Criteriul de succes 1.4.12 ajută persoanele cu dislexie, cu vedere slabă și cu alte dificultăți de citire care folosesc extensii de browser sau propriile stiluri pentru a spația textul. O spațiere mai mare face textul mai ușor de citit, dar numai dacă pagina nu se strică. A fost adăugat în WCAG 2.1, este de nivelul AA și face parte din EN 301 549 (clauza 9.1.4.12).

Ce cere criteriul

În conținutul creat cu limbaje de marcare care acceptă aceste proprietăți (HTML și CSS le acceptă), nu trebuie să existe nicio pierdere de conținut sau de funcționalitate atunci când utilizatorul setează toate valorile de mai jos și nu schimbă nicio altă proprietate de stil:

• interlinia la cel puțin 1,5 ori mărimea fontului;
• spațiul după paragrafe la cel puțin 2 ori mărimea fontului;
• spațierea între litere la cel puțin 0,12 ori mărimea fontului;
• spațierea între cuvinte la cel puțin 0,16 ori mărimea fontului.

Designul dumneavoastră nu trebuie să folosească aceste valori. Cerința este ca un utilizator să le poată impune fără ca textul să fie tăiat, să se suprapună sau să fie ascuns.

Excepție: limbile și sistemele de scriere care nu folosesc una dintre aceste proprietăți trebuie să le accepte doar pe cele care există pentru ele.

Greșeli tipice într-un magazin online

• butonul „Adaugă în coș” și alte butoane cu înălțime fixă și overflow: hidden, astfel încât eticheta este tăiată;
• carduri de produs cu înălțime fixă, astfel încât denumirea sau prețul produsului dispare;
• file de navigare și etichete de filtrare al căror text se suprapune peste elementul următor;
• insigne precum „−20 %” sau „Nou” poziționate absolut peste imagine, astfel încât textul mai lat acoperă prețul;
• atribute style inline cu spațiere !important care blochează setările utilizatorului.

Cum se verifică

Automat: verificatorul nostru semnalează stilurile inline care setează spațierea între litere, între cuvinte sau interlinia cu !important, ceea ce îi împiedică pe utilizatori să le înlocuiască (regula evitați spațierea inline). Dacă textul este tăiat după schimbare se poate vedea doar cu ochiul, așa că este nevoie și de o verificare manuală.

Manual: aplicați un bookmarklet pentru spațierea textului sau o foaie de stil a utilizatorului cu exact aceste valori: line-height: 1.5 !important; letter-spacing: 0.12em !important; word-spacing: 0.16em !important; și margin-bottom: 2em pentru paragrafe. Apoi parcurgeți paginile principale și căutați text tăiat, suprapuneri și controale pe care nu le mai puteți folosi.

Cum se remediază

• Evitați înălțimile fixe la elementele care conțin text; folosiți în schimb min-height și padding.
• Evitați overflow: hidden la containerele de text sau permiteți-le să crească.
• Permiteți etichetelor, filelor și etichetelor de filtrare să treacă pe rândul următor.
• Nu setați spațierea cu !important în stilurile inline.

Criterii conexe

• 1.4.4 Redimensionarea textului — text la zoom de 200 %.
• 1.4.10 Reflow (readaptarea conținutului) — fără derulare orizontală la 320 px.
• Verificare gratuită a unei pagini — găsiți problemele de spațiere inline.

Întrebări frecvente

Trebuie site-ul meu să folosească o interlinie de 1,5?

Nu. WCAG nu cere aceste valori de spațiere în designul dumneavoastră. Cere ca nimic să nu se piardă atunci când un utilizator înlocuiește spațierea dumneavoastră cu ele.

Cum verific WCAG 1.4.12?

Aplicați un bookmarklet pentru spațierea textului sau o foaie de stil a utilizatorului care setează line-height 1.5, spațiu după paragraf 2em, letter-spacing 0.12em și word-spacing 0.16em, apoi căutați text tăiat, suprapus sau ascuns și controale care nu mai funcționează.

Care este cea mai frecventă cauză a greșelilor?

Containerele cu înălțime fixă sau overflow: hidden — butoane, file, insigne și carduri — care taie textul atunci când acesta are nevoie de mai mult loc.