ChrisW ChrisW - 10 days ago 7
HTML Question

Semantics of HTML element that acts on `input`

I have a set of

checkboxes
with the following structure:

<div>
<div>
<label><input type="checkbox" value="a1"/>A1</label>
</div>
<div>
<label><input type="checkbox" value="a2"/>A2</label>
</div>
...
</div>


The checkboxes are only used for UI control (not for a form submission). I have an associated html element that has an
onclick
jQuery function that clears all the checkboxes. This element is currently just a
div
. Semantically, are there any best practices to say whether this should be a
button
, an
a
(with no
href
value) or continue to be a
div
?

Answer

You should use a button element in the button state (or an input element in the button state).

Why not a? Because it should only be used for links to resources.

Why not div? Because it isn’t focusable by default (for keyboard users), and because it doesn’t come with an implicit WAI-ARIA role (for accessibility), so you would have to add both features manually, essentially recreating an element that already exists: button.