Dropdown, select și combobox accesibil

„Dropdown” înseamnă multe lucruri: un select nativ, un widget personalizat doar de selecție, un câmp de căutare cu sugestii, un meniu de navigare. Această pagină tratează dropdown-urile din formulare — select-ul nativ și combobox-ul din APG. Dropdown-urile de navigare sunt un alt model: vedeți meniul de navigare. Pagina face parte din seria modele de interfață accesibile.

Când folosiți fiecare variantă

1. <select> nativ pentru alegerea unei singure valori dintr-o listă fixă: țară, mărime, cantitate, ordine de sortare. Are nume, rol, valoare și suport pentru tastatură incluse. APG însuși notează că „un element HTML select cu size="1" este prezentat tehnologiilor asistive ca un combobox”.
2. Un simplu câmp text cu etichetă când textul liber este în regulă și sugestiile nu sunt esențiale.
3. Un combobox ARIA doar când aveți nevoie de ceva ce un select nu poate face: sugestii de căutare, filtrarea unei liste lungi pe măsură ce utilizatorul tastează, opțiuni bogate. Este unul dintre modelele APG cel mai greu de realizat corect.

Criterii WCAG relevante

• 4.1.2 Nume, rol, valoare (A): numele, rolul, starea extinsă și valoarea curentă sunt expuse.
• 3.3.2 Etichete sau instrucțiuni (A): o etichetă vizibilă, nu doar un placeholder.
• 2.1.1 Tastatură (A) și 2.1.2 Fără capcană pentru tastatură (A).
• 3.2.2 La introducerea datelor (A): schimbarea valorii nu trebuie să schimbe contextul (pagină nouă, fereastră nouă) decât dacă utilizatorii au fost anunțați înainte. Eșecul W3C F37 acoperă ferestrele noi deschise la schimbarea unui select.
• 1.3.5 Identificarea scopului datelor introduse (AA): autocomplete pe câmpurile care colectează date personale, de exemplu țara.
• 4.1.3 Mesaje de stare (AA): „5 sugestii disponibile” sau „Niciun rezultat” anunțate fără a muta focusul.
• 1.4.13 Conținut la hover sau focus (AA), dacă pop-up-ul apare la focus.

Exemplu de cod

<!-- 1. Select nativ: de obicei tot ce vă trebuie -->
<label for="country">Țara</label>
<select id="country" name="country" autocomplete="country">
  <option value="">Alegeți o țară</option>
  <option value="PL">Polonia</option>
  <option value="DE">Germania</option>
</select>

<!-- 2. Combobox editabil cu pop-up listbox (model APG) -->
<label for="search">Căutați produse</label>
<input id="search" type="text" role="combobox"
       aria-autocomplete="list" aria-expanded="false" autocomplete="off">
<ul id="search-list" role="listbox" aria-label="Sugestii" hidden>
  <li id="opt-1" role="option">Pantofi de alergare</li>
  <li id="opt-2" role="option">Șosete de alergare</li>
</ul>
<div id="search-status" role="status" class="visually-hidden"></div>

Ce trebuie să facă scriptul, conform APG:

• Când se deschide pop-up-ul: afișați lista, setați aria-expanded="true" și aria-controls="search-list" (APG spune că aria-controls trebuie setat doar cât timp pop-up-ul este vizibil).
• Când o opțiune este evidențiată cu tastele săgeată: focusul DOM rămâne pe câmpul de introducere, iar aria-activedescendant="opt-1" indică opțiunea; marcați-o cu aria-selected="true" și o evidențiere vizibilă.
• Când se închide: ascundeți lista, aria-expanded="false", eliminați aria-activedescendant.
• Actualizați regiunea de stare cu numărul de sugestii după tastare.
• aria-autocomplete este none, list sau both, după ce face widgetul dvs. APG enumeră patru comportamente de completare automată: fără, listă cu selecție manuală, listă cu selecție automată și listă cu completare în linie.

Interacțiunea cu tastatura

Din modelul combobox al APG:

Greșeli frecvente în magazinele online

• „Select” personalizat pentru mărime sau cantitate construit din elemente div, care se deschide doar cu clic de mouse.
• Placeholder în loc de etichetă („Căutare…”), care dispare în timpul tastării.
• Sugestii de căutare care nu sunt anunțate niciodată: niciun mesaj de stare, niciun aria-expanded, niciun aria-activedescendant.
• Tastele săgeată derulează pagina în loc să parcurgă sugestiile, sau Tab rămâne blocat în lista de sugestii.
• Select-uri de sortare sau de limbă care reîncarcă pagina la schimbare, astfel încât utilizatorii de tastatură sar pe o pagină nouă în timp ce parcurg opțiunile.
• role="combobox" pe un div învelitor în loc de câmpul care primește focusul.
• Pop-up-ul se închide când mouse-ul trece peste el sau acoperă câmpul următor fără o modalitate de a-l închide.

Ce prind verificările automate și ce testați manual

Toate sunt fișe în biblioteca noastră de reguli. Scanarea vede pagina așa cum se încarcă, deci o listă de sugestii deschisă nu este testată; extensia de browser verifică pagina în starea în care o lăsați, așa că tastați mai întâi în câmpul de căutare. Testarea manuală: folosiți doar tastatura (tastare, săgeți, Enter, Escape, Tab) și ascultați cu un cititor de ecran dacă sunt anunțate numărul de sugestii și opțiunea evidențiată.

Rulați verificarea gratuită a unei pagini. Este o verificare automată, nu un audit complet, și nu constituie consultanță juridică.

Întrebări frecvente

Este accesibil un element select nativ?

Da, dacă are o etichetă. Browserele și tehnologiile asistive îl suportă bine; APG notează că un select cu size="1" este prezentat tehnologiilor asistive ca un combobox. Este alegerea cea mai sigură pentru țară, mărime sau ordinea de sortare.

Ce este un combobox?

În APG, un widget de introducere cu o fereastră pop-up asociată, care îi permite utilizatorului să aleagă o valoare dintr-o colecție. Poate fi doar de selecție sau editabil, de exemplu un câmp de căutare cu sugestii.

De ce atribute ARIA are nevoie un combobox?

role="combobox" pe câmpul de introducere, aria-expanded true sau false, aria-controls care indică pop-up-ul cât timp este vizibil, aria-activedescendant pentru opțiunea evidențiată și aria-autocomplete potrivit comportamentului. Pop-up-ul este de obicei un listbox cu opțiuni.

Poate un select să ducă la altă pagină când se schimbă valoarea?

Doar dacă utilizatorii sunt anunțați dinainte. 3.2.2 La introducerea datelor nu permite o schimbare de context la modificarea valorii fără avertizare prealabilă. Un buton separat „Mergi” sau „Aplică” este soluția simplă.

Poate o verificare automată să testeze un combobox?

Găsește un select sau un combobox fără etichetă, atribute ARIA obligatorii lipsă și referințe către ID-uri inexistente. Nu poate testa tastele săgeată, dacă sugestiile sunt anunțate sau dacă Escape funcționează.

Surse

• W3C WAI, APG Combobox pattern: https://www.w3.org/WAI/ARIA/apg/patterns/combobox/
• W3C WAI, APG Developing a Keyboard Interface (aria-activedescendant): https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/
• W3C, Understanding 3.2.2 On Input: https://www.w3.org/WAI/WCAG22/Understanding/on-input.html
• W3C, Understanding 4.1.3 Status Messages: https://www.w3.org/WAI/WCAG22/Understanding/status-messages.html