• June 1, 2025

Ensuring Required ARIA Attributes Are Present

Rule ID: aria-required-attr
Ruleset: axe-core 4.10
User Impact: Critical
Guidelines: WCAG 2.1 (A), WCAG 2.0 (A), WCAG 2.2 (A), EN 301 549

How to Fix the Problem

To fix this issue, ensure that all ARIA widget roles on your web page include the necessary ARIA state or property attributes. These attributes help assistive technologies (like screen readers) understand the purpose and state of widgets such as buttons, menus, tooltips, and other interactive elements.

Steps to resolve:

1. Identify the element that has an ARIA role but is missing one or more required attributes.

2. Consult the ARIA 1.1 specification to determine which attributes are required for that role. You can find this at the WAI-ARIA Supported States and Properties guide.

3. Add the required ARIA attributes to the element. These include (but are not limited to):

   • Properties: aria-required, aria-valuemax, aria-valuemin, aria-valuenow, aria-label, etc.

   • States: aria-expanded, aria-pressed, aria-selected, etc.

4. Ensure the attribute values are meaningful and accurately reflect the current state of the widget. For example, for a required input field:

   html

   KopierenBearbeiten

   <input type="text" aria-required="true" />


Helpful Notes:

• These attributes are often required by the role definition in ARIA and are not optional.

• If you are using a custom UI component library, ensure it properly supports ARIA roles and required attributes.

Why it Matters

Assistive technologies rely on ARIA attributes to interpret the purpose and behavior of web elements. If a required ARIA attribute is missing:

• The intended role of the element might not be communicated.

• The state or interaction behavior of the element might not be conveyed.

• Users relying on screen readers could be confused or misinformed, leading to poor or incomplete user experiences.

For example, a slider widget without aria-valuenow and aria-valuemax won’t tell the user what value the slider currently holds or its range—critical information for interaction.

Rule Description

ARIA widget roles must include all required attributes that describe their current state or properties. This ensures that users with disabilities can interact with them accurately and effectively using assistive technologies.

The Algorithm (in simple terms)

1. For every HTML element with a role attribute:

2. Check if the assigned role requires specific ARIA attributes (states or properties).

3. If any of those required attributes are missing, the element fails this rule.