accessible-state-invalid

Suitable accessible state not found for the element.

Description

Considering the interactive element’s intended state, the element lacks essential states or properties or the pre-existing one is unsuitable. This is crucial for enabling screen reader users to fully understand the element.

Why is it important?

In order to make screen reader users aware of how to operate user interface controls, it is important that each control has a specific role and relevant states and properties.

Examples

• Success: Using standard accessible states applicable for an element.

• Failure: Not defining accessible states even when applicable for an element.

How to fix?

Determine the role of the component and apply the appropriate ARIA attributes to the component to resolve this issue.

References

• WCAG 4.1.2: Name, Role and Value
• Definition of roles