a11y/prefer-native-element

Why

A role changes only what is announced. A div role="button" still needs tabindex, Enter and Space handling, a disabled state and form behaviour written by hand, and each missing piece is a bug for keyboard and screen reader users.

Fix

Swap the element: <button type="button">, <a href>, <input type="checkbox">, <h2>, <nav>, <ul>/<li>. Restyle it with CSS (all: unset or a reset) if the look is the reason for the div. Keep a role only where no native element exists (tablist, switch on a checkbox, img on an svg).

Examples

<!-- bad -->
<div role="button" tabindex="0" onclick="save()">Save</div>
<!-- good -->
<button type="button" onclick="save()">Save</button>

Sources

• W3C, ARIA in HTML (document conformance requirements for use of ARIA attributes)
• WAI-ARIA Authoring Practices, Read Me First (no ARIA is better than bad ARIA)

Read it in the terminal

npx github:dawidolko/frontend-skills explain a11y/prefer-native-element