Use the element that already does it in HTML
Every ARIA attribute you add is one the browser would have given you for free.
<!-- All of this, to reach where a button already is -->
<div role="button" tabindex="0" onclick="save()" onkeydown="onKey(event)">
Save
</div>
<!-- The same thing, with the keyboard behavior built in -->
<button type="button" onclick="save()">Save</button>
<!-- A link goes somewhere; a button does something -->
<a href="/settings">Settings</a>
<button type="button" onclick="openDialog()">Preferences</button>
How it works
- A
<button>is focusable, clickable by keyboard, and announced as a button. - A div with a click handler is none of those until you rebuild all three.
- The first rule of ARIA is not to use ARIA when HTML has the element.
The run, in numbers
- Lines
- 11
- Characters to type
- 414
- Tokens
- 62
- Three-star pace
- 70 tpm
At the three-star pace of 70 tokens a minute, this run takes about 53 seconds.
Step 1 of 4 in Start with the right element, step 1 of 15 in Accessible HTML.