typestar

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

  1. A <button> is focusable, clickable by keyboard, and announced as a button.
  2. A div with a click handler is none of those until you rebuild all three.
  3. 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.

Type this snippet

Step 1 of 4 in Start with the right element, step 1 of 15 in Accessible HTML.

Next →