TL;DR
Semantic button = actual button = accessible:
✓<button onClick={doSomething}> Click me </button>Non-semantic button = pretend button = not accessible:
x<div onClick={doSomething}> Click me </div>x<span onClick={doSomething}> Click me </span>Semantic HTML; let browsers do their magic
Most HTML elements are semantic elements.
Semantic = meaningful.
The special thing about semantic elements is that browsers add default functionality to them. These elements have different default behaviour depending on what the element is (a button, a link, a heading, etc.).
This is a semantic button:
✓<button onClick={doSomething}> Click me </button>
Default functionality of semantic buttons includes being able to get to them using the tab key and being able to click them using the enter key.
Non-semantic elements: divs and spans
HTML also has a few non-semantic elements. These don't have any meaning and are only meant for styling. Browsers don't add any default functionality to non-semantic elements.
One example of a non-semantic element is a div, which is used to group elements and style them together. Another example is a span, which is handy to style a particular phrase within a block of text.
It's problematic when onclick events are added to divs and spans like this:
x<div onClick={doSomething}> Click me </div>
x<span onClick={doSomething}> Click me </span>
Browsers can't read the developer's mind and magically know that these non meaningful elements were actually supposed to be buttons!
The onClick means that a function will run when you click the element with a mouse. But because the default button functionality isn't added by the browser, these 'buttons' can't be clicked using the keyboard. And keyboard users aren't the only people who can't access these non-semantic buttons!
Which users do semantic and non-semantic buttons work for by default? | Non-semantic | Semantic |
|---|
| Mouse | ✓ | ✓ |
|---|
| Keyboard | x | ✓ |
|---|
| Screen reader | x | ✓ |
|---|
| Speech control | x | ✓ |
|---|
This is a really common accessibility issue. Have a look out for it on your favourite websites. Hamburger menus are a classic culprit!