Lessons · HTML and CSS · a role does not make it reachable
A role does not make it reachable
role="button" changes what a thing is CALLED. It changes nothing about what it can do.
Hone is a place to practise programming. This is one of its lessons, written out in full and free to read without an account.
What it is for
It is the most consequential misunderstanding about ARIA, and it produces a page that is worse than the one before the fix.
How to think about it
Watch a real Tab press go past it. Making the div work needs the role, tabindex=0, and handlers for both Enter and Space -- all of which <button> already had, and two of which are easy to get subtly wrong.
Worked example
<button id="b">Go</button><div id="d" role="button">Go</div>tabIndex is 0 and -1. The role did not change the -1.
<button id="b1">One</button><div id="d" tabindex="0">Two</div><button id="b2">Three</button>tabindex=0 does put the div in, at its document position: Tab twice and focus is on d.
Your turn
What role= changes about an element.
what it is
Write a page and watch it render
The trap
A div with role=button is arguably worse than a bare one: the user is now told they can press something they cannot reach. No ARIA is better than bad ARIA.