Formulare accesibile
Cum construiești formulare accesibile: etichete asociate, grupuri de opțiuni, câmpuri obligatorii, mesaje de eroare, autocomplete și prevenirea erorilor în tranzacții.
Ghid practic
Navigarea cu tastatura
Tot ce se poate face cu mouse-ul trebuie să se poată face și cu tastatura. Iată cum verifici și cum corectezi.
Multe persoane nu folosesc mouse-ul: persoane nevăzătoare, persoane cu dizabilități motorii, utilizatori de dispozitive de comandă alternative sau pur și simplu utilizatori care preferă tastatura. Pentru toți, fiecare funcție a site-ului trebuie să fie accesibilă de la tastatură.
Tastele esențiale
| Tastă | Acțiune |
|---|---|
| Tab / Shift+Tab | Elementul interactiv următor / anterior |
| Enter | Activează linkuri și butoane |
| Spațiu | Activează butoane, bifează casete, derulează pagina |
| Săgeți | Navighează în meniuri, liste de opțiuni, butoane radio, file |
| Escape | Închide ferestre de dialog și meniuri |
| Home / End | Începutul / sfârșitul unei liste sau al paginii |
Testul de cinci minute
Lasă mouse-ul deoparte
Pornește de la începutul paginii și apasă Tab.
Urmărește focusul
Vezi mereu unde te afli? Ordinea are sens?
Folosește fiecare funcție
Meniuri, filtre, carusele, formulare, ferestre de dialog.
Caută capcanele
Poți ieși din orice componentă cu Tab sau Escape?
Finalizează un flux
Poți trimite un formular sau plasa o comandă doar cu tastatura?
Focus vizibil
Criteriul 2.4.7 cere ca elementul care are focus să fie vizibil. Cea mai frecventă greșeală este eliminarea conturului implicit cu outline: none fără o alternativă. Soluția corectă:
/* Contur vizibil doar la navigarea cu tastatura */
:focus-visible {
outline: 3px solid #5530E0;
outline-offset: 3px;
}
Linkul de salt la conținut
Un link „Sari la conținut”, primul element focusabil din pagină, permite ocolirea meniului la fiecare pagină (criteriul 2.4.1). Poate fi ascuns vizual până primește focus. Încearcă tasta Tab pe acest site.
Componente care pun probleme
| Componentă | Problemă | Soluție |
|---|---|---|
| Meniu derulant | Se deschide doar la trecerea mouse-ului | Buton cu aria-expanded, deschidere la Enter sau Spațiu |
| Fereastră modală | Focusul rămâne în spatele ei sau nu revine | Mută focusul în dialog, păstrează-l acolo, readu-l la închidere |
| Carusel | Se derulează automat, fără control | Butoane de pauză și navigare accesibile |
Element div clicabil | Nu primește focus | Folosește button sau a |
| Hartă sau player integrat | Captează focusul | Asigură ieșirea cu Tab sau Escape |
Atenție la tabindex
Evită valorile pozitive ale atributului tabindex: ele schimbă ordinea naturală a focusului și creează confuzie. Folosește tabindex="0" doar pentru a face focusabil un element personalizat care chiar este interactiv și tabindex="-1" pentru elementele cărora le muți focusul din cod.
Hai să facem site-ul tău accesibil
Spune-ne ce platformă ai și ce termene urmărești. Revenim cu o propunere clară, adaptată proiectului tău.
Cere o ofertă
sau scrie-ne direct la contact@datapulse.ro