SearchableExamplesBest PracticesFree
29 roles found
role="alert"Live Region

A message with important information. Asserted to screen readers immediately.

Example:
<div role="alert">Form submitted successfully!</div>
role="alertdialog"Window

A dialog that contains an alert message and requires user interaction.

Example:
<div role="alertdialog" aria-labelledby="title">...</div>
role="button"Widget

An interactive element that triggers an action when clicked or pressed.

Example:
<div role="button" tabindex="0">Click me</div>
role="checkbox"Widget

A checkable input with three possible states: true, false, or mixed.

Example:
<div role="checkbox" aria-checked="false" tabindex="0">Agree</div>
role="complementary"Landmark

Supporting content related to the main content. Equivalent to <aside>.

Example:
<div role="complementary">Related articles</div>
role="contentinfo"Landmark

Information about the parent document. Equivalent to <footer>.

Example:
<div role="contentinfo">Copyright 2024</div>
role="dialog"Window

An overlay window that appears above the page content.

Example:
<div role="dialog" aria-modal="true" aria-labelledby="title">...</div>
role="form"Landmark

A region containing form elements. Use with aria-label.

Example:
<div role="form" aria-label="Login form">...</div>
role="heading"Document

A heading for a section. Must have aria-level.

Example:
<div role="heading" aria-level="2">Section Title</div>
role="img"Document

An image. Use when the image is composed of multiple elements.

Example:
<div role="img" aria-label="Company logo">...</div>
role="link"Widget

An interactive reference to a resource.

Example:
<span role="link" tabindex="0">Learn more</span>
role="list"Document

A list of items. Contains role="listitem" children.

Example:
<div role="list"><div role="listitem">Item 1</div></div>
role="log"Live Region

A region where new information is added in a meaningful order.

Example:
<div role="log" aria-live="polite">Chat messages...</div>
role="main"Landmark

The main content of the document. Equivalent to <main>.

Example:
<div role="main">Primary content</div>
role="menu"Widget

A list of choices or actions, like a context menu.

Example:
<ul role="menu"><li role="menuitem">Save</li></ul>
role="navigation"Landmark

A collection of navigational links. Equivalent to <nav>.

Example:
<div role="navigation" aria-label="Main">...</div>
role="progressbar"Widget

Displays the progress of a task.

Example:
<div role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">75%</div>
role="radio"Widget

A checkable input in a group where only one can be checked at a time.

Example:
<div role="radio" aria-checked="true" tabindex="0">Option A</div>
role="region"Landmark

A perceivable section with a specific purpose. Use with aria-label.

Example:
<section role="region" aria-label="Search results">...</section>
role="search"Landmark

A region containing a search facility.

Example:
<div role="search"><input type="search" /></div>
role="separator"Document

A divider between sections of content.

Example:
<div role="separator"></div>
role="slider"Widget

An input that allows selecting a value from a range.

Example:
<div role="slider" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" tabindex="0">50</div>
role="status"Live Region

A container for advisory information that is not important enough for alert.

Example:
<div role="status">3 results found</div>
role="tab"Widget

A tab in a tablist. Controls a tabpanel.

Example:
<button role="tab" aria-selected="true" aria-controls="panel1">Tab 1</button>
role="tablist"Widget

A list of tab elements.

Example:
<div role="tablist">...</div>
role="tabpanel"Widget

A container for the content associated with a tab.

Example:
<div role="tabpanel" id="panel1" aria-labelledby="tab1">Content</div>
role="timer"Live Region

A region containing a numerical counter tracking elapsed time.

Example:
<div role="timer" aria-live="off">00:30</div>
role="tooltip"Widget

A contextual popup showing a description for an element.

Example:
<div role="tooltip" id="tip1">Helpful info</div>
role="tree"Widget

A hierarchical list. Contains treeitem children.

Example:
<ul role="tree"><li role="treeitem">Folder</li></ul>

Frequently Asked Questions

What is ARIA?
ARIA (Accessible Rich Internet Applications) is a set of attributes that define ways to make web content and applications more accessible to people with disabilities.
When should I use ARIA?
Use ARIA when native HTML elements cannot provide the needed semantics. The first rule of ARIA is: if you can use a native HTML element, do so instead.
Do ARIA roles change behavior?
No. ARIA only changes the accessibility tree. It does not add any functionality, keyboard handling, or visual styling.
Share:Copied!
Was this tool helpful?

Get a free API key + new tools as they ship

100 calls/day, no card, no spam. Built by one person, in public.

About ARIA Ref

ARIA Ref is a free, browser-based utility designed to make developer and design work as quick and frictionless as possible. Everything happens client-side, which means your files and data never leave your machine. The interface is intentionally minimal so you can focus on the task instead of learning the tool. Like everything else in the developer collection, it is free, ad-light, and works on mobile as well as desktop.

When you'd reach for ARIA Ref

  • You're hitting the daily limit of a paid SaaS and need a backup option for a single quick job.

    Marketers and ops people whose primary tool is metered.

    Stay productive without burning credits.

  • You need to handle a one-off task right before a meeting and don't have time to install anything.

    Anyone working remotely on a borrowed or restricted machine.

    Open the page, get the result, paste it into your doc — under a minute.

  • You're cleaning up a folder of files that accumulated over a project and need to standardize them.

    Designers, writers, and developers wrapping up deliverables.

    Drop each file in, copy the output, move on.

  • You're on a public or shared machine and don't want to leave traces of what you're working on.

    Travelers, contractors, anyone working from a friend's computer.

    Nothing is uploaded, nothing persists if you're not signed in.

Frequently asked about ARIA Ref

Is ARIA Ref really free?
Yes — ARIA Ref is free for unlimited personal use, with no account required and no watermark on the output.
Can I use ARIA Ref commercially?
Yes. The output of ARIA Ref belongs entirely to you, with no licensing restrictions.
Do I need to create an account to use ARIA Ref?
No. ARIA Ref works without any signup. We only ask for an email if you decide to subscribe to a paid plan.
Are my files uploaded to a server when I use ARIA Ref?
ARIA Ref processes everything in your browser using local APIs. Your files never leave your device.
Will ARIA Ref change my original file?
Never. ARIA Ref only reads your input file and produces a new output file.

Deep Dive: Related Research

Developer Productivity Tools Analysis 2026: 50 Tools Compared

11,000 words · 23 min read

The Complete JavaScript Reference Guide 2026: Every Feature, Method & API Explained

30,000 words · 65 min read

Explore More