Status Globale status

`aria-disabled`

Geeft aan dat een besturingselement zichtbaar en focusbaar is maar niet reageert op gebruikersinvoer. Gebruik bij voorkeur het native HTML-attribuut disabled; grijp naar aria-disabled wanneer het element focusbaar moet blijven of een tooltip moet ontvangen.

Wanneer gebruiken

Wanneer een knop, koppeling, invoerveld of samengesteld widget momenteel niet bruikbaar is maar toch in de tabvolgorde moet verschijnen zodat gebruikers het kunnen ontdekken en kunnen achterhalen waarom het uitgeschakeld is. Stel aria-disabled="true" in en stijl het visueel zodat de uitgeschakelde staat ondubbelzinnig is.

Vergeleken met verwante attributen:

HTML disabled (op <button>, <input>, <select>, <textarea>, <fieldset>) — verwijdert het besturingselement volledig uit de tabvolgorde, negeert klikken en voorkomt dat de waarde wordt ingediend. Gebruik dit wanneer de gebruiker niets met het besturingselement kan doen.
aria-disabled="true" — de schermlezer kondigt “gedimd” / “niet beschikbaar” aan, maar het element blijft focusbaar. De klikverwerker moet ook worden geblokkeerd. Gebruik dit op aangepaste widgets, op <a>-tags (die geen disabled accepteren), of wanneer de uitgeschakelde staat een tooltip nodig heeft die uitlegt waarom.
aria-readonly — de waarde kan niet worden gewijzigd, maar het besturingselement is nog steeds bedienbaar en focusbaar. De gebruiker kan de waarde kopiëren en het formulier dient de waarde nog steeds in.
aria-hidden — verwijdert het element volledig uit de toegankelijkheidsstructuur. Ander doel: verborgen, niet uitgeschakeld.

In synchronie houden

Geldige waarden zijn "true" en "false". Standaard op "false" of weglaten wanneer ingeschakeld — het is niet nodig aria-disabled="false" op elk actief besturingselement te renderen.

Wanneer aria-disabled="true":

Blokkeer de klikverwerker. Het attribuut blokkeert events niet op zichzelf.
Voorkom standaard toetsenbordactivering (Enter, Spatie).
Zorg dat de visuele stijl de uitgeschakelde staat duidelijk maakt; controleer of het nog steeds voldoet aan WCAG 1.4.11 niet-tekstcontrast (de uitgeschakelde weergave is expliciet vrijgesteld, maar een duidelijke visuele aanwijzing is toch betere praktijk).

Veelvoorkomende fouten

aria-disabled="true" gebruiken zonder de klikverwerker te blokkeren — het element ziet er gedimd uit maar voert de actie nog steeds uit.
Zowel disabled als aria-disabled op hetzelfde element gebruiken. Het native attribuut stelt de staat al bloot; het duplicaat is overbodig.
aria-disabled gebruiken op <a> zonder ook href te verwijderen of de standaard te voorkomen — de koppeling navigeert nog steeds.
Besturingselementen uitschakelen zonder uit te leggen waarom. WCAG 3.3.1 verwacht een fout of instructie.
aria-disabled verwarren met aria-hidden. Uitgeschakelde elementen blijven in de toegankelijkheidsstructuur; verborgen elementen verdwijnen.

Voorbeeld

<button type="submit" aria-disabled="true" aria-describedby="submit-help">
  Bestelling verzenden
</button>
<p id="submit-help">Voeg minimaal één artikel toe aan uw winkelwagen om verzenden in te schakelen.</p>