aria-state-property-missing

The element has missing or incorrect states or properties

Description

The element has missing or incorrect states or properties that are essential for screen reader users to understand and interact with the conveyed content.

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.

Native HTML elements, like <button>, <a>, <input> and <select> already have a pre-defined role and automatically convey their states and properties.

However, if you create a custom version of an HTML element or a new control or widget, you must define its role and include any relevant states and properties using ARIA, as well as ensure that it can be interacted with using a keyboard.

Examples

• Success: Using standard accessible states applicable for an element like:
  • Disabled
  • Pressed
  • Selected
  • Checked
  • Expanded
  • Read only
• Failure: Not defining accessible states even when applicable for an element.

How to fix?

Follow these steps to make sure that a user interface component in a web interface has the appropriate ARIA states and properties:

• Determine the component’s role: Check the HTML code to determine the component’s role attribute, which defines its type and expected behavior.
• Identify the required states and properties: Check the ARIA documentation to identify the necessary states and properties for the component based on its role. For example, a component with the role “option” should have a value for the aria-selected property.
• Apply the ARIA attributes: Use HTML to apply the appropriate ARIA attributes to the component. For instance, if a “textbox” component has an error state, add the aria-invalid attribute with a value of “true”.
• Test the component: Test the component using a screen reader to verify that the ARIA attributes are correctly conveyed.

References

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