undeclared-input

Description

Custom-built input elements must have an appropriate ARIA role. When you use non-semantic elements like <div> or <span> to create interactive controls, assistive technologies cannot programmatically determine their purpose.

The undeclared-input rule ensures that users of screen readers and other assistive tools understand the function of your custom components. This rule aligns with WCAG Success Criterion 4.1.2 (Name, Role, Value), which requires that the name and role of every user interface component can be programmatically determined.

Examples

In the following example, a <span> is used to create a custom toggle, but it lacks a role to identify it as a checkbox or switch.

In the following corrected example, role=”checkbox” is added to the element so assistive technologies can identify it correctly:

How to fix?

To fix violations of the undeclared-input rule, follow these steps:

• Identify custom elements (like <div> or <span>) that function as interactive inputs.

• Adding an input tag is the appropriate way of identifying an input element. Assign the appropriate ARIA role to the element, such as role="button", role="checkbox", role="radio", or role="textbox".

• Verify that the element is also keyboard-accessible and provides necessary state information (like aria-checked).

Reference

• WCAG Success Criterion 4.1.2: Name, Role, Value