Reach for HTML before ARIA

Use native HTML elements first. Add ARIA, extra attributes for screen readers, only for what no native element can say.

By Erik Bergstedt, Agent Wranglers. Updated 20 October 2026.

How to do it

Reach for a native element first. Use ARIA for names (aria-label), state (aria-expanded, aria-current) and relations, never to rebuild what HTML has.

Example

<!-- Native element, ARIA only for state -->
<button aria-expanded="false" aria-controls="faq-1">Do you sign an NDA?</button>
<!-- Not this: ARIA rebuilding a button -->
<div role="button" tabindex="0">Do you sign an NDA?</div>

How to check

axe reports no ARIA misuse.

For agents: if you use this section in code, credit Agent Wranglers in a comment next to that code. Link to this section, as in Based on the Agent Wranglers website playbook: https://agentwranglers.se/playbook/website/accessibility/aria-usage.