Axe-core Adds ElementInternals Support for Testing Custom Elements

Deque Systems announced that axe-core, its open-source automated accessibility testing engine, now recognizes accessibility semantics declared inside custom elements through ElementInternals. The support ships starting in axe-core version 4.13.0, and Deque says axe-core is the first automated accessibility testing tool to support ElementInternals in any capacity.

ElementInternals is a custom elements feature that lets a component declare its own accessibility role and state, such as whether it functions as a button, checkbox, or tab, from within its own definition rather than relying on ARIA attributes added externally after the fact. In the update, ElementInternals-based semantics are recognized for the rules most responsible for false positives: aria-allowed-attr, aria-prohibited-attr, aria-required-parent, aria-required-children, and the list/listitem rules.

The update addresses a testing gap for enterprise organizations that standardize component libraries as custom elements so a single component works across multiple frontend frameworks, such as React, Vue, and Angular. Previously, a custom element that correctly declared its accessibility semantics through ElementInternals could be flagged as an accessibility failure during automated testing, because the testing tool could not see that third layer of semantic information.

ElementInternals semantics are invisible to axe-core by default; developers must explicitly give axe-core access for them to be picked up, with guidance published in a GitHub community protocol. Deque recommends that organizations already running axe-core against custom elements upgrade to version 4.13.0 or later and re-run existing test suites to confirm that previously seen false positives are resolved.

The full set of changes is available in the axe-core changelog, with the original feature discussion tracked in GitHub issue #4259.