Butoane radio și casete de bifare accesibile
Actualizat 14 octombrie 2026 · Lectură de 6 min
Butoanele radio și casetele de bifare sunt printre cele mai simple controale din HTML — și printre cele mai des stricate în magazine, pentru că designerii vor mostre de culoare, comutatoare și filtre-chip personalizate. Această pagină arată cum le păstrați accesibile. Face parte din seria modele UI accesibile.
Când folosiți fiecare
| Butoane radio | Casete de bifare |
|---|---|
| Exact o alegere dintr-un set: metoda de livrare, metoda de plată, mărimea | Fiecare opțiune activată sau dezactivată independent: filtre, abonare la newsletter, ambalaj de cadou |
| De obicei o opțiune este preselectată | Pot fi bifate oricâte, inclusiv niciuna |
APG descrie un grup radio ca un set de butoane bifabile în care „cel mult unul dintre butoane poate fi bifat la un moment dat”, iar casetele de bifare ca având două stări (bifat sau nu) sau trei stări, cu o stare suplimentară de bifare parțială — de exemplu „Selectează tot” când sunt selectate doar unele elemente.
Criterii WCAG relevante
- 1.3.1 Informații și relații (A): grupul și întrebarea lui trebuie să existe în cod, nu doar în aspectul vizual.
- 3.3.2 Etichete sau instrucțiuni (A): fiecare opțiune are o etichetă; grupul are o întrebare.
- 4.1.2 Nume, rol, valoare (A): rolul, numele și starea bifată sunt expuse.
- 2.1.1 Tastatură (A) și 2.4.7 Focus vizibil (AA).
- 1.4.11 Contrast non-text (AA): caseta sau cercul și starea bifată au nevoie de contrast de 3:1.
- 2.5.8 Dimensiunea țintei (minim) (AA): o etichetă pe care se poate da clic mărește ținta.
- 3.2.2 La introducerea datelor (A): selectarea unei opțiuni nu trebuie să schimbe contextul pe neașteptate, de exemplu să reîncarce pagina pentru altă țară.
Exemplu de cod
<fieldset>
<legend>Metoda de livrare</legend>
<input type="radio" id="ship-courier" name="shipping" value="courier" checked>
<label for="ship-courier">Curier, 1–2 zile, 6,90 €</label>
<input type="radio" id="ship-locker" name="shipping" value="locker">
<label for="ship-locker">Locker de colete, 2–3 zile, 3,90 €</label>
</fieldset>
<fieldset>
<legend>Culoare</legend>
<!-- Mostre: input-ul real rămâne, se schimbă doar aspectul lui -->
<input type="radio" id="c-navy" name="colour" value="navy" class="swatch-input">
<label for="c-navy" class="swatch" style="--swatch:#1f2a44">Bleumarin</label>
</fieldset>
<input type="checkbox" id="terms" name="terms" required>
<label for="terms">Accept <a href="/ro/terms">termenii și condițiile</a></label>
Observații:
fieldsetșilegendsunt tehnica W3C H71. Ea spune că acestea contează cel mai mult pentru butoanele radio și casetele de bifare care au același nume de câmp și nu sunt obligatorii când etichetele individuale fac deja clară întrebarea.- Pentru mostre, păstrați textul „Bleumarin” în etichetă (ascuns vizual, dacă este nevoie), astfel încât culoarea să nu fie transmisă doar prin culoare.
- Ascundeți vizual input-ul nativ cu o tehnică de tip clip, niciodată cu
display: nonesauvisibility: hidden, care îl scot din tastatură și din cititoarele de ecran. Faceți conturul de focus vizibil pe etichetă când input-ul are focusul. - Dacă construiți un control personalizat fără input nativ, modelul APG folosește
role="radiogroup"cu copiirole="radio"saurole="checkbox",aria-checked(true,falseși, pentru casetele de bifare,mixed), o etichetă pentru grup și suport complet pentru tastatură scris de dumneavoastră. Input-ul nativ este mult mai simplu.
Interacțiunea cu tastatura
Din modelele radio group și checkbox ale APG:
| Tastă | Grup radio | Casetă de bifare |
|---|---|---|
| Tab / Shift + Tab | Mută focusul în grup și în afara lui (o singură oprire Tab pentru grup) | Trece la caseta următoare sau anterioară |
| Tastele săgeți | Trec la opțiunea următoare sau anterioară și o bifează, reluând de la capăt la margini | — |
| Space | Bifează opțiunea cu focus dacă nu este bifată | Comută între bifat și nebifat |
Într-o bară de instrumente, notează APG, tastele săgeți mută focusul fără să schimbe opțiunea bifată, iar Space o bifează.
Greșeli frecvente în magazinele online
- Mostre de culoare și de mărime construite ca
divsauspancu handlere de clic — fără rol, fără tastatură, fără stare. - Input-ul nativ ascuns cu
display: noneîn spatele unei etichete frumos stilizate. - Filtre sub formă de casete de bifare care reîncarcă pagina la fiecare clic fără avertizare și mută focusul la începutul paginii.
- Grupuri fără întrebare: butoane radio „Da / Nu” a căror întrebare este doar un titlu vizual.
- Starea bifată arătată doar printr-o schimbare subțire a culorii marginii cu contrast scăzut sau doar prin culoare pe mostre.
- Textul „Accept termenii” nelegat de caseta de bifare, așa că un clic pe text nu face nimic, iar cititorul de ecran citește „casetă de bifare, nebifată” fără nume.
- Ținte minuscule pentru casetele de bifare din listele de filtre pe mobil.
Ce prind verificările automate vs testarea manuală
| Automat (regulă axe-core) | Ce găsește |
|---|---|
label |
Câmpuri fără etichetă |
aria-toggle-field-name |
role="checkbox", radio sau switch personalizat fără nume |
form-field-multiple-labels |
Un câmp cu mai multe etichete |
aria-required-attr |
O casetă de bifare sau un buton radio personalizat fără aria-checked |
aria-required-parent |
Roluri ARIA care trebuie să se afle într-un anumit rol părinte, folosite în afara lui |
nested-interactive |
Un link sau buton în interiorul unui control personalizat |
color-contrast, target-size |
Text de etichetă cu contrast scăzut, ținte prea mici |
Toate sunt fișe în biblioteca noastră de reguli. Testarea manuală este necesară pentru comportamentul la tastatură (tastele săgeți în grupuri, Space), focusul vizibil pe mostrele personalizate, contrastul casetei și al stării bifate (1.4.11), dacă fiecare grup are o întrebare clară și dacă selectarea unei opțiuni schimbă contextul. Verificatorul de contrast vă ajută cu contrastul non-text.
Testați o pagină de produs cu verificarea gratuită a unei pagini. Este o verificare automată, nu un audit complet.
Întrebări frecvente
Când folosesc butoane radio și când casete de bifare?
Butoane radio când dintr-un grup se poate alege exact o opțiune, de exemplu metoda de livrare. Casete de bifare când fiecare opțiune poate fi activată sau dezactivată independent, de exemplu filtrele sau „Accept termenii”.
Au nevoie butoanele radio de fieldset și legend?
De obicei da. Tehnica W3C H71 spune că fieldset și legend contează cel mai mult pentru butoanele radio și casetele de bifare care răspund la aceeași întrebare, pentru că etichetele individuale nu spun care este întrebarea. Nu sunt obligatorii când etichetele singure sunt clare.
Cum folosesc utilizatorii de tastatură un grup de butoane radio?
Tab intră în grup și iese din el, tastele săgeți trec de la o opțiune la alta și o selectează, iar Space selectează opțiunea care are focusul. Acesta este comportamentul butoanelor radio native și al modelului radio group din APG.
Pot folosi casete de bifare cu stil personalizat?
Da, dacă input-ul real rămâne în pagină și se schimbă doar aspectul lui. Ascunderea input-ului cu display none și desenarea unui div în locul lui îl scot din tastatură și din cititoarele de ecran.
Poate o verificare automată să testeze butoanele radio și casetele de bifare?
Găsește câmpuri fără etichetă, casete de bifare personalizate fără nume și câmpuri cu mai multe etichete. Nu poate spune dacă un grup are o întrebare clară sau dacă un control personalizat funcționează cu tastatura.
Surse
- W3C WAI, APG Radio Group pattern: https://www.w3.org/WAI/ARIA/apg/patterns/radio/
- W3C WAI, APG Checkbox pattern: https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/
- W3C, Technique H71 fieldset and legend: https://www.w3.org/WAI/WCAG22/Techniques/html/H71