Understand the semantic elements that HTML offers and use them in favor of divs
Clickable <div />
? Try not to do it, if it clearly is a UI control.
Consider: Not every element that is clickable must be a UI control but every click action needs to be accessible from a UI control.
<!-- NO UI CONTROL -->
<div onClick={ (event) => alert('foo') }>
</div>
<!-- actual UI controls -->
<button onClick={ (event) => alert('foo') }>
</button>
<a></a>
<input type="button" />
- Browser is aware
- Keyboard navigation / trigger / outlines out of the box
- out of the box disabled states
- improved screen reader support (already without a11y hints)
We could add all of this to <div>
using custom styling and aria
hints, or we simply use semantic HTML elements that offer it out of the box.-
<section>
<li>
<code>
<header>
<nav>
<p>