♿ARIA Role Reference
Complete reference guide for WAI-ARIA roles, states, and properties. Searchable with code examples.
Free ARIA role reference. Complete WAI-ARIA roles, states, properties guide. Searchable. Code examples.
53 roles found
bannerlandmarkSite-wide header
Attributes: aria-label
HTML equivalent: <header>
Example:
<header role="banner">...</header>navigationlandmarkNavigation links group
Attributes: aria-label, aria-labelledby
HTML equivalent: <nav>
Example:
<nav aria-label="Main">...</nav>mainlandmarkMain content of the page
Attributes: aria-label
HTML equivalent: <main>
Example:
<main>...</main>complementarylandmarkSupporting content
Attributes: aria-label
HTML equivalent: <aside>
Example:
<aside>...</aside>contentinfolandmarkSite-wide footer
Attributes: aria-label
HTML equivalent: <footer>
Example:
<footer>...</footer>searchlandmarkSearch functionality region
Attributes: aria-label
HTML equivalent: <search> (HTML5.2+)
Example:
<form role="search">...</form>formlandmarkForm landmark
Attributes: aria-label, aria-labelledby
HTML equivalent: <form>
Example:
<form aria-label="Contact">...</form>regionlandmarkGeneric landmark region
Attributes: aria-label (required)
HTML equivalent: <section>
Example:
<section aria-label="Stats">...</section>buttonwidgetClickable button element
Attributes: aria-pressed, aria-expanded, aria-disabled
HTML equivalent: <button>
Example:
<div role="button" tabindex="0">Click</div>linkwidgetHyperlink element
Attributes: aria-disabled
HTML equivalent: <a href>
Example:
<span role="link" tabindex="0">Link</span>checkboxwidgetCheckable input
Attributes: aria-checked (required), aria-disabled
HTML equivalent: <input type="checkbox">
Example:
<div role="checkbox" aria-checked="false" tabindex="0">Option</div>radiowidgetRadio button in a group
Attributes: aria-checked (required)
HTML equivalent: <input type="radio">
Example:
<div role="radio" aria-checked="true">Option</div>textboxwidgetText input field
Attributes: aria-multiline, aria-placeholder, aria-readonly
HTML equivalent: <input>, <textarea>
Example:
<div role="textbox" contenteditable="true">...</div>sliderwidgetRange input slider
Attributes: aria-valuemin, aria-valuemax, aria-valuenow
HTML equivalent: <input type="range">
Example:
<div role="slider" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">...</div>tabwidgetTab in a tablist
Attributes: aria-selected, aria-controls
HTML equivalent: —
Example:
<div role="tab" aria-selected="true" aria-controls="panel1">Tab 1</div>tablistwidgetContainer for tabs
Attributes: aria-orientation
HTML equivalent: —
Example:
<div role="tablist">...</div>tabpanelwidgetContent panel for a tab
Attributes: aria-labelledby
HTML equivalent: —
Example:
<div role="tabpanel" aria-labelledby="tab1">...</div>dialogwidgetDialog/modal window
Attributes: aria-label, aria-modal
HTML equivalent: <dialog>
Example:
<div role="dialog" aria-label="Confirm" aria-modal="true">...</div>alertdialogwidgetAlert dialog requiring response
Attributes: aria-label, aria-modal
HTML equivalent: —
Example:
<div role="alertdialog" aria-label="Warning">...</div>menuwidgetMenu widget
Attributes: aria-orientation
HTML equivalent: —
Example:
<ul role="menu">...</ul>menuitemwidgetItem in a menu
Attributes: aria-disabled
HTML equivalent: —
Example:
<li role="menuitem">Save</li>tooltipwidgetTooltip popup
Attributes: aria-label
HTML equivalent: —
Example:
<div role="tooltip">Help text</div>progressbarwidgetProgress indicator
Attributes: aria-valuemin, aria-valuemax, aria-valuenow
HTML equivalent: <progress>
Example:
<div role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">75%</div>switchwidgetOn/off toggle
Attributes: aria-checked (required)
HTML equivalent: —
Example:
<button role="switch" aria-checked="false">Dark mode</button>comboboxwidgetCombo box input + popup
Attributes: aria-expanded, aria-autocomplete, aria-controls
HTML equivalent: —
Example:
<input role="combobox" aria-expanded="false" aria-controls="listbox1">listboxwidgetList of selectable options
Attributes: aria-multiselectable
HTML equivalent: <select>
Example:
<ul role="listbox">...</ul>optionwidgetOption in a listbox
Attributes: aria-selected
HTML equivalent: <option>
Example:
<li role="option" aria-selected="true">Item</li>treewidgetTree view widget
Attributes: aria-multiselectable
HTML equivalent: —
Example:
<ul role="tree">...</ul>treeitemwidgetItem in a tree
Attributes: aria-expanded, aria-selected
HTML equivalent: —
Example:
<li role="treeitem" aria-expanded="false">Folder</li>gridwidgetInteractive data grid
Attributes: aria-multiselectable, aria-readonly
HTML equivalent: <table>
Example:
<table role="grid">...</table>headingstructureSection heading
Attributes: aria-level (required)
HTML equivalent: <h1>–<h6>
Example:
<div role="heading" aria-level="2">Title</div>liststructureList of items
Attributes: —
HTML equivalent: <ul>, <ol>
Example:
<div role="list">...</div>listitemstructureItem in a list
Attributes: —
HTML equivalent: <li>
Example:
<div role="listitem">Item</div>tablestructureData table
Attributes: aria-label, aria-colcount, aria-rowcount
HTML equivalent: <table>
Example:
<div role="table" aria-label="Users">...</div>rowstructureRow in a table or grid
Attributes: aria-selected
HTML equivalent: <tr>
Example:
<div role="row">...</div>cellstructureCell in a table row
Attributes: —
HTML equivalent: <td>
Example:
<div role="cell">Value</div>columnheaderstructureColumn header cell
Attributes: aria-sort
HTML equivalent: <th>
Example:
<div role="columnheader" aria-sort="ascending">Name</div>rowheaderstructureRow header cell
Attributes: —
HTML equivalent: <th scope='row'>
Example:
<div role="rowheader">Row title</div>separatorstructureDivider between sections
Attributes: aria-orientation, aria-valuemin, aria-valuemax, aria-valuenow
HTML equivalent: <hr>
Example:
<hr role="separator">imgstructureImage or image group
Attributes: aria-label (required)
HTML equivalent: <img>
Example:
<div role="img" aria-label="Logo">...</div>figurestructureFigure with optional caption
Attributes: aria-label
HTML equivalent: <figure>
Example:
<figure>...</figure>groupstructureGroup of UI elements
Attributes: aria-label
HTML equivalent: <fieldset>
Example:
<div role="group" aria-label="Options">...</div>toolbarstructureToolbar of actions
Attributes: aria-label, aria-orientation
HTML equivalent: —
Example:
<div role="toolbar" aria-label="Formatting">...</div>alertliveImportant message (assertive)
Attributes: —
HTML equivalent: —
Example:
<div role="alert">Error: required field.</div>statusliveStatus message (polite)
Attributes: —
HTML equivalent: <output>
Example:
<div role="status">Saved successfully.</div>logliveLog of sequential info
Attributes: —
HTML equivalent: —
Example:
<div role="log">Chat messages...</div>marqueeliveNon-essential scrolling content
Attributes: —
HTML equivalent: —
Example:
<div role="marquee">Breaking news ticker...</div>timerliveCountdown or elapsed timer
Attributes: —
HTML equivalent: —
Example:
<div role="timer">03:45</div>presentationstructureRemoves semantic meaning
Attributes: —
HTML equivalent: —
Example:
<table role="presentation">layout table</table>nonestructureSynonym for presentation
Attributes: —
HTML equivalent: —
Example:
<div role="none">...</div>documentstructureDocument-like content
Attributes: —
HTML equivalent: —
Example:
<div role="document">Article content...</div>applicationlandmarkWeb application region
Attributes: aria-label
HTML equivalent: —
Example:
<div role="application" aria-label="Editor">...</div>feedstructureScrollable list of articles
Attributes: aria-busy
HTML equivalent: —
Example:
<div role="feed">...</div>How to Use ARIA Role Reference — Step by Step
- 1Upload your file using the drag-and-drop zone above, or click to browse your device
- 2Configure any options shown below the upload area
- 3Click the process button and wait a few seconds for the result
- 4Download the processed file — ready to use immediately
Related Tools
Popular on ToolNest
Frequently Asked Questions
Is this tool completely free?
Yes. All ToolNest tools are 100% free with no signup required, no account, and no watermarks added to output files.
Are my uploaded files secure and private?
All uploads use HTTPS encryption during transfer. Files are processed on secure isolated servers and automatically deleted within 2 hours of upload.
Does this tool work on mobile phones?
Yes. ToolNest works on any modern browser on iPhone, Android, tablet, or desktop — no app download or plugin needed.
Do I need to create an account?
No. Just open the tool, upload your file, and download the result. No email, no signup, no password.