Tutorial by Examples

A checkable menuitem in a group of menuitemradio roles, only one of which can be checked at a time. <ul role="menu"> <li role="menuitemradio" aria-checked="true">Left</li> <li role="menuitemradio" aria-checked="false">C...

A collection of navigational elements (usually links) for navigating the document or related documents. <ul role="navigation"> <li><a href="/">Home</a></li> <li><a href="/about">About</a></li> <li>&lt...

A section whose content is parenthetic or ancillary to the main content of the resource. <p>Lorem ipsum...</p> <p>Lorem ipsum...</p> <p role="note">Lorem ipsum...</p>

A selectable item in a select list. <ul role="listbox"> <li role="option">Option 1</li> <li role="option">Option 2</li> <li role="option">Option 3</li> </ul>

An element whose implicit native role semantics will not be mapped to the accessibility API. <div style="float:left;">Some content on the left.</div> <div style="float:right;">Some content on the right</div> <div role="presentation" style=&...

An element that displays the progress status for tasks that take a long time. <progress role="progressbar" value="25" max="100">25%</progress>

A checkable input in a group of radio roles, only one of which can be checked at a time. <div role="radiogroup"> <input role="radio" type="radio" aria-checked="true"> One<br> <input role="radio" type="radio" aria...

A large perceivable section of a web page or document, that the author feels is important enough to be included in a page summary or table of contents, for example, an area of the page containing live sporting event statistics. <div role="region"> Home team: 4<br> Away t...

A group of radio buttons. <div role="radiogroup"> <input role="radio" type="radio" aria-checked="true"> One<br> <input role="radio" type="radio" aria-checked="false"> Two<br> <input role=...

A row of cells in a tabular container. <table> <thead> <!-- etc --> </thead> <tbody> <tr role="row"> <!-- etc --> </tr> </tbody> </table>

A group containing one or more row elements in a grid. <table> <thead role="rowgroup"> <!-- etc --> </thead> <tbody role="rowgroup"> <!-- etc --> </tbody> </table>

A cell containing header information for a row in a grid. <table role="grid"> <thead> <!-- etc --> </thead> <tbody> <tr> <th role="rowheader">Day 1</th> <td>65</td> </tr> ...

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. <div id="content1">Lorem ipsum...</div> <div role="scrollbar" aria-controls="content1" ...

A landmark region that contains a collection of items and objects that, as a whole, combine to create a search facility. <div role="search"> <input role="searchbox" type="text"> <button role="button">Search</button> </div>...

A type of textbox intended for specifying search criteria. <div role="search"> <input role="searchbox" type="text"> <button role="button">Search</button> </div>

A divider that separates and distinguishes sections of content or groups of menuitems. <p>Lorem ipsum...</p> <hr role="separator"> <p>Lorem ipsum...</p>

A user input where the user selects a value from within a given range. <div role="slider" aria-valuemax="100" aria-valuemin="0" aria-valuenow="25"> <div class="sliderhandle"></div> </div>

A form of range that expects the user to select from among discrete choices. <input role="spinbutton" aria-valuemax="100" aria-valuemin="0" aria-valuenow="25" type="number" value="25">

A container whose content is advisory information for the user but is not important enough to justify an alert, often but not necessarily presented as a status bar. <div role="status">Online</div>

A type of checkbox that represents on/off values, as opposed to checked/unchecked values. <select role="switch" aria-checked="false"> <option>On</option> <option selected>Off</option> </select>