Make custom elements and Web Components accessible

Custom elements that lack ARIA reflection are invisible to screen readers — a button that looks correct visually may be announced as a generic "group" or not at all. ElementInternals provides the bridge between the shadow DOM and the accessibility tree, and it is also the only standards-compliant way to integrate custom inputs with native HTML forms.

Quick Reference

• Prefer native <button>, <input>, <select>, and <details> before building a custom widget
• Use ElementInternals.ariaRole to expose ARIA semantics from the shadow DOM
• Implement form-associated custom elements with ElementInternals for native form participation
• Apply roving tabindex for compound widgets (listbox, toolbar, menu)
• The shadow DOM does not automatically expose ARIA to the accessibility tree without ElementInternals

Check

Inspect these custom element definitions for missing ElementInternals setup, absent ARIA reflection, incomplete keyboard interaction patterns, and lack of form association for input-like components. First verify that the widget truly needs to be custom rather than a native control with styling.

Fix

Add ElementInternals attachment in the constructor, implement ariaRole and ariaLabel reflection, add keyboard event handlers following ARIA authoring patterns, and use formAssociated for custom input elements. Replace the component with native HTML when the native control already supports the required interaction.