aria-disabled

När används det

När en knapp, länk, inmatning eller sammansatt widget för tillfället inte fungerar men ändå ska synas i tab-ordningen så att användare kan hitta den och lära sig varför den är inaktiverad. Sätt aria-disabled="true" och styla den visuellt så att det inaktiverade tillståndet är otvetydigt.

Jämfört med relaterade attribut:

• HTML disabled (på <button>, <input>, <select>, <textarea>, <fieldset>) — tar bort kontrollen från tab-ordningen helt, ignorerar klick och förhindrar att värdet skickas. Använd detta när användaren ingenting kan göra med kontrollen.
• aria-disabled="true" — skärmläsaren annonserar “nedtonad” / “otillgänglig”, men elementet förblir fokuserbart. Du måste också förhindra att klickhanteraren körs. Använd det på custom-widgets, på <a>-taggar (som inte accepterar disabled), eller när det inaktiverade tillståndet behöver ett verktygstips som förklarar varför.
• aria-readonly — värdet kan inte ändras men kontrollen är fortfarande operabel och fokuserbar. Användaren kan kopiera det och formuläret skickar fortfarande värdet.
• aria-hidden — tar bort elementet från tillgänglighetsträdet helt. Annat syfte: dolt, inte inaktiverat.

Hur man håller det synkroniserat

Giltiga värden är "true" och "false". Standardvärde är "false" eller utelämnat när det är aktiverat — det behövs inte aria-disabled="false" på varje aktiv kontroll.

När aria-disabled="true":

• Stoppa klickhanteraren från att köras. Attributet blockerar inte händelser på egen hand.
• Förhindra standard tangentbordsaktivering (Enter, Space).
• Se till att den visuella stilen gör det inaktiverade tillståndet uppenbart; kontrollera att det fortfarande uppfyller WCAG 1.4.11 icke-textkontrastkriteriet (det inaktiverade utseendet är uttryckligen undantaget, men ett tydligt visuellt ledtecken är ändå bästa praxis).

Vanliga fel

• Att använda aria-disabled="true" utan att blockera klickhanteraren — elementet ser nedtonat ut men utlöser ändå sin åtgärd.
• Att använda både disabled och aria-disabled på samma element. Det native attributet exponerar redan tillståndet; dubbletten är redundant.
• Att använda aria-disabled på <a> utan att också ta bort href eller förhindra default — länken navigerar fortfarande.
• Att inaktivera kontroller utan att förklara varför. WCAG 3.3.1 förväntar sig ett fel eller en instruktion.
• Att förväxla aria-disabled med aria-hidden. Inaktiverade element finns kvar i tillgänglighetsträdet; dolda element försvinner.

Exempel

<button type="submit" aria-disabled="true" aria-describedby="submit-help">
  Skicka beställning
</button>
<p id="submit-help">Lägg till minst ett objekt i varukorgen för att aktivera Skicka.</p>