A
HTML Equivalent
N/A — use aria-live="assertive" alternativelyA type of live region with important, and usually time-sensitive, information. Screen readers will immediately announce content added to this region, interrupting the current task. Use sparingly — only for truly urgent messages such as form validation errors or session timeout warnings.
⌨ Keyboard Interaction
Not focusable. Content is announced automatically.
⚠ Notes
Do not use for status messages that are not time-critical. Prefer role="status" for low-priority messages.
Supported properties
aria-atomicaria-live
<div role="alert" aria-atomic="true">
Your session expires in 2 minutes.
</div>
HTML Equivalent
<dialog> (with alert content)A type of dialog that contains an alert message, where initial focus goes to an element within the dialog. Unlike role="dialog", an alertdialog is modal and requires immediate user attention. The screen reader will announce the dialog's accessible name and the alert message.
⌨ Keyboard Interaction
Focus is trapped within the dialog. Esc key should close if dismissible.
⚠ Notes
Must have an accessible name. Move focus to the first focusable element inside on open. Return focus to the trigger element on close.
Required properties
aria-labelledby or aria-label
Supported properties
aria-labelledbyaria-labelaria-describedbyaria-modal
<div role="alertdialog"
aria-labelledby="dlg-title"
aria-describedby="dlg-desc"
aria-modal="true">
<h2 id="dlg-title">Confirm deletion</h2>
<p id="dlg-desc">This action cannot be undone.</p>
<button>Delete</button>
<button>Cancel</button>
</div>
B
HTML Equivalent
<button>, <input type="button">, <input type="submit">An input that allows users to trigger an action. Can be a native HTML <button> or a custom element with role="button". When applied to a non-button element, keyboard interaction must be implemented manually: Enter and Space keys must activate the button.
⌨ Keyboard Interaction
Enter and Space activate the button.
⚠ Notes
Never use role="button" on an <a> element with an href. Use <button> elements wherever possible — they provide native keyboard handling and accessible name computation.
Supported properties
aria-expandedaria-haspopuparia-pressedaria-disabledaria-labelaria-labelledby
<!-- Preferred: native element -->
<button type="button" aria-pressed="false">
Toggle dark mode
</button>
<!-- Custom element (add JS keyboard handler) -->
<div role="button" tabindex="0"
aria-label="Close panel">✕</div>
C
HTML Equivalent
<input type="checkbox">A checkable input that has three possible values: true (checked), false (unchecked), or mixed (indeterminate). The aria-checked attribute is required to communicate state. Mixed state is used for tri-state checkboxes such as a "select all" parent checkbox.
⌨ Keyboard Interaction
Space toggles the checked state.
⚠ Notes
Do not use role="checkbox" on the native <input type="checkbox"> — it already has an implicit checkbox role. Only use on custom elements.
Required properties
aria-checked
Supported properties
aria-checkedaria-disabledaria-labelaria-labelledbyaria-describedbyaria-requiredaria-readonly
<!-- Preferred: native element -->
<label>
<input type="checkbox" checked> Subscribe
</label>
<!-- Custom element -->
<div role="checkbox"
aria-checked="true"
tabindex="0"
aria-label="Subscribe to newsletter">
</div>
HTML Equivalent
No native equivalent — closest is <select> or <datalist>A composite widget containing a single-line textbox and a popup element (listbox, grid, tree, or dialog) that can suggest values for the textbox. The popup is triggered by user input or explicitly via a control. Requires careful ARIA attribute management: aria-expanded, aria-controls, and aria-activedescendant.
⌨ Keyboard Interaction
Down Arrow opens and moves to first option. Up/Down navigate options. Enter selects. Esc closes. Home/End move to first/last option.
⚠ Notes
Follow the ARIA Authoring Practices Guide (APG) combobox pattern exactly. Incorrect implementation is a common source of accessibility failures.
Required properties
aria-expandedaria-controls
Supported properties
aria-expandedaria-controlsaria-activedescendantaria-autocompletearia-requiredaria-labelaria-labelledby
<label id="fruit-label">Favourite fruit</label>
<input role="combobox"
aria-labelledby="fruit-label"
aria-expanded="true"
aria-controls="fruit-list"
aria-autocomplete="list"
type="text" value="ban" />
<ul id="fruit-list" role="listbox">
<li role="option" aria-selected="false">Banana</li>
<li role="option" aria-selected="false">Blackberry</li>
</ul>
A supporting section of the document designed to be complementary to the main content but meaningful even when separated from the main content. Rendered as an <aside> landmark. Screen readers expose this as a landmark region that users can navigate to directly.
⌨ Keyboard Interaction
Not interactive — landmark navigation only (F6 in some screen readers, or by landmark list).
⚠ Notes
Use aria-label to differentiate multiple complementary regions on the same page. Avoid using for content that only makes sense in context of the main content.
Supported properties
aria-labelaria-labelledby
<aside aria-label="Related articles">
<h2>You might also like</h2>
<ul>
<li><a href="/article-1">Article one</a></li>
</ul>
</aside>
HTML Equivalent
<footer> (when direct child of <body>)A perceivable region that contains information about the parent document, such as copyrights, privacy statements, and links to preference settings. Corresponds to the <footer> element when it is a descendant of <body>. Only one contentinfo landmark per page is recommended.
⌨ Keyboard Interaction
Not interactive — landmark navigation only.
⚠ Notes
Do not use <footer role="contentinfo"> — the semantic is redundant. A <footer> inside an <article> or <section> does not carry the contentinfo role implicitly.
Supported properties
aria-labelaria-labelledby
<footer>
<p>© 2025 Acme Corp</p>
<nav aria-label="Footer">
<a href="/privacy">Privacy</a>
<a href="/terms">Terms</a>
</nav>
</footer>
D
A modal or non-modal window that is separate from the rest of the page and contains interactive controls. Focus must be moved into the dialog on open, and focus must be trapped within it until it is dismissed. Return focus to the triggering element on close.
⌨ Keyboard Interaction
Tab and Shift+Tab cycle through focusable elements. Esc closes the dialog (if dismissible). Focus trap must be implemented manually for custom dialogs.
⚠ Notes
Use aria-modal="true" to hint to screen readers that the rest of the page is inert. But note: aria-modal alone does not create a focus trap — you must implement one in JavaScript.
Required properties
aria-labelledby or aria-label
Supported properties
aria-labelledbyaria-labelaria-describedbyaria-modal
<div role="dialog"
aria-labelledby="modal-title"
aria-modal="true">
<h2 id="modal-title">Edit your profile</h2>
<form>
<label for="name">Name</label>
<input id="name" type="text" />
<button type="submit">Save</button>
<button type="button">Cancel</button>
</form>
</div>
F
HTML Equivalent
<form> (only when it has an accessible name)A landmark region that contains a collection of items and objects that, as a whole, combine to create a form. The form landmark is only exposed to assistive technologies when the form has an accessible name (aria-label or aria-labelledby). A <form> without a name is not announced as a landmark.
⌨ Keyboard Interaction
Not interactive as a landmark — individual form controls have their own interaction patterns.
⚠ Notes
Use search role for search forms instead of form. If you have a single form on the page with no accessible name, it will not be announced as a landmark region.
Required properties
aria-label or aria-labelledby (to be exposed as landmark)
Supported properties
aria-labelaria-labelledby
<form aria-labelledby="checkout-heading">
<h2 id="checkout-heading">Checkout</h2>
<label for="email">Email</label>
<input id="email" type="email" required />
<button type="submit">Place order</button>
</form>
G
HTML Equivalent
<table> (with interactive cells)A composite widget containing a collection of one or more rows with one or more cells for organizing information and/or interactive controls in a tabular format. Grids are interactive: cells can be focusable and editable. For static data tables, use the table role instead.
⌨ Keyboard Interaction
Arrow keys navigate between cells. Enter or F2 may activate cell editing. Tab moves to the next interactive element outside the grid.
⚠ Notes
Use role="gridcell" for data cells, role="columnheader" and role="rowheader" for headers. Do not use for non-interactive data — use role="table" instead.
Supported properties
aria-rowcountaria-colcountaria-labelaria-labelledbyaria-multiselectablearia-readonly
<table role="grid" aria-label="Task list">
<thead>
<tr>
<th scope="col">Task</th>
<th scope="col">Owner</th>
<th scope="col">Status</th>
</tr>
</thead>
<tbody>
<tr>
<td role="gridcell">Write report</td>
<td role="gridcell">
<button>Assign</button>
</td>
<td role="gridcell">In progress</td>
</tr>
</tbody>
</table>
HTML Equivalent
<td> (in an interactive grid)A cell in a grid or treegrid. Must be contained within a row. Can be focusable and editable. When editable, the cell must indicate its editable state and communicate changes to assistive technologies.
⌨ Keyboard Interaction
Arrow keys navigate. Enter or F2 activates edit mode (if editable). Esc cancels editing.
⚠ Notes
Must be owned by a row within a grid or treegrid element.
Supported properties
aria-selectedaria-expandedaria-readonlyaria-requiredaria-colspanaria-rowspan
<tr>
<td role="gridcell"
aria-selected="false"
aria-readonly="false"
contenteditable="true">
Budget Q1
</td>
</tr>
HTML Equivalent
<fieldset> (for form groups), <details>A set of user interface objects that forms part of a larger composite widget. Unlike region, a group is not listed in landmark navigation. Use it to associate a set of related controls (e.g., a set of radio buttons) that do not need to be a landmark.
⌨ Keyboard Interaction
Depends on contained widgets.
⚠ Notes
Prefer <fieldset> + <legend> for radio button groups and checkbox groups — native grouping is more reliable across screen readers.
Supported properties
aria-labelaria-labelledbyaria-describedbyaria-activedescendant
<!-- For form controls use fieldset/legend -->
<fieldset>
<legend>Delivery preference</legend>
<label>
<input type="radio" name="delivery" value="email" />
Email
</label>
<label>
<input type="radio" name="delivery" value="post" />
Post
</label>
</fieldset>
<!-- Non-form widget group -->
<div role="group" aria-label="Text formatting">
<button aria-pressed="false">Bold</button>
<button aria-pressed="false">Italic</button>
</div>
H
HTML Equivalent
<h1> through <h6>A heading for a section of the page. Must be accompanied by aria-level (1–6) to indicate its position in the document hierarchy. The heading level communicates document structure to screen reader users who use heading navigation (H key in most screen readers).
⌨ Keyboard Interaction
Not interactive. Screen reader users navigate via H key.
⚠ Notes
Do not skip heading levels (e.g., h1 → h3). Never use role="heading" on an element that is not actually a heading. Prefer native <h1>–<h6> elements.
Required properties
aria-level
Supported properties
aria-levelaria-label
<!-- Prefer native elements always -->
<h1>Page title</h1>
<h2>Section heading</h2>
<!-- Custom element (avoid if possible) -->
<div role="heading" aria-level="2">
Section heading
</div>
I
HTML Equivalent
<img>, <figure>, <svg>A container for a collection of elements that form an image. Used when an image is composed of multiple HTML elements (e.g., SVG with multiple paths). Must have an accessible name via aria-label or aria-labelledby.
⌨ Keyboard Interaction
Not focusable unless interactive.
⚠ Notes
For a single <img>, the alt attribute is the correct approach. Use role="img" on the container when a group of elements together constitute a single image (e.g., an icon composed of multiple SVG paths).
Required properties
aria-label or aria-labelledby
Supported properties
aria-labelaria-labelledby
<!-- Single image: use alt attribute -->
<img src="chart.png"
alt="Bar chart: 40% increase in Q3" />
<!-- Composite SVG image -->
<svg role="img" aria-label="Company logo"
focusable="false">
<use href="#logo-paths" />
</svg>
<!-- Decorative: empty alt -->
<img src="divider.png" alt="" />
L
HTML Equivalent
<a href="...">An interactive reference to an internal or external resource that, when activated, causes the user agent to navigate to that resource. Screen readers typically announce link purpose and whether it opens a new window or points to a file type.
⌨ Keyboard Interaction
Enter activates the link.
⚠ Notes
Never use role="link" on a <button>. An <a> without an href is not a link — it is a static text element. Use <a href="#"> or a real <button> for JavaScript actions.
Supported properties
aria-labelaria-labelledbyaria-describedbyaria-expandedaria-haspopup
<!-- Preferred: native element -->
<a href="/about">About us</a>
<!-- Opens new tab — announce it -->
<a href="/report.pdf"
target="_blank"
aria-label="Annual report (opens in new tab)">
Annual report
</a>
HTML Equivalent
<ul>, <ol>A section containing listitem elements. Communicates to screen readers that items are related and part of a group, typically with item count. Some browsers suppress this role when list styling (bullets) is removed — use role="list" explicitly if you remove list-style.
⌨ Keyboard Interaction
Not interactive — depends on contained listitems.
⚠ Notes
Safari/VoiceOver suppresses list semantics when CSS list-style: none is applied. If your design requires hidden bullets, add role="list" explicitly to preserve semantics.
Supported properties
aria-labelaria-labelledby
<!-- Preferred: native elements -->
<ul aria-label="Required documents">
<li>Passport</li>
<li>Utility bill</li>
</ul>
<!-- Safari removes list semantics with
list-style: none — add role to restore -->
<ul role="list">
<li>Item one</li>
<li>Item two</li>
</ul>
HTML Equivalent
<select> (single or multiple)A widget that allows the user to select one or more items from a list of choices. Unlike a combobox, a listbox is always visible (not in a popup). Used for accessible custom select dropdowns. Each option inside a listbox has role="option".
⌨ Keyboard Interaction
Up/Down arrows navigate. Space selects (multi-select). Home/End jump to first/last. Type-ahead filtering is optional but recommended.
⚠ Notes
Listbox is complex to implement correctly. Strongly prefer the native <select> element for simple selection scenarios.
Supported properties
aria-activedescendantaria-multiselectablearia-requiredaria-labelaria-labelledby
<label id="colour-label">Favourite colour</label>
<ul role="listbox"
aria-labelledby="colour-label"
aria-activedescendant="opt-blue"
tabindex="0">
<li role="option" id="opt-red"
aria-selected="false">Red</li>
<li role="option" id="opt-blue"
aria-selected="true">Blue</li>
<li role="option" id="opt-green"
aria-selected="false">Green</li>
</ul>
A single item in a list or directory. Must be contained within a list or group element. Screen readers announce the item position within the total list count (e.g., 'Item 3 of 7').
⌨ Keyboard Interaction
Not interactive — depends on contained elements.
⚠ Notes
Do not use role="listitem" outside of a role="list" parent. Set aria-setsize and aria-posinset when the full list is not in the DOM (e.g., virtual scrolling).
Supported properties
aria-levelaria-posinsetaria-setsize
<ul>
<li>First item</li>
<!-- Virtual / paginated list: communicate position -->
<li role="listitem"
aria-setsize="100"
aria-posinset="5">
Item 5 of 100
</li>
</ul>
A type of live region where new information is added in meaningful order and old information may disappear. Comparable to a chat log or system message log. Screen readers will queue announcements from this region rather than interrupting the current reading.
⌨ Keyboard Interaction
Not focusable. Content is announced automatically (politely).
⚠ Notes
Default aria-live value for role="log" is 'polite'. Do not override with 'assertive' unless truly urgent.
Supported properties
aria-livearia-atomicaria-relevant
<div role="log"
aria-live="polite"
aria-label="Chat messages">
<p><strong>Alice:</strong> Hello!</p>
<p><strong>Bob:</strong> Hi there.</p>
</div>
M
The main content of a document. There should be only one main landmark per page. Screen reader users can jump to this landmark directly using a keyboard shortcut (e.g., Q in VoiceOver). It is the target of a 'Skip to content' link (SC 2.4.1).
⌨ Keyboard Interaction
Not interactive — landmark navigation only.
⚠ Notes
Never hide the main element. Pair with a 'Skip to main content' link at the top of the page. Only one <main> per page is recommended.
Supported properties
aria-labelaria-labelledby
<!-- Pair with a skip link -->
<a href="#main-content" class="skip-link">
Skip to main content
</a>
<main id="main-content">
<h1>Dashboard</h1>
<!-- page content -->
</main>
HTML Equivalent
N/A (the <marquee> HTML element is deprecated)A type of live region where non-essential information changes frequently. Screen readers may not announce this content at all, or announce it with very low priority. Corresponds to scrolling ticker-style content.
⌨ Keyboard Interaction
Not focusable.
⚠ Notes
Automatically moving content must have a pause/stop mechanism (SC 2.2.2). Avoid marquee for important information — use static text or a controlled live region.
Supported properties
aria-labelaria-labelledby
<!-- Use a controlled live region instead -->
<div role="marquee" aria-label="Stock ticker">
<span>AAPL +2.3%</span>
<span>GOOGL −0.5%</span>
</div>
<!-- SC 2.2.2: provide a pause control -->
<button aria-pressed="false">Pause ticker</button>
A type of widget that offers a list of choices to the user, such as a set of actions or functions the web application can perform. Should not be used for site navigation menus — use role="navigation" with a list of links instead.
⌨ Keyboard Interaction
Up/Down navigate items. Left/Right may open/close submenus. Enter activates. Esc closes. Home/End jump to first/last item.
⚠ Notes
role="menu" is for application menus (like desktop app menus), not website navigation. Use <nav> with a <ul> for site navigation.
Supported properties
aria-activedescendantaria-labelaria-labelledbyaria-orientation
<button aria-haspopup="true"
aria-expanded="false"
aria-controls="file-menu"
id="file-btn">
File
</button>
<ul role="menu"
id="file-menu"
aria-labelledby="file-btn">
<li role="menuitem">New</li>
<li role="menuitem">Open</li>
<li role="separator"></li>
<li role="menuitem">Exit</li>
</ul>
A presentation of menu that usually remains visible and is usually presented horizontally. A common example is the top-level application menu bar (File, Edit, View). Requires keyboard interaction patterns that mirror native OS menu bars.
⌨ Keyboard Interaction
Left/Right navigate top-level items. Down opens submenu. Esc closes submenu. Home/End jump to first/last item.
⚠ Notes
Do not use for site navigation bars. The ARIA Authoring Practices Guide (APG) has a complete menubar pattern with all required keyboard interactions.
Supported properties
aria-activedescendantaria-labelaria-labelledbyaria-orientation
<ul role="menubar" aria-label="Application menu">
<li role="none">
<button role="menuitem"
aria-haspopup="true"
aria-expanded="false">
File
</button>
</li>
<li role="none">
<button role="menuitem"
aria-haspopup="true"
aria-expanded="false">
Edit
</button>
</li>
</ul>
An option in a set of choices contained by a menu or menubar. When the menuitem performs an action, use role="menuitem". For checkable items, use menuitemcheckbox or menuitemradio.
⌨ Keyboard Interaction
Enter or Space activates. Arrow keys navigate within menu. Esc closes menu.
⚠ Notes
Must be owned by a menu or menubar container. Use aria-disabled (not the disabled HTML attribute) for disabled menu items that should still be keyboard-focusable.
Supported properties
aria-disabledaria-expandedaria-haspopuparia-labelaria-labelledbyaria-setsizearia-posinset
<ul role="menu" aria-label="Edit menu">
<li role="menuitem" tabindex="-1">Cut</li>
<li role="menuitem" tabindex="-1">Copy</li>
<li role="menuitem" tabindex="-1">Paste</li>
</ul>
A menuitem with a checkable state whose possible values are true, false, or mixed. Corresponds to a menu item that toggles a setting on or off (e.g., View > Show Toolbar).
⌨ Keyboard Interaction
Space toggles checked state. Enter activates and may close menu.
⚠ Notes
Must be contained in a menu element. The aria-checked state must update immediately when the item is activated.
Required properties
aria-checked
Supported properties
aria-checkedaria-disabledaria-labelaria-labelledby
<ul role="menu" aria-label="View options">
<li role="menuitemcheckbox"
aria-checked="true"
tabindex="-1">
Show toolbar
</li>
<li role="menuitemcheckbox"
aria-checked="false"
tabindex="-1">
Show sidebar
</li>
</ul>
A checkable menuitem in a set of elements with the same role, only one of which can be checked at a time. Corresponds to a mutually exclusive menu option (e.g., View > Zoom > 100% / 150% / 200%).
⌨ Keyboard Interaction
Enter or Space selects and unchecks siblings. Arrow keys navigate.
⚠ Notes
Group mutually exclusive menuitemradio elements inside a group element. Only one item in the group may have aria-checked="true".
Required properties
aria-checked
Supported properties
aria-checkedaria-disabledaria-labelaria-labelledbyaria-posinsetaria-setsize
<ul role="menu" aria-label="Text size">
<li role="menuitemradio"
aria-checked="false" tabindex="-1">Small</li>
<li role="menuitemradio"
aria-checked="true" tabindex="-1">Medium</li>
<li role="menuitemradio"
aria-checked="false" tabindex="-1">Large</li>
</ul>
N
A collection of navigational elements (usually links) for navigating the document or related documents. Multiple navigation landmarks on a page must be distinguished with aria-label or aria-labelledby (e.g., 'Primary', 'Footer').
⌨ Keyboard Interaction
Not interactive — landmark navigation only. Links inside are standard interactive elements.
⚠ Notes
Do not wrap every list of links in a nav element — only use it for major navigation blocks. Unlabelled duplicate nav elements confuse screen reader users.
Supported properties
aria-labelaria-labelledby
<nav aria-label="Main navigation">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>
<!-- Second nav on same page needs distinct label -->
<nav aria-label="Breadcrumb">
<ol>
<li><a href="/">Home</a></li>
<li><a href="/products">Products</a></li>
<li aria-current="page">Widget Pro</li>
</ol>
</nav>
A synonym for role="presentation". Removes all semantic meaning from an element and its descendants. Use to suppress the native semantics of an HTML element when the element is used purely for layout purposes.
⌨ Keyboard Interaction
The element is effectively invisible to assistive technologies.
⚠ Notes
Cannot be used on focusable elements. If an element is focusable, the none/presentation role is ignored. Use for layout tables and decorative containers.
<!-- Remove semantics from layout table -->
<table role="none">
<tr>
<td>Left column</td>
<td>Right column</td>
</tr>
</table>
<!-- Icon with adjacent visible text label -->
<svg role="none" focusable="false">
<use href="#icon-star" />
</svg>
<span>Favourite</span>
O
HTML Equivalent
<option> (inside a <select>)A selectable item in a listbox. Each selectable item in a custom select dropdown or combobox popup must have this role. Must be associated with a parent listbox.
⌨ Keyboard Interaction
Arrow keys navigate. Space or Enter selects (depending on context). Type-ahead allowed.
⚠ Notes
Must be owned by a listbox element. aria-selected="true" communicates the selected state. If the listbox is multi-select, aria-selected is used for each individually selected item.
Required properties
aria-selected
Supported properties
aria-selectedaria-disabledaria-labelaria-checkedaria-posinsetaria-setsize
<ul role="listbox"
aria-label="Country"
aria-activedescendant="opt-gb"
tabindex="0">
<li role="option" id="opt-de"
aria-selected="false">Germany</li>
<li role="option" id="opt-gb"
aria-selected="true">United Kingdom</li>
<li role="option" id="opt-fr"
aria-selected="false">France</li>
</ul>
P
An element whose implicit native role semantics will not be mapped to the accessibility API. Identical to role="none". Used to suppress semantics for layout elements (e.g., a table used for visual layout, not data).
⌨ Keyboard Interaction
Element is hidden from accessibility tree.
⚠ Notes
The role is ignored if the element is focusable. Do not use on form controls, links, or buttons.
<!-- Layout table with no semantic meaning -->
<table role="presentation">
<tr>
<td><img src="logo.png" alt="Acme" /></td>
<td><h1>Acme Products</h1></td>
</tr>
</table>
<!-- Icon when adjacent text label exists -->
<span role="presentation" aria-hidden="true">★</span>
<span>Favourite</span>
HTML Equivalent
<progress>An element that displays the progress status for tasks that take a long time. If the current value is indeterminate (e.g., a spinner), omit aria-valuenow. For determinate progress, provide aria-valuenow, aria-valuemin, and aria-valuemax.
⌨ Keyboard Interaction
Not interactive — read-only status indicator.
⚠ Notes
Use aria-valuetext to provide a human-readable value (e.g., 'Step 3 of 5' instead of '60'). For indeterminate progress, set aria-valuenow to a non-numeric value or omit it entirely.
Supported properties
aria-valuenowaria-valueminaria-valuemaxaria-valuetextaria-labelaria-labelledby
<!-- Determinate progress -->
<div role="progressbar"
aria-valuenow="45"
aria-valuemin="0"
aria-valuemax="100"
aria-label="Upload progress">
<div style="width: 45%"></div>
</div>
<!-- Indeterminate (unknown duration) -->
<div role="progressbar"
aria-label="Loading results"
aria-valuetext="Loading…">
</div>
R
HTML Equivalent
<input type="radio">A checkable input in a group of role elements with the same name, where no more than one of the buttons can be checked at a time. The group must be marked up with role="radiogroup" or the HTML <fieldset> + <legend> pattern.
⌨ Keyboard Interaction
Arrow keys move between radio buttons and automatically check the new one. Space checks the current radio button.
⚠ Notes
Use native <input type="radio"> inside a <fieldset> wherever possible. If using custom elements, the parent must be role="radiogroup" and contain all related radio buttons.
Required properties
aria-checked
Supported properties
aria-checkedaria-disabledaria-requiredaria-labelaria-labelledbyaria-posinsetaria-setsize
<!-- Preferred: native elements -->
<fieldset>
<legend>Preferred contact method</legend>
<label>
<input type="radio" name="contact" value="email" />
Email
</label>
<label>
<input type="radio" name="contact" value="phone" />
Phone
</label>
</fieldset>
<!-- Custom radio button -->
<div role="radio"
aria-checked="true"
tabindex="0">Medium</div>
HTML Equivalent
<fieldset> with <legend>A group of radio buttons. Provides a grouping context for a set of radio buttons, allowing users to understand they are mutually exclusive. Must be labelled with aria-label or aria-labelledby.
⌨ Keyboard Interaction
See role="radio".
⚠ Notes
The native <fieldset>/<legend> combination is more reliable. Use role="radiogroup" only when the native approach is not possible.
Required properties
aria-labelledby or aria-label
Supported properties
aria-labelaria-labelledbyaria-describedbyaria-requiredaria-readonlyaria-orientation
<div role="radiogroup"
aria-labelledby="plan-label"
aria-required="true">
<p id="plan-label">Select a plan</p>
<div role="radio" aria-checked="true"
tabindex="0">Basic — €9/mo</div>
<div role="radio" aria-checked="false"
tabindex="-1">Pro — €29/mo</div>
<div role="radio" aria-checked="false"
tabindex="-1">Team — €99/mo</div>
</div>
HTML Equivalent
<section> (when it has an accessible name)A perceivable section containing content that is relevant to a specific, author-specified purpose and sufficiently important that users will likely want to be able to navigate to the section easily. Only exposed as a landmark when the section has an accessible name.
⌨ Keyboard Interaction
Not interactive — landmark navigation only.
⚠ Notes
A <section> without an accessible name is not exposed as a landmark. Use sparingly — only for content that is so significant users would want to navigate directly to it.
Required properties
aria-label or aria-labelledby (to be exposed as landmark)
Supported properties
aria-labelaria-labelledby
<section aria-labelledby="shipping-heading">
<h2 id="shipping-heading">Shipping details</h2>
<p>Estimated delivery: 3–5 working days</p>
</section>
<!-- When no semantic element fits -->
<div role="region" aria-label="Live scores">
<!-- dynamically updated scores -->
</div>
A row of cells within a tabular container (table, grid, or treegrid). Must contain cell, gridcell, columnheader, or rowheader elements. Provides structural information that allows screen readers to announce row position.
⌨ Keyboard Interaction
Not directly interactive — depends on grid context.
⚠ Notes
In a data table, use <tr> natively. In an interactive grid, manage keyboard navigation across rows and cells.
Supported properties
aria-rowindexaria-selectedaria-expandedaria-levelaria-label
<table>
<thead>
<tr role="row">
<th scope="col">Name</th>
<th scope="col">Status</th>
</tr>
</thead>
<tbody>
<tr role="row">
<td>Alice</td>
<td>Active</td>
</tr>
</tbody>
</table>
HTML Equivalent
<th scope="row">A cell containing header information for a row in a grid or table. Screen readers use this to announce the row context when navigating cells.
⌨ Keyboard Interaction
Not interactive unless in a grid context.
⚠ Notes
Prefer native <th scope="row"> in HTML tables. Use role="rowheader" only when native semantics are not available.
Supported properties
aria-colspanaria-rowspanaria-selectedaria-readonlyaria-sortaria-label
<table>
<tbody>
<tr>
<th role="rowheader" scope="row">Q1 2025</th>
<td>€42,000</td>
<td>€38,500</td>
</tr>
</tbody>
</table>
S
HTML Equivalent
N/A (native browser scrollbars)A graphical object that controls the scrolling of content within a viewing area, regardless of whether the content is fully displayed within the viewing area. Custom scrollbars must implement all required ARIA attributes and keyboard support.
⌨ Keyboard Interaction
Arrow keys scroll in the direction of orientation. Page Up/Down for larger increments. Home/End for extremes.
⚠ Notes
Custom scrollbars are very difficult to make accessible. The native browser scrollbar is always preferred. Ensure content within the scrollable area is itself keyboard accessible.
Required properties
aria-controlsaria-valuenowaria-valueminaria-valuemaxaria-orientation
Supported properties
aria-controlsaria-valuenowaria-valueminaria-valuemaxaria-orientationaria-valuetext
<div id="content-pane"
style="overflow-y: hidden; height: 300px;">
<!-- long content -->
</div>
<div role="scrollbar"
aria-controls="content-pane"
aria-orientation="vertical"
aria-valuenow="0"
aria-valuemin="0"
aria-valuemax="100"
tabindex="0">
</div>
HTML Equivalent
<search> (HTML 5.3+), or <form role="search">A landmark region that contains a collection of items and objects that, as a whole, combine to create search functionality. The <search> HTML element (HTML 5.3+) provides an implicit search landmark.
⌨ Keyboard Interaction
Not interactive — landmark navigation only.
⚠ Notes
Use a <label> for the search input field. Do not use role="search" for filtered lists or category navigation — only for actual search functionality.
Supported properties
aria-labelaria-labelledby
<!-- Preferred: HTML5 <search> element -->
<search>
<form>
<label for="site-search">Search this site</label>
<input id="site-search" type="search" />
<button type="submit">Search</button>
</form>
</search>
<!-- Fallback for older browsers -->
<div role="search" aria-label="Site search">
<form><!-- ... --></form>
</div>
HTML Equivalent
<input type="search">A type of textbox intended for specifying search criteria. Unlike a plain textbox, a searchbox communicates to assistive technologies that input will trigger a search operation. Equivalent to <input type="search">.
⌨ Keyboard Interaction
Enter submits the search. Esc may clear the input.
⚠ Notes
The native <input type="search"> is strongly preferred. Only use role="searchbox" if a native input is not feasible.
Supported properties
aria-labelaria-labelledbyaria-autocompletearia-placeholderaria-requiredaria-readonly
<label id="product-search-label">
Search products
</label>
<input role="searchbox"
type="text"
aria-labelledby="product-search-label"
aria-autocomplete="list"
aria-controls="search-results" />
A divider that separates and distinguishes sections of content or groups of menuitems. When not focusable, it is a structural element. When focusable (e.g., a resizable splitter), it requires keyboard interaction and ARIA value attributes.
⌨ Keyboard Interaction
When focusable: Arrow keys adjust the separator position.
⚠ Notes
A non-focusable separator is purely decorative and should not appear in the tab order. A focusable separator (splitter pane) must have accessible name and value.
Required properties
aria-valuenow, aria-valuemin, aria-valuemax (when focusable)
Supported properties
aria-orientationaria-valuenowaria-valueminaria-valuemaxaria-valuetext
<!-- Focusable (interactive) — resize handle -->
<div role="separator"
aria-orientation="vertical"
aria-valuenow="50"
aria-valuemin="10"
aria-valuemax="90"
tabindex="0"
aria-label="Resize panels">
</div>
<!-- Decorative (non-focusable) -->
<hr aria-hidden="true" />
HTML Equivalent
<input type="range">An input where the user selects a value from within a given range. A slider represents a range of values along a bar, from which the user may select a single value. Common examples include volume controls and image zoom controls.
⌨ Keyboard Interaction
Arrow keys increase/decrease value. Page Up/Down for larger steps. Home/End for min/max.
⚠ Notes
Use aria-valuetext to provide a human-readable value when the numeric value alone is insufficient (e.g., 'Soft, Medium, Loud' instead of '0, 50, 100'). Prefer native <input type="range">.
Required properties
aria-valuenowaria-valueminaria-valuemax
Supported properties
aria-valuenowaria-valueminaria-valuemaxaria-valuetextaria-orientationaria-labelaria-labelledbyaria-requiredaria-readonly
<label id="vol-label">Volume</label>
<div role="slider"
aria-labelledby="vol-label"
aria-valuenow="60"
aria-valuemin="0"
aria-valuemax="100"
aria-valuetext="60 percent"
tabindex="0">
<div class="thumb" style="left: 60%"></div>
</div>
HTML Equivalent
<input type="number">A form of range that expects the user to select from among discrete choices by means of an increment or decrement. Similar to <input type="number">. Screen readers announce the current value and whether it can be incremented or decremented.
⌨ Keyboard Interaction
Up/Down Arrow keys increment/decrement. Page Up/Down for larger steps. Home/End for min/max.
⚠ Notes
Prefer native <input type="number">. If creating a custom spinbutton, implement all keyboard interactions manually.
Required properties
aria-valuenow
Supported properties
aria-valuenowaria-valueminaria-valuemaxaria-valuetextaria-requiredaria-readonlyaria-labelaria-labelledby
<label id="qty-label">Quantity</label>
<div role="spinbutton"
aria-labelledby="qty-label"
aria-valuenow="1"
aria-valuemin="1"
aria-valuemax="99"
tabindex="0">
<button aria-label="Decrease">−</button>
<span>1</span>
<button aria-label="Increase">+</button>
</div>
HTML Equivalent
N/A — use aria-live="polite" alternativelyA type of live region whose content is advisory information for the user but is not important enough to justify an alert. Screen readers will read status updates when the user is idle, not interrupting the current reading flow. Equivalent to aria-live="polite".
⌨ Keyboard Interaction
Not focusable. Content is announced when the user is idle.
⚠ Notes
Use for non-urgent messages such as 'Your changes have been saved' or 'Loading 10 results'. The content should be brief and informative. Do not repeat the same message unless something has changed.
Supported properties
aria-livearia-atomic
<!-- Non-urgent notifications -->
<div role="status"
aria-live="polite"
aria-atomic="true">
Changes saved successfully.
</div>
<!-- Cart update example -->
<div role="status" aria-live="polite">
3 items in your cart
</div>
HTML Equivalent
<input type="checkbox"> (with toggle semantics)A type of checkbox that represents on/off values, as opposed to checked/unchecked values. Visually resembles a toggle switch. Screen readers may announce 'on' or 'off' instead of 'checked' or 'unchecked'.
⌨ Keyboard Interaction
Space toggles on/off. Enter may also toggle (browser dependent).
⚠ Notes
Use aria-checked="true" for 'on' and aria-checked="false" for 'off'. Avoid aria-checked="mixed" for switches — use checkboxes for tri-state inputs.
Required properties
aria-checked
Supported properties
aria-checkedaria-labelaria-labelledbyaria-describedbyaria-disabled
<button role="switch"
aria-checked="false"
aria-label="Enable notifications">
<span class="thumb"></span>
</button>
<!-- With visible label -->
<span id="notif-label">Notifications</span>
<button role="switch"
aria-checked="true"
aria-labelledby="notif-label">
<span class="thumb"></span>
</button>
T
A grouping label providing a mechanism for selecting the tab content that is to be rendered to the user. Tabs must be grouped inside a tablist and each tab must control a tabpanel via aria-controls.
⌨ Keyboard Interaction
Left/Right Arrow keys move between tabs (automatic activation) or just focus (manual activation). Enter or Space activates (manual activation pattern). Home/End jump to first/last tab.
⚠ Notes
The ARIA APG tab pattern defines two variants: automatic and manual. Choose one and implement it consistently. Use aria-controls to link each tab to its tabpanel.
Required properties
aria-selected
Supported properties
aria-selectedaria-disabledaria-expandedaria-labelaria-labelledbyaria-controlsaria-posinsetaria-setsize
<div role="tablist" aria-label="Product details">
<button role="tab"
aria-selected="true"
aria-controls="panel-overview"
id="tab-overview">
Overview
</button>
<button role="tab"
aria-selected="false"
aria-controls="panel-specs"
id="tab-specs"
tabindex="-1">
Specifications
</button>
</div>
A list of tab elements, which are references to tabpanel elements. Contains all tab elements for a tabbed interface. Must be labelled with aria-label or aria-labelledby if multiple tablists are on the same page.
⌨ Keyboard Interaction
See role="tab".
⚠ Notes
Set aria-orientation="vertical" for vertically stacked tabs. Only one tab should have aria-selected="true" at a time (unless multiselectable).
Supported properties
aria-labelaria-labelledbyaria-orientationaria-multiselectable
<div role="tablist" aria-label="Account sections">
<button role="tab" aria-selected="true"
aria-controls="panel-profile"
id="tab-profile">
Profile
</button>
<button role="tab" aria-selected="false"
aria-controls="panel-security"
id="tab-security" tabindex="-1">
Security
</button>
</div>
<div role="tabpanel"
id="panel-profile"
aria-labelledby="tab-profile">
<!-- Profile content -->
</div>
<div role="tabpanel"
id="panel-security"
aria-labelledby="tab-security" hidden>
<!-- Security content -->
</div>
A container for the resources associated with a tab, where each tab is contained in a tablist. Each tabpanel is controlled by its corresponding tab element. Hidden tabpanels should use the hidden attribute or display:none.
⌨ Keyboard Interaction
Focus moves into the tabpanel via Tab from the tablist.
⚠ Notes
Each tabpanel must be labelled by its tab (aria-labelledby="tab-id"). When a tabpanel is hidden, remove it from the tab order using hidden or tabindex="-1" on its contents.
Required properties
aria-labelledby
Supported properties
aria-labelledbyaria-label
<div role="tabpanel"
id="panel-overview"
aria-labelledby="tab-overview"
tabindex="0">
<h2>Product overview</h2>
<p>This widget does everything.</p>
</div>
A section containing data arranged in rows and columns, similar to the HTML table element. For static data tables, prefer native HTML <table> with proper <th> and scope attributes. Use role="grid" for interactive tabular data.
⌨ Keyboard Interaction
Not interactive — depends on contained cells.
⚠ Notes
Always associate a caption or aria-labelledby with data tables. Use scope="col" and scope="row" on header cells. Do not use tables for layout — use CSS Grid or Flexbox instead.
Supported properties
aria-rowcountaria-colcountaria-labelaria-labelledbyaria-describedby
<table>
<caption>Q1 2025 Sales by Region</caption>
<thead>
<tr>
<th scope="col">Region</th>
<th scope="col">Revenue</th>
<th scope="col">Growth</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">North</th>
<td>€180,000</td>
<td>+12%</td>
</tr>
</tbody>
</table>
A word or phrase with an optional corresponding definition. Used in definition lists to mark the term being defined. The corresponding definition should follow immediately.
⌨ Keyboard Interaction
Not interactive.
⚠ Notes
Prefer native <dl>/<dt>/<dd> elements. The <dt> element has an implicit role="term".
Supported properties
aria-label
<dl>
<dt><dfn role="term">Accessibility</dfn></dt>
<dd>
The design of products usable by people
with disabilities.
</dd>
</dl>
HTML Equivalent
<input type="text">, <textarea>A type of input that allows free-form text as its value. Single-line textboxes correspond to <input type="text"> and multiline to <textarea>. Use aria-multiline="true" to indicate a multiline textbox.
⌨ Keyboard Interaction
Standard text editing keys. Tab moves focus out.
⚠ Notes
Always associate a visible <label> with every textbox. Placeholder text alone is not sufficient as a label — it disappears when the user types.
Supported properties
aria-multilinearia-requiredaria-readonlyaria-placeholderaria-labelaria-labelledbyaria-describedbyaria-autocompletearia-expandedaria-haspopup
<!-- Preferred: native elements -->
<label for="bio">Biography</label>
<textarea id="bio"
aria-describedby="bio-hint"></textarea>
<p id="bio-hint">Maximum 200 characters.</p>
<!-- Custom contenteditable textbox -->
<div role="textbox"
aria-labelledby="notes-label"
aria-multiline="true"
contenteditable="true"
tabindex="0">
</div>
A numerical counter which indicates an amount of elapsed time from a start point, or the time remaining until an end point. Screen readers may not announce this automatically — use aria-live="polite" to control announcement frequency.
⌨ Keyboard Interaction
Not interactive.
⚠ Notes
If time limits apply (SC 2.2.1), provide a mechanism to extend or disable them. Do not use aria-live="assertive" for a timer — it would constantly interrupt the user.
Supported properties
aria-livearia-atomicaria-label
<div role="timer"
aria-live="off"
aria-label="Time remaining">
<span id="time-display">04:59</span>
</div>
<!-- Switch aria-live to "polite" when
under 60 seconds remain -->
A collection of commonly used function buttons or controls represented in compact visual form. A toolbar is typically a presentation of related controls. Keyboard navigation within a toolbar should follow the roving tabindex pattern.
⌨ Keyboard Interaction
Tab enters the toolbar. Left/Right Arrow keys navigate between items. Tab exits the toolbar.
⚠ Notes
Use the roving tabindex pattern: only the currently active item has tabindex="0", all others have tabindex="-1". This keeps the toolbar as a single tab stop.
Required properties
aria-label or aria-labelledby
Supported properties
aria-labelaria-labelledbyaria-orientationaria-activedescendant
<div role="toolbar"
aria-label="Text formatting"
aria-controls="editor">
<button aria-pressed="false"
aria-label="Bold">B</button>
<button aria-pressed="false"
aria-label="Italic">I</button>
<button aria-pressed="false"
aria-label="Underline">U</button>
<hr role="separator"
aria-orientation="vertical" />
<button aria-label="Align left">≡</button>
</div>
HTML Equivalent
title attribute (partial equivalent)A contextual popup that displays a description for an element. The tooltip is shown on hover or focus and hidden otherwise. Must not be the only means of conveying important information — it must supplement a visible label.
⌨ Keyboard Interaction
Appears on keyboard focus. Esc may dismiss. Must be dismissible without moving focus or hover (SC 1.4.13).
⚠ Notes
The element triggering the tooltip should reference it with aria-describedby. Tooltip content must satisfy SC 1.4.13 (hoverable, dismissible, persistent). The title attribute provides a tooltip but is not keyboard accessible on its own.
Supported properties
aria-label
<button aria-describedby="copy-tip"
id="copy-btn">
Copy
</button>
<div role="tooltip" id="copy-tip">
Copy to clipboard
</div>
<!-- Show/hide on focus and hover via JS -->
A widget that presents a hierarchical list. Trees allow users to expand and collapse branches to show or hide more items. Each item is a treeitem. The tree may support single or multi-selection.
⌨ Keyboard Interaction
Up/Down navigate between items. Right expands/moves into branch. Left collapses/moves to parent. Enter activates. Home/End jump to first/last item. Type-ahead is recommended.
⚠ Notes
Trees are complex to implement. The ARIA APG has two patterns: expand/collapse with arrow keys and selection. Choose one and implement consistently.
Supported properties
aria-activedescendantaria-labelaria-labelledbyaria-multiselectablearia-required
<ul role="tree" aria-label="File explorer">
<li role="treeitem"
aria-expanded="true"
aria-level="1">
src/
<ul role="group">
<li role="treeitem"
aria-level="2"
aria-selected="false">
index.ts
</li>
<li role="treeitem"
aria-level="2"
aria-expanded="false"
aria-selected="false">
components/
</li>
</ul>
</li>
</ul>
An option item of a tree. Each item may have child items (a branch) or be a leaf node. Branch items must have aria-expanded to indicate their state. Leaf items do not have aria-expanded.
⌨ Keyboard Interaction
See role="tree".
⚠ Notes
Set aria-expanded="true" when a branch is open, aria-expanded="false" when closed. Do not set aria-expanded on leaf nodes.
Required properties
aria-expanded (for branch nodes)aria-selected (if selection is supported)
Supported properties
aria-expandedaria-selectedaria-checkedaria-disabledaria-levelaria-setsizearia-posinsetaria-labelaria-labelledby
<li role="treeitem"
aria-level="2"
aria-selected="false"
aria-expanded="false"
id="node-components">
components/
</li>
A grid whose rows can be expanded and collapsed in the same manner as for a tree. Combines the interaction model of a tree with the column structure of a grid. Each row is a treeitem and each cell is a gridcell.
⌨ Keyboard Interaction
Combines tree keyboard interaction (Right/Left to expand/collapse) with grid navigation (Arrow keys for cell movement).
⚠ Notes
Treegrid is extremely complex to implement correctly. Only use if both row-level collapsing and cell-level navigation are required simultaneously.
Supported properties
aria-activedescendantaria-labelaria-labelledbyaria-multiselectablearia-readonlyaria-rowcountaria-colcount
<table role="treegrid" aria-label="File system">
<thead>
<tr>
<th>Name</th><th>Size</th><th>Modified</th>
</tr>
</thead>
<tbody>
<tr role="row"
aria-expanded="true" aria-level="1">
<td role="gridcell">src/</td>
<td role="gridcell">—</td>
<td role="gridcell">Today</td>
</tr>
<tr role="row" aria-level="2">
<td role="gridcell">index.ts</td>
<td role="gridcell">4 KB</td>
<td role="gridcell">Today</td>
</tr>
</tbody>
</table>
B
HTML Equivalent
<header> (when direct child of <body>)A region that contains mostly site-oriented content, rather than page-specific content. Site-oriented content typically includes things such as the logo or identity of the site sponsor, and site-specific search tool. Corresponds to the <header> element when it is a direct descendant of <body>.
⌨ Keyboard Interaction
Not interactive — landmark navigation only.
⚠ Notes
Only one banner landmark per page. A <header> inside an <article> or <section> does not carry the banner role implicitly — only the top-level <header> does.
Supported properties
aria-labelaria-labelledby
<header>
<a href="/">
<img src="logo.svg" alt="Acme home" />
</a>
<nav aria-label="Main navigation">
<a href="/about">About</a>
<a href="/contact">Contact</a>
</nav>
</header>
A
A structure containing one or more focusable elements that requires user interaction, such as keyboard or gesture events, that do not follow a standard interaction pattern supported by a user agent. This role is almost always used incorrectly and causes significant accessibility harm. Screen readers disable their standard navigation commands when role="application" is encountered.
⌨ Keyboard Interaction
Application is responsible for all keyboard handling. Screen reader virtual/browse mode is disabled.
⚠ Notes
CRITICAL: Do not use role="application" unless you have fully implemented a desktop-application-like interaction model. Using this on standard web content will prevent screen reader users from reading the page. Consult the ARIA APG before using.
Required properties
aria-label or aria-labelledby
Supported properties
aria-labelaria-labelledbyaria-activedescendant
<!-- Only use for rich app widgets with
a fully custom keyboard model -->
<div role="application"
aria-label="Code editor"
tabindex="0">
<!-- JS handles ALL keyboard events.
Screen readers pass keys through. -->
</div>
<!-- WARNING: disables most AT shortcuts.
Provide escape route to browse mode. -->
A section of a page that consists of a composition that forms an independent part of a document, page, or site. Each article should be self-contained and can be distributed independently. Screen readers may announce the count and position of articles on the page.
⌨ Keyboard Interaction
Not interactive — depends on content.
⚠ Notes
Use aria-posinset and aria-setsize when the full set of articles is not in the DOM (e.g., infinite scroll). Articles should have their own headings.
Supported properties
aria-labelaria-labelledbyaria-posinsetaria-setsize
<article>
<header>
<h2>
<a href="/posts/eaa-guide">
EAA Compliance Guide 2025
</a>
</h2>
<time datetime="2025-06-01">1 June 2025</time>
</header>
<p>The European Accessibility Act requires…</p>
<footer>
<a href="/posts/eaa-guide">Read more</a>
</footer>
</article>
C
HTML Equivalent
<th scope="col">A cell containing header information for a column. Equivalent to <th scope="col"> in HTML. Screen readers use column headers to provide context when reading table data cells.
⌨ Keyboard Interaction
Not interactive unless in a sortable grid.
⚠ Notes
Set aria-sort="ascending" or aria-sort="descending" on the sorted column. Only one column should have a non-"none" sort value at a time.
Supported properties
aria-sortaria-colspanaria-rowspanaria-selectedaria-readonlyaria-label
<table>
<thead>
<tr>
<th role="columnheader" scope="col"
aria-sort="ascending">
Name ↑
</th>
<th role="columnheader" scope="col"
aria-sort="none">
Date
</th>
</tr>
</thead>
</table>
D
A definition of a term or concept. The term being defined should be marked with role="term" (or the native <dt> element). The two are typically paired in a definition list.
⌨ Keyboard Interaction
Not interactive.
⚠ Notes
Prefer native <dl>/<dt>/<dd> elements. The <dd> element has an implicit role="definition".
Supported properties
aria-labelledby
<dl>
<dt><dfn>WCAG</dfn></dt>
<dd>
Web Content Accessibility Guidelines —
international standards for web accessibility.
</dd>
</dl>
<p>
The term <dfn role="definition">ARIA</dfn>
stands for Accessible Rich Internet Applications.
</p>
An element containing content that assistive technology users may want to browse in a reading mode. Used within application regions to designate sections as reading-mode content. Screen readers switch back to their document reading mode when they encounter this role.
⌨ Keyboard Interaction
Screen reader virtual mode is enabled within this element.
⚠ Notes
Use inside role="application" to designate sections that should be read in document mode. This is the counterpart to role="application".
Supported properties
aria-labelaria-labelledby
<!-- Restore reading mode inside an application -->
<div role="application" aria-label="Slide viewer">
<div role="document"
aria-label="Current slide"
tabindex="0">
<h1>Quarterly Results</h1>
<p>Revenue grew by 12% in Q3.</p>
</div>
</div>
F
A scrollable list of articles where scrolling may cause articles to be added to or removed from either end of the list. Used for dynamic feeds like social media timelines. Enables screen reader users to navigate and read articles in a consistent way.
⌨ Keyboard Interaction
Page Down/Up move to next/previous article. Tab enters the article for standard navigation. Esc moves focus back to the feed.
⚠ Notes
Each article in the feed must have a unique, descriptive accessible name. Set aria-busy="true" while loading new articles and aria-busy="false" when done.
Supported properties
aria-labelaria-labelledbyaria-busy
<section role="feed"
aria-busy="false"
aria-label="News feed">
<article aria-posinset="1"
aria-setsize="-1"
aria-label="EAA update">
<h2>New EAA Guidance Released</h2>
<p>The Commission has published…</p>
</article>
<article aria-posinset="2"
aria-setsize="-1"
aria-label="WCAG update">
<h2>WCAG 2.2 Now a W3C Standard</h2>
</article>
</section>
A perceivable section of content that typically contains a graphical document, images, code snippets, or example text. May have a caption associated with it. Corresponds to the <figure> HTML element.
⌨ Keyboard Interaction
Not interactive.
⚠ Notes
Use <figcaption> inside <figure> for a visible caption — screen readers will associate the caption automatically. If no visible caption, use aria-label.
Supported properties
aria-labelaria-labelledbyaria-describedby
<figure>
<img src="chart.png"
alt="Bar chart: 40% of EU websites
fail WCAG Level A" />
<figcaption>
Figure 1: Accessibility failure rates
across EU member states (2024).
</figcaption>
</figure>
M
HTML Equivalent
<math> (MathML)Content that represents a mathematical expression. MathML content should use this role. Screen readers have varying support for MathML — providing an alternative text representation is recommended.
⌨ Keyboard Interaction
Not interactive.
⚠ Notes
Always provide an accessible text alternative (aria-label) as MathML screen reader support is inconsistent. MathJax rendering may add ARIA attributes automatically.
Required properties
aria-label or aria-labelledby
Supported properties
aria-labelaria-labelledby
<!-- Preferred: MathML -->
<math aria-label="E equals m c squared">
<mi>E</mi><mo>=</mo>
<mi>m</mi>
<msup><mi>c</mi><mn>2</mn></msup>
</math>
<!-- Fallback when MathML unavailable -->
<span role="math"
aria-label="E equals m c squared">
E = mc²
</span>
An element that represents a scalar measurement within a known range, or a fractional value. Unlike progressbar, a meter is not used to indicate progress — it represents a static measurement (e.g., disk usage, temperature). Corresponds to the <meter> HTML element.
⌨ Keyboard Interaction
Not interactive — read-only indicator.
⚠ Notes
Use aria-valuetext to provide a human-readable value. The native <meter> element has better browser support than role="meter".
Required properties
aria-valuenowaria-valueminaria-valuemax
Supported properties
aria-valuenowaria-valueminaria-valuemaxaria-valuetextaria-labelaria-labelledby
<!-- Preferred: native element -->
<label for="disk">Disk usage</label>
<meter id="disk"
value="75" min="0" max="100"
low="60" high="85" optimum="20">
75 GB of 100 GB used
</meter>
<!-- Custom meter -->
<div role="meter"
aria-valuenow="75"
aria-valuemin="0"
aria-valuemax="100"
aria-label="Storage used: 75%">
<div style="width: 75%"></div>
</div>
N
A section whose content is parenthetic or ancillary to the main content of the resource. Used for footnotes, sidebars, or supplementary information that clarifies or elaborates on the main content.
⌨ Keyboard Interaction
Not interactive.
⚠ Notes
Notes are not landmarks and will not appear in landmark navigation. If a note is important enough to warrant direct navigation, use role="region" with an accessible name.
Supported properties
aria-labelaria-labelledby
<div role="note">
<p>
<strong>Note:</strong> This feature is only
available to Pro plan subscribers.
</p>
</div>
B
HTML Equivalent
<blockquote>A section of content that is quoted from another source. Equivalent to the HTML <blockquote> element. Assistive technologies may announce this as a block quotation, helping users understand the content is cited material.
⌨ Keyboard Interaction
Not interactive.
⚠ Notes
Prefer the native <blockquote> element. Optionally cite the source using <cite> within the blockquote.
Supported properties
aria-labelaria-labelledbyaria-describedby
C
HTML Equivalent
<caption> / <figcaption>A visible label or title for a table or figure. Equivalent to the HTML <caption> element or <figcaption>. Screen readers announce the caption to give context before the table or figure content.
⌨ Keyboard Interaction
Not interactive.
⚠ Notes
Prefer native <caption> or <figcaption>. A table with role=table should have its caption identified via aria-labelledby.
Supported properties
aria-labelaria-labelledby
A cell in a grid or table that does not contain header information. Equivalent to a <td> element. Must be owned by a row element. Use columnheader or rowheader for header cells.
⌨ Keyboard Interaction
Not interactive unless the cell contains interactive content.
⚠ Notes
Do not use for header cells — use role=columnheader or role=rowheader instead.
Supported properties
aria-colspanaria-rowspanaria-colindexaria-rowindex
D
Content that represents text that has been removed or is marked for deletion. Equivalent to the HTML <del> element. Some screen readers may announce this as deleted text.
⌨ Keyboard Interaction
Not interactive.
⚠ Notes
Prefer the native <del> element. Screen reader support for role=deletion varies — test with actual AT.
Supported properties
aria-label
E
Text that has stress emphasis. Equivalent to the HTML <em> element. Unlike bold or strong, emphasis conveys stress inflection — the meaning changes based on which word is stressed.
⌨ Keyboard Interaction
Not interactive.
⚠ Notes
Prefer the native <em> element. Most AT do not announce emphasis inline. Do not rely on this role alone for conveying meaning critical to understanding.
G
HTML Equivalent
<div> / <span> (implicitly)A nameless container role with no semantic meaning. Similar to role=presentation but unlike presentation, generic elements CAN receive accessible names and remain in the accessibility tree. Introduced in WAI-ARIA 1.2.
⌨ Keyboard Interaction
Not interactive unless it contains interactive descendants.
⚠ Notes
Most browsers map <div> and <span> to role=generic automatically. Do not confuse with role=presentation — generic elements remain in the accessibility tree.
Supported properties
aria-labelaria-labelledbyaria-describedby
I
Content that represents text that has been inserted or added. Equivalent to the HTML <ins> element. Useful in track-changes interfaces and revision-marked documents.
⌨ Keyboard Interaction
Not interactive.
⚠ Notes
Prefer the native <ins> element. Screen reader support varies — test with NVDA, JAWS, and VoiceOver.
Supported properties
aria-label
P
A paragraph of text. Equivalent to the HTML <p> element. Introduced in WAI-ARIA 1.2 to allow authors to communicate paragraph structure when native HTML paragraphs cannot be used.
⌨ Keyboard Interaction
Not interactive.
⚠ Notes
Prefer the native <p> element in almost all cases. role=paragraph is only needed in environments where <p> is unavailable.
R
HTML Equivalent
<thead> / <tbody> / <tfoot>A group of rows in a table or grid, providing structure equivalent to <thead>, <tbody>, or <tfoot>. Owned by role=table or role=grid.
⌨ Keyboard Interaction
Not interactive.
⚠ Notes
Required when building custom ARIA tables to group header rows from body rows. Omitting it may cause AT to incorrectly identify header rows.
Supported properties
aria-labelaria-labelledby
S
Text with strong importance, seriousness, or urgency. Equivalent to the HTML <strong> element. Introduced in WAI-ARIA 1.2. Screen reader support for announcing strong emphasis is inconsistent.
⌨ Keyboard Interaction
Not interactive.
⚠ Notes
Prefer the native <strong> element. For critical warnings conveyed only through strong formatting, add a visually hidden prefix such as "Important:".
Text that is displayed lower than surrounding text and in a smaller font size. Equivalent to the HTML <sub> element. Introduced in WAI-ARIA 1.2.
⌨ Keyboard Interaction
Not interactive.
⚠ Notes
Prefer native <sub>. Screen reader support is limited. For mathematical or chemical formulae, consider MathML.
Text that is displayed higher than surrounding text and in a smaller font size. Equivalent to the HTML <sup> element. Introduced in WAI-ARIA 1.2.
⌨ Keyboard Interaction
Not interactive.
⚠ Notes
Prefer native <sup>. For footnote references, consider also linking to the footnote text.
T
A date or time value, or a span of text that represents a machine-readable date or time. Equivalent to the HTML <time> element.
⌨ Keyboard Interaction
Not interactive.
⚠ Notes
Prefer the native <time datetime="YYYY-MM-DD"> element. When using role=time on a non-time element, include aria-label with the human-readable date or time description.
Supported properties
aria-labelaria-labelledbyaria-describedby
D
HTML Equivalent
<ul> or <ol> (use these instead)DEPRECATED in WAI-ARIA 1.2. A list of references to members of a group, such as a table of contents. Authors should use role=list instead.
⌨ Keyboard Interaction
Not interactive.
⚠ Notes
Do not use role=directory in new content — it is deprecated and may be removed in a future ARIA version. Use role=list with role=listitem for a table of contents.
Supported properties
aria-labelaria-labelledby
HTML Equivalent
Applied to sectioning elements such as <section>, <aside>, <nav>, <li>, or <a>A short summary of the principle ideas, concepts, and conclusions of a work, or of a section of a work. Part of the DPUB-ARIA 1.1 specification for digital publishing.
⌨ Keyboard Interaction
Not interactive unless the element contains interactive content.
⚠ Notes
DPUB-ARIA roles are defined in the DPUB-ARIA 1.1 specification for use in digital publishing contexts such as EPUB. Primarily supported by reading system AT. Use on appropriate HTML sectioning elements.
Supported properties
aria-labelaria-labelledbyaria-describedby
role="doc-acknowledgments"
HTML Equivalent
Applied to sectioning elements such as <section>, <aside>, <nav>, <li>, or <a>A section or short work listing the individuals or groups who contributed to the creation of a publication. Part of the DPUB-ARIA 1.1 specification for digital publishing.
⌨ Keyboard Interaction
Not interactive unless the element contains interactive content.
⚠ Notes
DPUB-ARIA roles are defined in the DPUB-ARIA 1.1 specification for use in digital publishing contexts such as EPUB. Primarily supported by reading system AT. Use on appropriate HTML sectioning elements.
Supported properties
aria-labelaria-labelledbyaria-describedby
HTML Equivalent
Applied to sectioning elements such as <section>, <aside>, <nav>, <li>, or <a>A section of content added after the primary content of a publication, typically written by a person other than the primary author. Part of the DPUB-ARIA 1.1 specification for digital publishing.
⌨ Keyboard Interaction
Not interactive unless the element contains interactive content.
⚠ Notes
DPUB-ARIA roles are defined in the DPUB-ARIA 1.1 specification for use in digital publishing contexts such as EPUB. Primarily supported by reading system AT. Use on appropriate HTML sectioning elements.
Supported properties
aria-labelaria-labelledbyaria-describedby
HTML Equivalent
Applied to sectioning elements such as <section>, <aside>, <nav>, <li>, or <a>A section of supplemental content that is not considered to be the primary content of the publication. Part of the DPUB-ARIA 1.1 specification for digital publishing.
⌨ Keyboard Interaction
Not interactive unless the element contains interactive content.
⚠ Notes
DPUB-ARIA roles are defined in the DPUB-ARIA 1.1 specification for use in digital publishing contexts such as EPUB. Primarily supported by reading system AT. Use on appropriate HTML sectioning elements.
Supported properties
aria-labelaria-labelledbyaria-describedby
HTML Equivalent
Applied to sectioning elements such as <section>, <aside>, <nav>, <li>, or <a>A link that allows the user to return to a related location in the content, such as from a footnote back to the reference in the text. Part of the DPUB-ARIA 1.1 specification for digital publishing.
⌨ Keyboard Interaction
Not interactive unless the element contains interactive content.
⚠ Notes
DPUB-ARIA roles are defined in the DPUB-ARIA 1.1 specification for use in digital publishing contexts such as EPUB. Primarily supported by reading system AT. Use on appropriate HTML sectioning elements.
Supported properties
aria-labelaria-labelledbyaria-describedby
HTML Equivalent
Applied to sectioning elements such as <section>, <aside>, <nav>, <li>, or <a>An entry in a bibliography. Each entry describes a single bibliographic item. Part of the DPUB-ARIA 1.1 specification for digital publishing.
⌨ Keyboard Interaction
Not interactive unless the element contains interactive content.
⚠ Notes
DPUB-ARIA roles are defined in the DPUB-ARIA 1.1 specification for use in digital publishing contexts such as EPUB. Primarily supported by reading system AT. Use on appropriate HTML sectioning elements.
Supported properties
aria-labelaria-labelledbyaria-describedby
HTML Equivalent
Applied to sectioning elements such as <section>, <aside>, <nav>, <li>, or <a>A list of bibliographic references. Contains doc-biblioentry items. Part of the DPUB-ARIA 1.1 specification for digital publishing.
⌨ Keyboard Interaction
Not interactive unless the element contains interactive content.
⚠ Notes
DPUB-ARIA roles are defined in the DPUB-ARIA 1.1 specification for use in digital publishing contexts such as EPUB. Primarily supported by reading system AT. Use on appropriate HTML sectioning elements.
Supported properties
aria-labelaria-labelledbyaria-describedby
HTML Equivalent
Applied to sectioning elements such as <section>, <aside>, <nav>, <li>, or <a>A reference to a bibliography entry. Typically a superscript or parenthetical citation in the main text. Part of the DPUB-ARIA 1.1 specification for digital publishing.
⌨ Keyboard Interaction
Not interactive unless the element contains interactive content.
⚠ Notes
DPUB-ARIA roles are defined in the DPUB-ARIA 1.1 specification for use in digital publishing contexts such as EPUB. Primarily supported by reading system AT. Use on appropriate HTML sectioning elements.
Supported properties
aria-labelaria-labelledbyaria-describedby
HTML Equivalent
Applied to sectioning elements such as <section>, <aside>, <nav>, <li>, or <a>A major structural division of content in a publication. Part of the DPUB-ARIA 1.1 specification for digital publishing.
⌨ Keyboard Interaction
Not interactive unless the element contains interactive content.
⚠ Notes
DPUB-ARIA roles are defined in the DPUB-ARIA 1.1 specification for use in digital publishing contexts such as EPUB. Primarily supported by reading system AT. Use on appropriate HTML sectioning elements.
Supported properties
aria-labelaria-labelledbyaria-describedby
HTML Equivalent
Applied to sectioning elements such as <section>, <aside>, <nav>, <li>, or <a>A short section of production information about a publication, typically appearing at the end. Part of the DPUB-ARIA 1.1 specification for digital publishing.
⌨ Keyboard Interaction
Not interactive unless the element contains interactive content.
⚠ Notes
DPUB-ARIA roles are defined in the DPUB-ARIA 1.1 specification for use in digital publishing contexts such as EPUB. Primarily supported by reading system AT. Use on appropriate HTML sectioning elements.
Supported properties
aria-labelaria-labelledbyaria-describedby
HTML Equivalent
Applied to sectioning elements such as <section>, <aside>, <nav>, <li>, or <a>A section or excerpt that contains the conclusion of a publication. Part of the DPUB-ARIA 1.1 specification for digital publishing.
⌨ Keyboard Interaction
Not interactive unless the element contains interactive content.
⚠ Notes
DPUB-ARIA roles are defined in the DPUB-ARIA 1.1 specification for use in digital publishing contexts such as EPUB. Primarily supported by reading system AT. Use on appropriate HTML sectioning elements.
Supported properties
aria-labelaria-labelledbyaria-describedby
HTML Equivalent
Applied to sectioning elements such as <section>, <aside>, <nav>, <li>, or <a>An image or group of images that represent the cover of a publication. Part of the DPUB-ARIA 1.1 specification for digital publishing.
⌨ Keyboard Interaction
Not interactive unless the element contains interactive content.
⚠ Notes
DPUB-ARIA roles are defined in the DPUB-ARIA 1.1 specification for use in digital publishing contexts such as EPUB. Primarily supported by reading system AT. Use on appropriate HTML sectioning elements.
Supported properties
aria-labelaria-labelledbyaria-describedby
HTML Equivalent
Applied to sectioning elements such as <section>, <aside>, <nav>, <li>, or <a>An acknowledgment of the source of integrated content, such as a figure or quotation. Part of the DPUB-ARIA 1.1 specification for digital publishing.
⌨ Keyboard Interaction
Not interactive unless the element contains interactive content.
⚠ Notes
DPUB-ARIA roles are defined in the DPUB-ARIA 1.1 specification for use in digital publishing contexts such as EPUB. Primarily supported by reading system AT. Use on appropriate HTML sectioning elements.
Supported properties
aria-labelaria-labelledbyaria-describedby
HTML Equivalent
Applied to sectioning elements such as <section>, <aside>, <nav>, <li>, or <a>A section of credits for work contributed to the publication. Part of the DPUB-ARIA 1.1 specification for digital publishing.
⌨ Keyboard Interaction
Not interactive unless the element contains interactive content.
⚠ Notes
DPUB-ARIA roles are defined in the DPUB-ARIA 1.1 specification for use in digital publishing contexts such as EPUB. Primarily supported by reading system AT. Use on appropriate HTML sectioning elements.
Supported properties
aria-labelaria-labelledbyaria-describedby
HTML Equivalent
Applied to sectioning elements such as <section>, <aside>, <nav>, <li>, or <a>A section at the beginning of a publication addressing the work to one or more persons or organisations. Part of the DPUB-ARIA 1.1 specification for digital publishing.
⌨ Keyboard Interaction
Not interactive unless the element contains interactive content.
⚠ Notes
DPUB-ARIA roles are defined in the DPUB-ARIA 1.1 specification for use in digital publishing contexts such as EPUB. Primarily supported by reading system AT. Use on appropriate HTML sectioning elements.
Supported properties
aria-labelaria-labelledbyaria-describedby
HTML Equivalent
Applied to sectioning elements such as <section>, <aside>, <nav>, <li>, or <a>A note occurring at the end of a section or publication, providing supplemental information to a passage of text. Part of the DPUB-ARIA 1.1 specification for digital publishing.
⌨ Keyboard Interaction
Not interactive unless the element contains interactive content.
⚠ Notes
DPUB-ARIA roles are defined in the DPUB-ARIA 1.1 specification for use in digital publishing contexts such as EPUB. Primarily supported by reading system AT. Use on appropriate HTML sectioning elements.
Supported properties
aria-labelaria-labelledbyaria-describedby
HTML Equivalent
Applied to sectioning elements such as <section>, <aside>, <nav>, <li>, or <a>A section that contains all the endnotes for a publication or section. Part of the DPUB-ARIA 1.1 specification for digital publishing.
⌨ Keyboard Interaction
Not interactive unless the element contains interactive content.
⚠ Notes
DPUB-ARIA roles are defined in the DPUB-ARIA 1.1 specification for use in digital publishing contexts such as EPUB. Primarily supported by reading system AT. Use on appropriate HTML sectioning elements.
Supported properties
aria-labelaria-labelledbyaria-describedby
HTML Equivalent
Applied to sectioning elements such as <section>, <aside>, <nav>, <li>, or <a>A short quotation or poem at the beginning of a publication or section, meant to suggest the theme. Part of the DPUB-ARIA 1.1 specification for digital publishing.
⌨ Keyboard Interaction
Not interactive unless the element contains interactive content.
⚠ Notes
DPUB-ARIA roles are defined in the DPUB-ARIA 1.1 specification for use in digital publishing contexts such as EPUB. Primarily supported by reading system AT. Use on appropriate HTML sectioning elements.
Supported properties
aria-labelaria-labelledbyaria-describedby
HTML Equivalent
Applied to sectioning elements such as <section>, <aside>, <nav>, <li>, or <a>A concluding section of a work that follows the main story or argument. Part of the DPUB-ARIA 1.1 specification for digital publishing.
⌨ Keyboard Interaction
Not interactive unless the element contains interactive content.
⚠ Notes
DPUB-ARIA roles are defined in the DPUB-ARIA 1.1 specification for use in digital publishing contexts such as EPUB. Primarily supported by reading system AT. Use on appropriate HTML sectioning elements.
Supported properties
aria-labelaria-labelledbyaria-describedby
HTML Equivalent
Applied to sectioning elements such as <section>, <aside>, <nav>, <li>, or <a>A section listing corrections to errors in the publication. Part of the DPUB-ARIA 1.1 specification for digital publishing.
⌨ Keyboard Interaction
Not interactive unless the element contains interactive content.
⚠ Notes
DPUB-ARIA roles are defined in the DPUB-ARIA 1.1 specification for use in digital publishing contexts such as EPUB. Primarily supported by reading system AT. Use on appropriate HTML sectioning elements.
Supported properties
aria-labelaria-labelledbyaria-describedby
HTML Equivalent
Applied to sectioning elements such as <section>, <aside>, <nav>, <li>, or <a>A section of extended content that illustrates or explains a topic or concept. Part of the DPUB-ARIA 1.1 specification for digital publishing.
⌨ Keyboard Interaction
Not interactive unless the element contains interactive content.
⚠ Notes
DPUB-ARIA roles are defined in the DPUB-ARIA 1.1 specification for use in digital publishing contexts such as EPUB. Primarily supported by reading system AT. Use on appropriate HTML sectioning elements.
Supported properties
aria-labelaria-labelledbyaria-describedby
HTML Equivalent
Applied to sectioning elements such as <section>, <aside>, <nav>, <li>, or <a>A note at the bottom of a page providing supplemental information about a passage in the main text. Part of the DPUB-ARIA 1.1 specification for digital publishing.
⌨ Keyboard Interaction
Not interactive unless the element contains interactive content.
⚠ Notes
DPUB-ARIA roles are defined in the DPUB-ARIA 1.1 specification for use in digital publishing contexts such as EPUB. Primarily supported by reading system AT. Use on appropriate HTML sectioning elements.
Supported properties
aria-labelaria-labelledbyaria-describedby
HTML Equivalent
Applied to sectioning elements such as <section>, <aside>, <nav>, <li>, or <a>A section of introductory material preceding the main content of a publication, typically written by a person other than the primary author. Part of the DPUB-ARIA 1.1 specification for digital publishing.
⌨ Keyboard Interaction
Not interactive unless the element contains interactive content.
⚠ Notes
DPUB-ARIA roles are defined in the DPUB-ARIA 1.1 specification for use in digital publishing contexts such as EPUB. Primarily supported by reading system AT. Use on appropriate HTML sectioning elements.
Supported properties
aria-labelaria-labelledbyaria-describedby
HTML Equivalent
Applied to sectioning elements such as <section>, <aside>, <nav>, <li>, or <a>A section that defines terms used in the publication. Part of the DPUB-ARIA 1.1 specification for digital publishing.
⌨ Keyboard Interaction
Not interactive unless the element contains interactive content.
⚠ Notes
DPUB-ARIA roles are defined in the DPUB-ARIA 1.1 specification for use in digital publishing contexts such as EPUB. Primarily supported by reading system AT. Use on appropriate HTML sectioning elements.
Supported properties
aria-labelaria-labelledbyaria-describedby
HTML Equivalent
Applied to sectioning elements such as <section>, <aside>, <nav>, <li>, or <a>A reference to a term in a glossary. Part of the DPUB-ARIA 1.1 specification for digital publishing.
⌨ Keyboard Interaction
Not interactive unless the element contains interactive content.
⚠ Notes
DPUB-ARIA roles are defined in the DPUB-ARIA 1.1 specification for use in digital publishing contexts such as EPUB. Primarily supported by reading system AT. Use on appropriate HTML sectioning elements.
Supported properties
aria-labelaria-labelledbyaria-describedby
HTML Equivalent
Applied to sectioning elements such as <section>, <aside>, <nav>, <li>, or <a>A section at the back of the book listing key concepts and where they appear in the publication. Part of the DPUB-ARIA 1.1 specification for digital publishing.
⌨ Keyboard Interaction
Not interactive unless the element contains interactive content.
⚠ Notes
DPUB-ARIA roles are defined in the DPUB-ARIA 1.1 specification for use in digital publishing contexts such as EPUB. Primarily supported by reading system AT. Use on appropriate HTML sectioning elements.
Supported properties
aria-labelaria-labelledbyaria-describedby
HTML Equivalent
Applied to sectioning elements such as <section>, <aside>, <nav>, <li>, or <a>A preliminary section of a publication that introduces the main content and prepares the reader. Part of the DPUB-ARIA 1.1 specification for digital publishing.
⌨ Keyboard Interaction
Not interactive unless the element contains interactive content.
⚠ Notes
DPUB-ARIA roles are defined in the DPUB-ARIA 1.1 specification for use in digital publishing contexts such as EPUB. Primarily supported by reading system AT. Use on appropriate HTML sectioning elements.
Supported properties
aria-labelaria-labelledbyaria-describedby
HTML Equivalent
Applied to sectioning elements such as <section>, <aside>, <nav>, <li>, or <a>A reference from the main text to a footnote or endnote. Part of the DPUB-ARIA 1.1 specification for digital publishing.
⌨ Keyboard Interaction
Not interactive unless the element contains interactive content.
⚠ Notes
DPUB-ARIA roles are defined in the DPUB-ARIA 1.1 specification for use in digital publishing contexts such as EPUB. Primarily supported by reading system AT. Use on appropriate HTML sectioning elements.
Supported properties
aria-labelaria-labelledbyaria-describedby
HTML Equivalent
Applied to sectioning elements such as <section>, <aside>, <nav>, <li>, or <a>An important note requiring the reader attention, such as a warning or caution. Part of the DPUB-ARIA 1.1 specification for digital publishing.
⌨ Keyboard Interaction
Not interactive unless the element contains interactive content.
⚠ Notes
DPUB-ARIA roles are defined in the DPUB-ARIA 1.1 specification for use in digital publishing contexts such as EPUB. Primarily supported by reading system AT. Use on appropriate HTML sectioning elements.
Supported properties
aria-labelaria-labelledbyaria-describedby
HTML Equivalent
Applied to sectioning elements such as <section>, <aside>, <nav>, <li>, or <a>A separator indicating the location where a printed page breaks in a digitally paginated publication. Part of the DPUB-ARIA 1.1 specification for digital publishing.
⌨ Keyboard Interaction
Not interactive unless the element contains interactive content.
⚠ Notes
DPUB-ARIA roles are defined in the DPUB-ARIA 1.1 specification for use in digital publishing contexts such as EPUB. Primarily supported by reading system AT. Use on appropriate HTML sectioning elements.
Supported properties
aria-labelaria-labelledbyaria-describedby
HTML Equivalent
Applied to sectioning elements such as <section>, <aside>, <nav>, <li>, or <a>A footer region containing information about the current page. Part of the DPUB-ARIA 1.1 specification for digital publishing.
⌨ Keyboard Interaction
Not interactive unless the element contains interactive content.
⚠ Notes
DPUB-ARIA roles are defined in the DPUB-ARIA 1.1 specification for use in digital publishing contexts such as EPUB. Primarily supported by reading system AT. Use on appropriate HTML sectioning elements.
Supported properties
aria-labelaria-labelledbyaria-describedby
HTML Equivalent
Applied to sectioning elements such as <section>, <aside>, <nav>, <li>, or <a>A header region containing information about the current page, typically including the title or chapter reference. Part of the DPUB-ARIA 1.1 specification for digital publishing.
⌨ Keyboard Interaction
Not interactive unless the element contains interactive content.
⚠ Notes
DPUB-ARIA roles are defined in the DPUB-ARIA 1.1 specification for use in digital publishing contexts such as EPUB. Primarily supported by reading system AT. Use on appropriate HTML sectioning elements.
Supported properties
aria-labelaria-labelledbyaria-describedby
HTML Equivalent
Applied to sectioning elements such as <section>, <aside>, <nav>, <li>, or <a>A list of references to page breaks in a document, allowing navigation by print page number. Part of the DPUB-ARIA 1.1 specification for digital publishing.
⌨ Keyboard Interaction
Not interactive unless the element contains interactive content.
⚠ Notes
DPUB-ARIA roles are defined in the DPUB-ARIA 1.1 specification for use in digital publishing contexts such as EPUB. Primarily supported by reading system AT. Use on appropriate HTML sectioning elements.
Supported properties
aria-labelaria-labelledbyaria-describedby
HTML Equivalent
Applied to sectioning elements such as <section>, <aside>, <nav>, <li>, or <a>A group of related chapters in a publication, providing another level of structural hierarchy. Part of the DPUB-ARIA 1.1 specification for digital publishing.
⌨ Keyboard Interaction
Not interactive unless the element contains interactive content.
⚠ Notes
DPUB-ARIA roles are defined in the DPUB-ARIA 1.1 specification for use in digital publishing contexts such as EPUB. Primarily supported by reading system AT. Use on appropriate HTML sectioning elements.
Supported properties
aria-labelaria-labelledbyaria-describedby
HTML Equivalent
Applied to sectioning elements such as <section>, <aside>, <nav>, <li>, or <a>An introductory section of a publication, typically written by the primary author. Part of the DPUB-ARIA 1.1 specification for digital publishing.
⌨ Keyboard Interaction
Not interactive unless the element contains interactive content.
⚠ Notes
DPUB-ARIA roles are defined in the DPUB-ARIA 1.1 specification for use in digital publishing contexts such as EPUB. Primarily supported by reading system AT. Use on appropriate HTML sectioning elements.
Supported properties
aria-labelaria-labelledbyaria-describedby
HTML Equivalent
Applied to sectioning elements such as <section>, <aside>, <nav>, <li>, or <a>An introductory section of a publication that precedes the main narrative. Part of the DPUB-ARIA 1.1 specification for digital publishing.
⌨ Keyboard Interaction
Not interactive unless the element contains interactive content.
⚠ Notes
DPUB-ARIA roles are defined in the DPUB-ARIA 1.1 specification for use in digital publishing contexts such as EPUB. Primarily supported by reading system AT. Use on appropriate HTML sectioning elements.
Supported properties
aria-labelaria-labelledbyaria-describedby
HTML Equivalent
Applied to sectioning elements such as <section>, <aside>, <nav>, <li>, or <a>A graphical call-out containing a brief quotation taken from the main content, used as a design element. Part of the DPUB-ARIA 1.1 specification for digital publishing.
⌨ Keyboard Interaction
Not interactive unless the element contains interactive content.
⚠ Notes
DPUB-ARIA roles are defined in the DPUB-ARIA 1.1 specification for use in digital publishing contexts such as EPUB. Primarily supported by reading system AT. Use on appropriate HTML sectioning elements.
Supported properties
aria-labelaria-labelledbyaria-describedby
HTML Equivalent
Applied to sectioning elements such as <section>, <aside>, <nav>, <li>, or <a>A section of content formatted as a series of questions and their answers. Part of the DPUB-ARIA 1.1 specification for digital publishing.
⌨ Keyboard Interaction
Not interactive unless the element contains interactive content.
⚠ Notes
DPUB-ARIA roles are defined in the DPUB-ARIA 1.1 specification for use in digital publishing contexts such as EPUB. Primarily supported by reading system AT. Use on appropriate HTML sectioning elements.
Supported properties
aria-labelaria-labelledbyaria-describedby
HTML Equivalent
Applied to sectioning elements such as <section>, <aside>, <nav>, <li>, or <a>An explanatory or alternative title for the publication. Part of the DPUB-ARIA 1.1 specification for digital publishing.
⌨ Keyboard Interaction
Not interactive unless the element contains interactive content.
⚠ Notes
DPUB-ARIA roles are defined in the DPUB-ARIA 1.1 specification for use in digital publishing contexts such as EPUB. Primarily supported by reading system AT. Use on appropriate HTML sectioning elements.
Supported properties
aria-labelaria-labelledbyaria-describedby
HTML Equivalent
Applied to sectioning elements such as <section>, <aside>, <nav>, <li>, or <a>A helpful hint or suggestion that is set off from the main content (less urgent than a doc-notice). Part of the DPUB-ARIA 1.1 specification for digital publishing.
⌨ Keyboard Interaction
Not interactive unless the element contains interactive content.
⚠ Notes
DPUB-ARIA roles are defined in the DPUB-ARIA 1.1 specification for use in digital publishing contexts such as EPUB. Primarily supported by reading system AT. Use on appropriate HTML sectioning elements.
Supported properties
aria-labelaria-labelledbyaria-describedby
HTML Equivalent
Applied to sectioning elements such as <section>, <aside>, <nav>, <li>, or <a>A table of contents listing the major sections of a publication. Part of the DPUB-ARIA 1.1 specification for digital publishing.
⌨ Keyboard Interaction
Not interactive unless the element contains interactive content.
⚠ Notes
DPUB-ARIA roles are defined in the DPUB-ARIA 1.1 specification for use in digital publishing contexts such as EPUB. Primarily supported by reading system AT. Use on appropriate HTML sectioning elements.
Supported properties
aria-labelaria-labelledbyaria-describedby
G
HTML Equivalent
<svg> (complex, standalone)A standalone document-level graphic requiring internal navigation, such as a complex SVG. Assistive technologies expose its content as a navigable document. Part of the WAI-ARIA Graphics Module 1.0.
⌨ Keyboard Interaction
Keyboard navigation is possible within the SVG when content has interactive elements.
⚠ Notes
Part of the WAI-ARIA Graphics Module 1.0. Use for complex SVG graphics that contain meaningful sub-elements users need to navigate. For simple decorative SVGs, use aria-hidden=true.
Supported properties
aria-labelaria-labelledbyaria-describedby
HTML Equivalent
<g> or <path> in SVGA graphical object that is part of a larger graphics-document. Represents a meaningful component within a complex graphic, such as a bar in a bar chart or a node in a diagram. Part of the WAI-ARIA Graphics Module 1.0.
⌨ Keyboard Interaction
May be focusable if interactive (tabindex=0 and keyboard event handlers required).
⚠ Notes
Part of the WAI-ARIA Graphics Module 1.0. Each meaningful component within a graphics-document should have an accessible name describing what it represents.
Supported properties
aria-labelaria-labelledbyaria-describedby
HTML Equivalent
<use> in SVG referencing a <symbol>A graphical symbol that conveys meaning, such as an icon or pictogram. Part of the WAI-ARIA Graphics Module 1.0.
⌨ Keyboard Interaction
Not typically interactive.
⚠ Notes
Part of the WAI-ARIA Graphics Module 1.0. Provide an accessible name via aria-label or aria-labelledby. If purely decorative, use aria-hidden=true instead.
Supported properties
aria-labelaria-labelledby