HTML accessibility tip: Only add a role if you can't use the ideal HTML tag
HTML accessibility tip:
Only add a role if you can't use the ideal HTML tag. Why? Because many HTML tags automatically apply the proper role.
Example:
Avoid <div role="button">
Prefer <button>
Button automatically has a role of button.
#a11y
Here's a list of roles: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles
Most have the same warning: Use the relevant HTML tag instead of applying a role if possible.
Role is generally only necessary when:
1. You can't use the right HTML tag
2. You're building custom elements that mimic native tags.
These roles are most useful, because there's no corresponding HTML tag:
feed - Represents a dynamic list
img - Group images for a shared description
search - Apply to search input's form tag
switch - For 2 on/off states, like a checkbox
tab - For custom tab control