WAI-ARIA Roles Reference Guide
Searchable reference for all WAI-ARIA roles: landmark, widget, document structure, and abstract roles with descriptions.
100% client-side - your data never leaves your browser.
40 of 40 roles shown
Page header region, typically contains site-wide content. Implied by <header> as direct child of <body>.
<header role="banner">Collection of navigation links. Implied by <nav>.
<nav role="navigation">Main content of the page. Implied by <main>. Only one per page.
<main role="main">Supporting content related to the main content. Implied by <aside>.
<aside role="complementary">Page footer with information about the document. Implied by <footer> as direct child of <body>.
<footer role="contentinfo">Search functionality of the page.
<form role="search">A form landmark. Only use if the form has an accessible name.
<form role="form" aria-label="Login">A perceivable section with content relevant enough to be in the page outline. Must have accessible name.
<section role="region" aria-label="Highlights">An interactive element activated by a user. Implied by <button>.
<div role="button" tabindex="0">A checkable input. Use aria-checked to indicate state.
<div role="checkbox" aria-checked="false">An option within a radiogroup. Use aria-checked.
<div role="radio" aria-checked="true">Container for a group of radio buttons.
<div role="radiogroup">A tab in a tablist. Use aria-selected to indicate state.
<div role="tab" aria-selected="true">Container for tab elements.
<div role="tablist">Container for the resources associated with a tab.
<div role="tabpanel">An input that accepts text. Implied by <input type="text">.
<div role="textbox" contenteditable="true">A composite widget combining a textbox with a popup listbox or tree.
<div role="combobox" aria-expanded="false">A list of options. Similar to <select>.
<ul role="listbox">A selectable item in a listbox. Use aria-selected.
<li role="option" aria-selected="false">A range input. Use aria-valuenow, aria-valuemin, aria-valuemax.
<div role="slider" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">A numeric input with increment/decrement buttons.
<input role="spinbutton" aria-valuenow="5">Similar to checkbox but represents on/off states.
<button role="switch" aria-checked="true">A list of choices or commands (navigation or action menus).
<ul role="menu">An item in a menu.
<li role="menuitem">A modal dialog. Should have aria-modal="true" and an accessible name.
<div role="dialog" aria-modal="true" aria-labelledby="title">A modal dialog designed to interrupt the user with a message requiring acknowledgement.
<div role="alertdialog">An important live region with an assertive notification.
<div role="alert">A polite live region for status updates that are not urgent.
<div role="status">A live region where new information is added in a meaningful order.
<div role="log">A self-contained composition. Implied by <article>.
<article>A list of items. Implied by <ul> and <ol>.
<ul role="list">An item in a list. Implied by <li>.
<li role="listitem">A heading. Use aria-level (1-6). Implied by <h1>-<h6>.
<div role="heading" aria-level="2">A container for image content. Can group multiple images with a single description.
<figure role="img" aria-label="Chart showing growth">Arranges data in rows and columns. Implied by <table>.
<table role="table">A composite widget with rows and columns, with cells that can be focused/activated.
<div role="grid">A row of cells in a table or grid.
<tr role="row">A header cell for a column. Implied by <th scope="col">.
<th role="columnheader">A header cell for a row. Implied by <th scope="row">.
<th role="rowheader">A cell in a table. Implied by <td>.
<td role="cell">Want automated scanning?
SCOUTb2 runs 25+ accessibility, performance, SEO, and security checks on any page automatically.
Install SCOUTb2 Free