Buttons
In most cases, for the greatest clarity, use <button> elements for clickable areas.
Best Practices
- Avoid using
<div> or <img> tags to create buttons. Screen readers generally won’t know that either is a usable button.
- If you must use a different HTML element to do the same functionality as a button, use the aria
role='button' to let screen readers know the area is clickable.
- You can also use an input for a button (especially used in forms) as long as it has a
type='button'.
1
2
3
4 | <div role='button'>
Open Modal
</div>
#without this role, a screenreader will not tell the user that the div can be clicked on
|
1 | <input type='button'> Click me </input>
|
Tools & Resources
