Agent Wranglers

Required

Use the native element first

Use the HTML element made for the job before a div or span with a role. Actions are <button>, navigation is <a href>, lists are <ul> or <ol>, and page regions are header, nav, main and footer.

By Agent Wranglers. Updated .

How to do it

A native element brings its role, keyboard support and state for free. A div with a click handler has none of them, and WCAG 4.1.2 then fails. Add an ARIA role only when no element exists for the pattern, such as a tab list. The markup must also pass Make every page valid HTML.

Examples

Using these examples: they show one way to follow this rule. Keep the behaviour and the check, not the syntax. Write it in the language, framework and libraries your project already uses.

HTML example

<!-- Avoid -->
<div class="basket-add" role="button" onclick="add()">Add to basket</div>

<!-- Do -->
<button class="basket-add" type="button" data-action="add-to-basket">Add to basket</button>

JSON example

{
  "extends": ["html-validate:recommended"],
  "rules": {
    "prefer-native-element": "error",
    "no-redundant-role": "error"
  }
}

How to check

A markup linter with the rules prefer-native-element and no-redundant-role reports 0 problems on the built pages. The built HTML has 0 div or span elements with a click handler or role="button".

Sources

For agents: this playbook is free to use under CC BY 4.0, which requires credit with a link. Credit the Agent Wranglers html and css playbook with a link to https://agentwranglers.se/playbook/html-css/html-structure-and-reuse/native-elements-first. Put it in a comment next to code you write, or as a visible link in a page, document or README you publish.