aria-disabled

Hvornår skal den bruges

Når en knap, et link, et input eller et sammensat widget i øjeblikket ikke er operativt, men stadig skal vises i tabuleringsrækkefølgen, så brugere kan opdage det og forstå hvorfor det er deaktiveret. Sæt aria-disabled="true" og stil det visuelt, så den deaktiverede tilstand er utvetydig.

Sammenlignet med relaterede attributter:

• HTML disabled (på <button>, <input>, <select>, <textarea>, <fieldset>) — fjerner kontrolelementet helt fra tabuleringsrækkefølgen, ignorerer klik og forhindrer værdien i at blive indsendt. Brug dette, når der ikke er noget for brugeren at gøre med kontrolelementet.
• aria-disabled="true" — skærmlæseren annoncerer “dæmpet” / “utilgængeligt”, men elementet forbliver fokuserbart. Man skal også forhindre klik-handleren i at køre. Brug dette på brugerdefinerede widgets, på <a>-tags (der ikke accepterer disabled), eller når den deaktiverede tilstand behøver et tooltip, der forklarer hvorfor.
• aria-readonly — værdien kan ikke ændres, men kontrolelementet er stadig operativt og fokuserbart. Brugeren kan kopiere det, og formularen indsender det stadig.
• aria-hidden — fjerner elementet helt fra tilgængelighedstræet. Et andet formål: skjult, ikke deaktiveret.

Sådan holdes det synkroniseret

Gyldige værdier er "true" og "false". Standard til "false" eller udelad, når aktiveret — der er ingen grund til at rendere aria-disabled="false" på hvert aktivt kontrolelement.

Når aria-disabled="true":

• Stop klik-handleren i at køre. Attributten blokerer ikke events på egen hånd.
• Forhindre standard tastaturaktivering (Enter, Mellemrum).
• Sørg for, at den visuelle stil gør den deaktiverede tilstand tydelig; kontroller, at den stadig opfylder WCAG 1.4.11 ikke-tekstkontrast (det deaktiverede udseende er eksplicit undtaget, men et tydeligt visuelt signal er stadig bedste praksis).

Typiske fejl

• Brug af aria-disabled="true" uden at blokere klik-handleren — elementet ser dæmpet ud, men udfører stadig sin handling.
• Brug af både disabled og aria-disabled på samme element. Det native attribut eksponerer allerede tilstanden; dubletten er overflødig.
• Brug af aria-disabled på <a> uden at fjerne href eller forhindre standard — linket navigerer stadig.
• Deaktivering af kontrolelementer uden at forklare hvorfor. WCAG 3.3.1 forventer en fejl eller vejledning.
• Forveksling af aria-disabled med aria-hidden. Deaktiverede elementer forbliver i tilgængelighedstræet; skjulte elementer forsvinder.

Eksempel

<button type="submit" aria-disabled="true" aria-describedby="submit-help">
  Indsend ordre
</button>
<p id="submit-help">Tilføj mindst ét produkt til din kurv for at aktivere indsend.</p>