Butoanele dezactivate și accesibilitatea

„Adaugă în coș” gri până când alegeți o mărime, butonul „Plasează comanda” care rămâne dezactivat până se completează fiecare câmp — butoanele dezactivate sunt peste tot în magazinele online. WCAG are o excepție specială pentru ele, dar asta nu înseamnă că sunt o idee bună în orice situație. Această pagină acoperă regulile, cele două moduri de a dezactiva un buton și alternative mai bune. Face parte din seria modele UI accesibile.

Ce spune WCAG

• Excepția de contrast. 1.4.3 Contrast (minim) exceptează „textul sau imaginile cu text care fac parte dintr-o componentă de interfață inactivă”, iar 1.4.11 Contrast non-text exceptează și el componentele inactive. W3C definește o componentă inactivă ca una care „este vizibilă, dar nu poate fi acționată în acel moment” și dă ca exemplu un buton de trimitere dezactivat. Documentul Understanding explică faptul că excepția există pentru că nu s-a găsit o singură modalitate bună de a arăta controalele dezactivate.
• Nume, rol, stare. 4.1.2 Nume, rol, valoare: starea dezactivată trebuie expusă în cod, nu doar prin culoarea gri.
• Instrucțiuni. 3.3.2 Etichete sau instrucțiuni: dacă utilizatorul trebuie să facă ceva înainte ca un buton să funcționeze, spuneți-i.
• Erori. 3.3.1 Identificarea erorilor: un buton de trimitere dezactivat nu este un mesaj de eroare. Utilizatorul trebuie în continuare să afle în text ce nu este în regulă.

Așadar un contrast scăzut pe un buton dezactivat nu încalcă WCAG — dar un buton dezactivat pe care nu îl înțelege nimeni poate încălca totuși criteriile de mai sus și sigur costă vânzări.

disabled vs aria-disabled

Ghidul APG pentru tastatură spune că „browserele scot din ordinea Tab elementele HTML input care au atributul disabled”. Acolo unde utilizatorii trebuie să descopere un element dezactivat — APG menționează elemente de meniu, file, opțiuni de listbox și elemente de arbore — se folosește aria-disabled="true", astfel încât elementul să rămână focalizabil. Modelul de buton din APG spune și el că, atunci când acțiunea unui buton nu este disponibilă, „butonul are aria-disabled setat la true”.

Regula practică: folosiți disabled când nu contează că butonul este sărit; folosiți aria-disabled când utilizatorii trebuie să găsească butonul și să afle de ce nu funcționează.

Exemplu de cod

<!-- Poate fi descoperit: rămâne în ordinea Tab, motivul este anunțat -->
<p id="size-hint">Alegeți o mărime ca să adăugați acest produs în coș.</p>
<button type="button" id="add" aria-disabled="true" aria-describedby="size-hint">
  Adaugă în coș
</button>

<script>
  const add = document.getElementById('add');
  add.addEventListener('click', (event) => {
    if (add.getAttribute('aria-disabled') === 'true') {
      event.preventDefault();          // blocați singuri acțiunea
      document.getElementById('size').focus();
      return;
    }
    addToCart();
  });
  // Când se alege o mărime: add.setAttribute('aria-disabled', 'false');
</script>

<!-- Poate fi sărit: un control nativ dezactivat la care utilizatorul nu trebuie să ajungă -->
<button type="button" disabled>Pagina anterioară</button>

Stilizați [aria-disabled="true"] astfel încât să arate indisponibil — browserul nu face asta pentru dumneavoastră.

Alternative mai bune

1. Lăsați „Plasează comanda” activ. Când este apăsat cu date lipsă, afișați mesaje de eroare în text și mutați focusul pe prima eroare sau pe un rezumat al erorilor. Vedeți validarea formularelor și erorile.
2. Spuneți ce este necesar lângă un buton dezactivat, în text vizibil, nu într-un tooltip la trecerea mouse-ului.
3. Nu ascundeți o opțiune indisponibilă fără explicație — o mărime epuizată poate rămâne în listă, marcată „epuizat”.

Interacțiunea cu tastatura

Greșeli frecvente în magazinele online

• „Adaugă în coș” dezactivat până la alegerea unei variante, fără niciun indiciu vizibil. Utilizatorii de tastatură nu ajung niciodată la buton și nu știu de ce.
• Butonul „Plătește” din checkout dezactivat până când toate câmpurile trec validarea, în timp ce câmpurile nu afișează niciun mesaj de eroare.
• Un buton care arată dezactivat, dar nu este (doar stil gri) sau unul dezactivat în cod, dar care arată activ.
• aria-disabled="true" fără blocare în script, așa că butonul tot trimite formularul.
• Starea dezactivată arătată doar prin opacitate redusă, în timp ce motivul apare într-un tooltip title.
• Text dezactivat ilizibil de deschis pentru informații importante, cum ar fi „Stoc epuizat”. Textul poate fi exceptat de la contrast, dar informația ar trebui să fie disponibilă și într-un text lizibil.

Ce prind verificările automate vs testarea manuală

Toate sunt fișe în biblioteca noastră de reguli. Testarea manuală: încercați să completați formularul sau alegerea produsului doar cu tastatura, verificați că fiecare control dezactivat are un motiv vizibil și verificați cu un cititor de ecran că starea și motivul sunt anunțate. Verificatorul de contrast vă ajută să alegeți un stil dezactivat care rămâne lizibil.

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

Întrebări frecvente

Trebuie butoanele dezactivate să îndeplinească cerințele de contrast WCAG?

Nu. Atât 1.4.3 Contrast (minim), cât și 1.4.11 Contrast non-text exceptează componentele de interfață inactive, pe care W3C le definește ca vizibile, dar care nu pot fi acționate în acel moment. Un buton de trimitere dezactivat este exemplul dat de W3C.

Care este diferența dintre disabled și aria-disabled?

Atributul HTML disabled face un control nativ imposibil de acționat și îl scoate din ordinea Tab. aria-disabled="true" doar le spune tehnologiilor asistive că elementul de control nu este disponibil; el rămâne focalizabil, iar acțiunea trebuie blocată în scriptul dumneavoastră.

Este o idee proastă să dezactivez butonul de trimitere până când formularul este valid?

Adesea creează probleme: utilizatorii nu pot afla ce lipsește, iar utilizatorii de tastatură nici măcar nu pot ajunge la buton. De obicei funcționează mai bine să îl lăsați activ și să afișați mesaje de eroare clare la trimitere.

Cum explic de ce un buton este dezactivat?

Puneți motivul într-un text vizibil lângă buton, de exemplu „Alegeți o mărime ca să adăugați în coș”, și legați-l prin aria-describedby. Nu vă bazați pe un tooltip la trecerea mouse-ului.

Poate o verificare automată să testeze butoanele dezactivate?

Verificările de contrast sar peste controalele dezactivate, la fel ca WCAG. Regulile automate verifică dacă aria-disabled are o valoare validă și dacă butoanele au nume. Dacă utilizatorii înțeleg de ce un buton nu este disponibil se verifică printr-un test manual.

Surse

• W3C, Understanding 1.4.3 Contrast (Minimum): https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html
• W3C, Understanding 1.4.11 Non-text Contrast: https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html
• W3C WAI, APG Developing a Keyboard Interface (focalizarea controalelor dezactivate): https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/
• W3C WAI, APG Button pattern: https://www.w3.org/WAI/ARIA/apg/patterns/button/