Potential A11y Violation:
Invalid interactive elements

Point of Failure

There are only certain elements that are eligible to receive interactions (and focus), and these are specified by the HTML specification. Specifically, name and role must be able to be programmatically determined.

Available Automation Evaluation

In checking known available linting and testing tools, these are our findings.

Linting Exists

Automated linting exists in some JS frameworks:

• Ember: See the ember-template-lint library for the no-invalid-interactive rule.
• React (JSX): See the eslint-plugin-jsx-a11y library for the no-noninteractive-element-interactions rule.

Testing Exists

Automated testing exists. See the axe-core library for the focus-order-semantics rule.

Other Test Methods

In addition to automated tests, there are other types of tests that could be conducted to prevent this potential violation.

Developer Authored Test Could Exist

Developers should ensure that their code does not violate this rule by using the native HTML element appropriate for the interaction. Alternatively, using the correct role and associated keyboard support and HTML attributes would suffice.

Manual Test Should Exist

Review interactive elements on the page and ensure the point of failure does not exist, inspecting the DOM where required.

References

• WCAG 1.3.1 (A)
• WCAG 4.1.2 (A)