• June 1, 2025

Ensuring Appropriate Focus Order Semantics

Rule ID: focus-order-semantics
Ruleset: axe-core 4.10
User Impact: Minor
Guidelines: Deque Best Practice

How to Fix the Problem

To ensure accessibility and proper communication with screen readers and other assistive technologies, follow these steps:

1. Assign Valid Roles to Interactive Elements
   Every element that users can focus on must have a semantically appropriate role. Native HTML elements (like <button>, <input>, <a href>, etc.) have implicit roles and generally do not need additional ARIA roles. However, for custom widgets, explicitly define valid ARIA roles, such as:

   html

   KopierenBearbeiten

   <div role="button" tabindex="0">Submit</div>


2. Avoid Using Incorrect or Inappropriate Roles

   • Do not assign roles like paragraph or other non-interactive roles to interactive elements.

   • Avoid omitting roles altogether for custom elements—screen readers will not announce anything meaningful when those elements receive focus.

3. Make Use of ARIA Roles Appropriately
   If you create custom widgets that simulate standard HTML behaviors, apply a suitable ARIA role (e.g., role="checkbox", role="radiogroup"). Reference roles by category:

   • Widget Roles: button, checkbox, radio, tab, etc.

   • Landmark Roles: main, navigation, banner, etc.

   • Pseudo HTML Roles: For simulating standard HTML components using non-semantic containers.

4. Enable Keyboard Navigation
   Ensure that all interactive elements can be accessed using a keyboard (tabindex="0" if necessary) and that their roles make their purpose clear to assistive tech users.

5. Don’t Use Abstract Roles
   Roles like command, composite, or structure are meant for role taxonomy and cannot be used directly in markup.

Why it Matters

Screen reader users rely on correctly assigned roles to understand the nature and function of elements on a web page. If an element lacks a proper role:

• It may be skipped entirely by assistive technologies.

• The purpose of the element remains unknown, even if text is present.

• Interactivity is hindered, making it impossible for users to act on form fields, buttons, or custom controls.

Accessible websites ensure that users with disabilities can navigate and interact with every part of the interface. By implementing correct roles, you guarantee a richer, more functional experience for all users.

Rule Description

This rule ensures that all user input elements in the tab/focus order have appropriate semantic roles. Native elements are typically fine, but for custom widgets, the developer must apply meaningful and valid ARIA roles. Improper or missing roles reduce accessibility and prevent assistive technologies from conveying correct element functions.

The Algorithm (in simple terms)

1. Identify all elements that are part of the tab/focus order.

2. Check if they are native interactive HTML elements or custom widgets.

3. If custom:

   • Ensure they have a valid and meaningful ARIA role.

   • Reject any abstract or non-interactive role assignments.

4. Pass the check if the role is appropriate for the element’s purpose.