Use ARIA only where native HTML is insufficient

When is ARIA necessary, and when is a native HTML element the better solution?

ARIA is only used after native elements have been examined because only these provide semantics and standard operation together. If a necessary role or dynamic state remains unclear, the supplement, including keyboard, focus, and state logic, must be fully implemented.

Native Output Element

• Robust Assistive Technology Output The component is tested with browsers and assistive technologies instead of deriving its accessibility from valid markup.

Use Case: "Role Mockup"

An accordion can initially only be opened by clicking on a heading. The fix replaces the clickable container with a real button, connects it to the content area, and keeps ARIA expanded in sync; arrow key logic is not implemented because the chosen pattern does not require it.

Complete Interaction Pattern

1. First, model the specific user task using `button`, `a`, `input`, `details`, or another suitable native element.

2. Add only the meaning that cannot be expressed natively and fully implement the keyboard, focus, and state logic.

3. Test the finished component in every state using the keyboard and representative screen reader/browser combinations.

Role dummy

• Role dummy A `div` is assigned an ARIA role but lacks both the expected keyboard control and reliable state changes.

• Overridden Semantics Additional attributes modify the already correct native meaning and produce contradictory announcements.

• Unchecked State Transition aria-expanded or aria-selected remains incorrect after an interaction and reports an outdated state to assistive technologies.

Robust Assistive Technology Output

• Percentage of custom interactive components for which the missing native alternative and the chosen ARIA pattern are documented.

• Number of checked states in which role, accessible name, keyboard behavior, and output state remain consistent.

Which questions trigger further checks after "using ARIA only as a targeted supplement"

A suitable in-depth resource is available Writing alt text that describes the image function rather than the image content."How does alt text describe the function of an image instead of just visible details?"

In addition: Avoid JavaScript navigation without true links..

If you want to practically implement "using ARIA only as a targeted supplement," you can refer to Robust Website Systems This focuses on "Native Semantics and Page Structure" and "Native Source Element."

Conclusion: Use ARIA only as a targeted supplement

ARIA can supplement missing semantics, but it cannot repair incomplete interaction behavior. The native element remains the most robust starting point.

Sources and Further Information

These primary sources make the assumptions, system boundaries and test methods for "ARIA should only be used as a targeted supplement" comprehensible.

• Headings – W3C Web Accessibility InitiativeOfficial implementation guide for heading ranks, content organization, and relationships to page regions.

• ARIA in HTML — W3C RecommendationThe current W3C Recommendation defines which ARIA roles and attributes are permissible additions to HTML semantics and which redundant or contradictory uses should be avoided.

• HTML Standard: Semantics – WHATWGPrimary specification for the semantic roles and structures of native HTML elements.