Aria roles you didn't know you needed

Aria roles are used to tell a screenreader what an element is for.

This is really important when the native HTML element just doesn't exist (eg. roles like toolbar and alert) or when you're using a different HTML element for design or technical reasons (eg. wrapping a radio button to style it).

But please, remember that you should always use the semantic element where you can. This is always the best and most effective solution.

There are six different categories of aria roles:

1. Widget - roles like button, checkbox, separator, tab, or scrollbar
2. Composite - roles like combobox and listbox (these are for dropdown menus), radiogroup, or tree
3. Document structure - this includes article, presentation, figure, feed, and directory
4. Landmark - banner, main, navigation, and region are roles in this category
5. Live region - alert, log, marquee, and status are roles that might update with real-time information
6. Window - alertdialog and dialog are the only two roles in this category

You can check out the full list here: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques#roles