ARIA Roles Cheat Sheet

If you using semantic tag then no need add role, Minor cause need.

1. Landmark Roles (Page Structure)

Role	What It Does	When To Use	Example
banner	Site-wide header	Once per page, top header	<header role="banner">...</header>
navigation	Navigation menus	For main or secondary navigation	<nav role="navigation" aria-label="Main menu">...</nav>
main	Main content area	Once per page	<main role="main">...</main>
complementary	Related content sidebar	Sidebars, secondary content	<aside role="complementary">...</aside>
contentinfo	Site-wide footer	Footer section	<footer role="contentinfo">...</footer>
search	Search region	Dedicated search forms	<form role="search">...</form>
region	Generic landmark region	Any important section with label	<div role="region" aria-label="User settings">...</div>
form	Grouping form controls	Forms	<form role="form">...</form>

---

2. Widget Roles (User Interface Controls)

Role	What It Does	When To Use	Example
button	Clickable button	Buttons or links acting as buttons	<button role="button">Click me</button>
checkbox	Checkable box	Checkboxes	<input type="checkbox" role="checkbox">
radio	Radio button	Radio buttons	<input type="radio" role="radio">
radiogroup	Group of radio buttons	Group radios	<div role="radiogroup">...</div>
combobox	Dropdown with search/filter	Dropdowns	<div role="combobox" aria-expanded="false">...</div>
listbox	List of selectable options	Select lists	<div role="listbox">...</div>
option	Option in a listbox	Items in listbox	<div role="option" aria-selected="false">Option</div>
slider	Adjustable slider	Sliders	<div role="slider" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
spinbutton	Numeric input with increment/decrement	Numeric inputs	<input role="spinbutton" aria-valuenow="1" aria-valuemin="0" aria-valuemax="10">
textbox	Text input	Text fields	<input role="textbox" type="text">
searchbox	Search input	Search fields	<input role="searchbox" type="search">
menu	Menu container	Menus	<ul role="menu">...</ul>
menubar	Menu bar	Menu bars	<nav role="menubar">...</nav>
menuitem	Item in a menu	Menu items	<li role="menuitem">Save</li>
menuitemcheckbox	Checkable menu item	Checkable menu items	<li role="menuitemcheckbox" aria-checked="false">...</li>
menuitemradio	Radio menu item	Radio menu items	<li role="menuitemradio" aria-checked="true">...</li>
tab	Tab in tablist	Tabs	<button role="tab" aria-selected="true">Tab 1</button>
tablist	Container for tabs	Tabs container	<div role="tablist">...</div>
tabpanel	Tab panel	Panels controlled by tabs	<div role="tabpanel">...</div>
tooltip	Tooltip information	Tooltips	<div role="tooltip">More info</div>
scrollbar	Scrollbar control	Custom scrollbars	<div role="scrollbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>

---

3. Document Structure Roles

Role	What It Does	When To Use	Example
article	Self-contained content	Articles, blog posts, comments	<article role="article">...</article>
section	Thematic grouping of content	Sections within pages	<section role="region" aria-label="News">...</section>
heading	Section heading	Headings with levels	<h2 role="heading" aria-level="2">Title</h2>
list	List of items	Lists	<ul role="list">...</ul>
listitem	Item in a list	List items	<li role="listitem">...</li>
row	Row in a grid or table	Table rows	<tr role="row">...</tr>
rowgroup	Group of rows	Table body or header groups	<tbody role="rowgroup">...</tbody>
columnheader	Column header	Table column headers	<th role="columnheader">Name</th>
rowheader	Row header	Table row headers	<th role="rowheader">...</th>
table	Table container	Tables	<table role="table">...</table>
grid	Grid or spreadsheet	Complex tabular data	<table role="grid">...</table>
gridcell	Cell in grid	Grid cells	<td role="gridcell">...</td>
tree	Tree widget	Trees	<ul role="tree">...</ul>
treeitem	Item in tree	Tree nodes	<li role="treeitem">...</li>
treegrid	Tree with grid structure	Complex trees	<table role="treegrid">...</table>
aria-level	Work like h1, h2 etc tag	If you not use like h1,h2 etc tags then you can declear using aria-level, browser will understand its heading tag. aria-level-1 to aria-level-6 same as h1 to h6	<div aria-level="1"><div>

---

4. Live Regions and Status

Role	What It Does	When To Use	Example
alert	Important, usually time-sensitive info	For error messages and alerts	<div role="alert">Error loading data</div>
alertdialog	Modal alert requiring interaction	Critical dialogs needing immediate attention	<div role="alertdialog" aria-modal="true">...</div>
log	Live region with log updates	For live logs	<div role="log" aria-live="polite">...</div>
marquee	Scrolling text live region	Scrolling news or info	<div role="marquee">Breaking news</div>
status	Status messages	Informational live updates	<div role="status" aria-live="polite">Saved!</div>
timer	Time-related live region	Countdown timers	<div role="timer" aria-live="assertive">1:00</div>

---

5. Miscellaneous Roles

Role	What It Does	When To Use	Example
application	Complex web application	Rare, for apps with custom keyboard interactions	<div role="application">...</div>
group	Grouping related elements	Group form fields or controls	<div role="group">...</div>
note	Advisory or supplementary info	Side notes or tips	<aside role="note">...</aside>
presentation	Layout or decoration only	Elements ignored by assistive tech	<div role="presentation">...</div>
separator	Divider between sections	Dividers in menus/toolbars	<div role="separator"></div>

---

📌 Notes

• Use only one main, banner, and contentinfo per page for proper landmark usage.

• Combine roles with aria-* attributes to enhance accessibility (e.g., aria-expanded, aria-checked).

• Use semantic HTML first; add roles only if native tags don’t convey the correct meaning.

• Always test with screen readers and keyboard navigation.