aria-disabled

Ensure that buttons that are intended to be non-interactive must have the aria-disabled attribute set to true.

Description

Buttons that are intended to be non-interactive must have the aria-disabled attribute set to true. This ensures that assistive technologies, such as screen readers, correctly identify the button as disabled to the user. Without this attribute, a user might try to interact with a button that is not functional, leading to confusion and frustration.   The aria-disabled rule aligns with WCAG Success Criterion 4.1.2 (Name, Role, Value), which requires that states, properties, and values that can be set by the user can be programmatically set and determined.  

Examples

  In the following example, a button is visually styled to appear disabled but lacks the programmatic state to inform assistive technologies.  

In the following corrected example, the aria-disabled="true" attribute is added to correctly communicate the disabled state:

How to fix?

To fix violations of the aria-disabled rule, follow these steps:

• Identify buttons that are intended to be non-interactive.
• Ensure that these buttons have the aria-disabled attribute explicitly set to true.
• You can use the disabled property instead of aria-disabled for buttons declared with native HTML tag. However, non-native implementations must only use aria-disabled.

Reference

• WCAG Success Criterion 4.1.2: Name, Role, Value
• Technique ARIA5