WCAG 2.5.8 Dimensiunea țintei (minim)

Criteriul de succes 2.5.8 este nou în WCAG 2.2. Face butoanele și linkurile mai ușor de nimerit pentru persoanele cu tremor sau dexteritate redusă, pentru cele care folosesc un pointer montat pe cap sau un dispozitiv acționat cu gura și pentru oricine folosește telefonul cu o singură mână. Țintele mici înghesuite duc la atingeri greșite — mărimea greșită, culoarea greșită, „Eliminați” în loc de „+1”. Este de nivelul AA și face parte din EN 301 549 (clauza 9.2.5.8); Legea 232/2022 se bazează pe standardul armonizat EN 301 549.

Ce cere criteriul

Dimensiunea țintei pentru introducerea cu pointerul este de cel puțin 24 pe 24 de pixeli CSS, cu excepția cazurilor în care:

• Spațiere: țintele subdimensionate sunt poziționate astfel încât, dacă un cerc cu diametrul de 24 de pixeli CSS este centrat pe caseta de delimitare a fiecăreia, cercurile nu intersectează altă țintă sau cercul altei ținte subdimensionate;
• Echivalent: funcția poate fi realizată printr-un alt control de pe aceeași pagină care îndeplinește criteriul;
• În text: ținta se află într-o propoziție sau dimensiunea ei este limitată în alt mod de înălțimea rândului unui text care nu este țintă;
• Control al agentului utilizator: dimensiunea este stabilită de browser și nu este modificată de autor;
• Esențial: o anumită prezentare a țintei este esențială sau impusă legal pentru informația transmisă.

Țintele în care o valoare se alege după poziția din interiorul lor (de exemplu, bara unui slider) contează ca o singură țintă. Ținta este zona clicabilă, nu doar pictograma vizibilă. Nivelul AAA (2.5.5) cere 44 × 44 pixeli CSS.

Greșeli tipice într-un magazin online

• mostre de culoare de 16–20 px așezate una lângă alta;
• butoane de cantitate „−” și „+” de aproximativ 20 px lângă câmpul numeric;
• un „×” mic pentru a elimina un produs din minicoș sau pentru a închide o fereastră pop-up;
• pictograme de rețele sociale și de plată înghesuite în subsol;
• linkuri de paginare („1 2 3 …”) cu spațiere interioară redusă;
• puncte de carusel de câțiva pixeli, fără spațiere.

Cum se verifică

Automat: verificatorul nostru măsoară dimensiunea și spațierea țintelor clicabile și le semnalează pe cele sub 24 × 24 pixeli CSS care nu trec nici testul spațierii (regula target size). Nu poate evalua întotdeauna excepțiile pentru controale echivalente, linkuri din text sau prezentare esențială, așa că revizuiți manual țintele semnalate.

Manual: folosiți instrumentele pentru dezvoltatori ale browserului pentru a măsura controalele mici — mostre, butoane de cantitate, butoane de închidere, pictograme. Dacă unul este mai mic de 24 × 24, verificați spațierea imaginându-vă un cerc de 24 px pe centrul lui. Încercați pagina pe un telefon real și atingeți controalele mici cu degetul mare.

Cum se remediază

• Dați butoanelor cu pictogramă o dimensiune minimă: min-width: 24px; min-height: 24px (44 px este mai bine pentru atingere).
• Măriți spațierea interioară, nu pictograma în sine — contează zona clicabilă.
• Adăugați spațiu între țintele mici alăturate, cum ar fi mostrele și linkurile de paginare.
• Măriți punctele caruselului sau înlocuiți-le cu butoane „anterior”/„următor”.

Criterii conexe

• 2.5.2 Anularea acțiunii pointerului — atingerile accidentale trebuie să poată fi anulate.
• 2.5.7 Mișcări de tragere — tragerea are nevoie de o alternativă cu un singur pointer.
• Lista de verificare WCAG 2.2 — ce altceva este nou în WCAG 2.2.

Întrebări frecvente

Care este dimensiunea minimă a țintei în WCAG 2.2?

Cel puțin 24 pe 24 de pixeli CSS pentru țintele introducerii cu pointerul, la nivelul AA (2.5.8). Nivelul AAA (2.5.5 Dimensiunea țintei (sporită)) cere 44 pe 44 de pixeli CSS.

Poate un buton să fie mai mic de 24 px?

Da, dacă are o spațiere suficientă: un cerc cu diametrul de 24 px centrat pe el nu trebuie să intersecteze altă țintă sau cercul altei ținte mici. Alte excepții acoperă un control echivalent mai mare pe pagină, linkurile din text, controalele browserului nemodificate și prezentarea esențială sau impusă legal.

Trebuie linkurile text dintr-un paragraf să aibă 24 px?

Nu. Țintele dintr-o propoziție sau a căror dimensiune este limitată de înălțimea rândului textului înconjurător sunt exceptate prin excepția pentru elementele din text.

Ținta este pictograma vizibilă sau zona clicabilă?

Zona clicabilă. O pictogramă de 16 px într-un buton de 24 × 24 px cu spațiere interioară îndeplinește cerința de dimensiune.