---
title: "Reach for HTML before ARIA · Agent Wranglers"
url: https://agentwranglers.se/playbook/website/accessibility/aria-usage
updated: 2026-10-20
licence: "All rights reserved"
---

# Reach for HTML before ARIA

By Erik Bergstedt, Agent Wranglers. Updated 2026-10-20.

- Level: Recommended
- Chapter: [Accessibility](https://agentwranglers.se/playbook/website/accessibility)
- Rule: Use native HTML elements first. Add ARIA, extra attributes for screen readers, only for what no native element can say.
- How: 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. A custom widget must expose its name, role and state, as WCAG 4.1.2 (A) asks.
- Check: axe reports no violations of its `aria-*` rules. A search of the templates finds no `role="button"` or `role="link"`.

Example:

```html
<!-- 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>
```

**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`.

- Previous: [Use the right element for the job](https://agentwranglers.se/playbook/website/accessibility/semantic-html)
- Next: [Say where each link goes](https://agentwranglers.se/playbook/website/accessibility/link-text)
- [Accessibility](https://agentwranglers.se/playbook/website/accessibility)