The element has missing or incorrect states or properties

Link to The element has missing or incorrect states or properties copied to clipboard

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

Rule ID:
aria-state-property-missing
User Impact:
Critical
WCAG :
4.1.2.b

Rule

The states and properties of user interface controls must be programmatically determinable by assistive technologies.

Background

Every user interface control must have a role along with any applicable states and properties so that screen reader users know how to interact with the control.

Native HTML elements (such as <button>, <a>, <input>, <select>) already have a role, and their necessary states and properties (such as the "checked" or "unchecked" state of a checkbox) are automatically conveyed so nothing more needs to be done.

If you create a custom version of a native HTML element or a custom control or widget that does not have a native HTML equivalent, you must add the relevant role(s) and any applicable states and properties using ARIA as well as expected keyboard interactions.

How to Fix

To ensure that a user interface component in a web interface has the appropriate ARIA (Accessible Rich Internet Applications) states and properties, follow these steps:

  1. Determine the role of the component: Identify the role of the component by looking at the HTML code and checking whether it has the appropriate role attribute. The role attribute defines the type of the component and its expected behavior.

  2. Identify the required states and properties: Check the ARIA documentation to identify the "required states and properties" for the component, based on its role. For example, a component with the "option" role must have a value for the aria-selected property.

  3. Apply the ARIA attributes: Apply the appropriate ARIA attributes to the component using HTML. For example, if a "textbox" component has an error state, you can add the aria-invalid attribute with a value of "true".

  4. Test the component: Test the component using a screen reader to ensure that the ARIA attributes are properly communicated.

Additional Resources