WCAG 2.1.2 Fără capcană pentru tastatură

Criteriul de succes 2.1.2 îi protejează pe toți cei care navighează cu tastatura — utilizatori de cititoare de ecran, persoane cu dizabilități motorii, persoane care folosesc acces prin comutatoare — de blocarea într-o parte a paginii. Este de nivelul A și face parte din EN 301 549 (clauza 9.2.1.2).

Ce cere criteriul

Dacă focusul tastaturii poate fi mutat într-o componentă folosind tastatura, trebuie să fie posibil ca focusul să fie mutat în afara ei folosind doar tastatura.

Dacă pentru ieșire este nevoie de mai mult decât tastele săgeți nemodificate, Tab sau alte metode standard de ieșire, utilizatorul trebuie informat cum să iasă (de exemplu „apăsați Ctrl+M pentru a ieși din editor”).

WCAG adaugă o notă: deoarece o capcană poate împiedica pe cineva să folosească întreaga pagină, tot conținutul paginii trebuie să îndeplinească acest criteriu, inclusiv conținutul încorporat de la terți (aceasta este cerința de conformitate 5, neinterferența).

Păstrarea intenționată a focusului este permisă. Un dialog modal care păstrează Tab în interiorul său cât timp este deschis este în regulă, atâta timp cât utilizatorul îl poate închide de la tastatură.

Greșeli tipice într-un magazin online

• un videoclip încorporat, un vizualizator 3D al produsului sau o hartă care preia tasta Tab și nu o mai eliberează;
• un widget de chat sau de asistență într-un iframe, în care focusul intră și nu se mai poate întoarce în pagină;
• un script de „focus trap” într-o fereastră pop-up (newsletter, roata cu reduceri, verificarea vârstei) fără o cale de închidere de la tastatură;
• un câmp de text formatat pentru recenzii care folosește Tab pentru indentare fără să îi spună utilizatorului cum să iasă;
• un selector de dată la finalizarea comenzii care păstrează focusul în grila calendarului.

Cum se verifică

Automat: nu există o regulă axe-core pentru acest criteriu. Dacă focusul poate părăsi o componentă depinde de modul în care scripturile reacționează la taste, lucru pe care o scanare nu îl poate simula în mod fiabil, așa că este nevoie de o verificare manuală.

Manual: începeți din partea de sus a paginii și apăsați Tab în mod repetat până ajungeți la subsol, apoi Shift+Tab înapoi în sus. Asigurați-vă că treceți prin fiecare player încorporat, iframe, fereastră pop-up și widget în ambele direcții. Deschideți fiecare dialog și încercați Esc și butonul Închide. Dacă rămâneți blocat, notați unde; dacă componenta oferă o tastă specială de ieșire, verificați că aceasta este explicată pe ecran.

Cum se remediază

• Nu interceptați Tab și Shift+Tab, decât dacă păstrați intenționat focusul într-un dialog modal deschis.
• Fiecare dialog modal sau fereastră pop-up are nevoie de un buton Închide care poate primi focusul și ar trebui să se închidă la Esc; apoi readuceți focusul pe controlul care l-a deschis.
• Testați conținutul încorporat de la terți înainte de a-l adăuga și înlocuiți sau încapsulați-l pe cel care blochează focusul.
• Dacă o componentă are cu adevărat nevoie de Tab pentru ea însăși (un editor de cod sau de text), afișați o scurtă instrucțiune despre cum se iese.

Criterii conexe

• 2.1.1 Tastatură — fiecare funcție trebuie să funcționeze de la tastatură.
• 2.4.3 Ordinea focusului — focusul trebuie să se deplaseze într-o ordine logică.
• 2.4.11 Focus neobstrucționat (minim) — elementul cu focus nu trebuie să fie ascuns complet.

Întrebări frecvente

Ce este o capcană pentru tastatură?

Un loc din pagină în care focusul tastaturii poate intra, dar din care nu poate ieși folosind tastatura, de exemplu un player video încorporat sau un widget care „înghite” tasta Tab. Utilizatorul rămâne blocat și adesea trebuie să reîncarce pagina.

Este o capcană pentru tastatură un dialog modal care păstrează focusul în interior?

Nu, atâta timp cât utilizatorul îl poate părăsi, de exemplu cu Esc sau cu un buton Închide accesibil. Păstrarea focusului într-un dialog modal deschis este un model recomandat; capcana apare atunci când nu există nicio ieșire.

De ce se aplică 2.1.2 fiecărei părți a paginii?

Pentru că o singură capcană poate bloca întreaga pagină. WCAG include 2.1.2 în cerința de neinterferență, așa că tot conținutul trebuie să îl îndeplinească, chiar și conținutul pe care nu vă bazați pentru conformitate.