WCAG 1.4.13 Conținut la hover sau focus

Criteriul de succes 1.4.13 ajută persoanele care măresc mult pagina, folosesc o lupă de ecran, au tremor sau folosesc tastatura. Ferestrele care se deschid la hover sau focus pot acoperi ceea ce citesc sau pot dispărea înainte ca ele să apuce să mute mouse-ul pe ele. A fost adăugat în WCAG 2.1, este de nivelul AA și face parte din EN 301 549 (clauza 9.1.4.13).

Ce cere criteriul

Acolo unde trecerea cursorului (hover) sau focusul tastaturii face să apară și apoi să dispară conținut suplimentar (tooltip-uri personalizate, submeniuri, mega-meniuri, ferestre de previzualizare), trebuie îndeplinite toate cele trei condiții:

• Poate fi închis: există o modalitate de a închide conținutul fără a muta cursorul sau focusul, de obicei tasta Escape — cu excepția cazului în care conținutul semnalează o eroare de introducere sau nu acoperă și nu înlocuiește alt conținut;
• Poate fi survolat: dacă hover-ul îl poate declanșa, cursorul se poate muta peste conținutul suplimentar fără ca acesta să dispară;
• Persistent: rămâne vizibil până când declanșatorul este îndepărtat, utilizatorul îl închide sau informația lui nu mai este valabilă.

Excepție: conținutul a cărui prezentare vizuală este controlată de browser și nu este modificată de autor, cum ar fi tooltip-urile din atributul title.

Nu sunt vizate: dialogurile modale (acestea trebuie să preia focusul) și elementele care sunt ele însele afișate la focus, cum ar fi linkurile de salt.

Greșeli tipice într-un magazin online

• un mega-meniu care se închide când mouse-ul traversează un mic spațiu dintre elementul de meniu și panou;
• un meniu sau o previzualizare a mini-coșului care se deschide la hover și nu poate fi închisă cu Escape în timp ce acoperă pagina;
• un tooltip cu informații despre mărime sau livrare care dispare după câteva secunde;
• mărirea imaginii produsului la hover care acoperă detaliile produsului și nu poate fi închisă;
• o fereastră de ajutor care se deschide la focus, acoperă câmpul următor al formularului și se închide doar când focusul trece mai departe.

Cum se verifică

Automat: nicio regulă automată din verificatorul nostru nu corespunde acestui criteriu. Testarea înseamnă să treceți cu cursorul, să mutați mouse-ul și să apăsați taste urmărind ce se întâmplă. Este nevoie de o verificare manuală.

Manual: pentru fiecare element care afișează conținut suplimentar la hover sau focus: (1) treceți cu cursorul peste el, apoi mutați mouse-ul pe fereastră — trebuie să rămână; (2) cu fereastra deschisă, apăsați Escape fără să mișcați mouse-ul sau focusul — ar trebui să se închidă; (3) așteptați — nu trebuie să dispară după un temporizator; (4) repetați cu tastatura, folosind Tab. Faceți acest lucru și la un zoom de 200 %.

Cum se remediază

• Închideți ferestrele afișate la hover și focus la apăsarea tastei Escape.
• Păstrați declanșatorul și fereastra lipite sau adăugați o mică întârziere înainte de închidere, astfel încât cursorul să poată trece peste ele.
• Eliminați temporizatoarele care ascund automat tooltip-urile.
• Deschideți același conținut la focusul tastaturii sau la clic pentru utilizatorii de ecrane tactile.
• Pentru meniurile mari și mini-coșuri, preferați butoane care se deschid la clic.

Criterii conexe

• 1.4.10 Reflow (readaptarea conținutului) — conținut la zoom mare.
• 1.4.11 Contrast non-text — indicatori de focus și pictograme vizibile.
• Lista de verificare WCAG 2.2 — inclusiv 2.4.11 Focus neobstrucționat și 3.2.1 La focus.

Întrebări frecvente

Ce înseamnă „poate fi închis”, „poate fi survolat” și „persistent”?

Poate fi închis: utilizatorul poate închide fereastra fără să miște mouse-ul sau focusul, de obicei cu tasta Escape. Poate fi survolat: mouse-ul se poate muta pe fereastră fără ca aceasta să dispară. Persistent: rămâne deschis până când utilizatorul se îndepărtează, îl închide sau informația nu mai este valabilă.

Sunt vizate tooltip-urile din atributul title?

Nu. Conținutul a cărui prezentare este controlată de browser și nu este modificată de autor, cum ar fi tooltip-ul din atributul HTML title, este exceptat.

Intră mega-meniurile sub 1.4.13?

Da, dacă se deschid la hover sau focus. Submeniurile, tooltip-urile personalizate și alte ferestre nemodale afișate la hover sau focus sunt vizate.

Poate un instrument automat să testeze 1.4.13?

Nu. Este nevoie să treceți cu mouse-ul, să mutați focusul și să apăsați Escape urmărind rezultatul, deci este o verificare manuală.