Tutorial by Examples: o

A set of user interface objects which are not intended to be included in a page summary or table of contents by assistive technologies. <div role="group"> <button role"button">Previous</button> <button role"button">Next</button> &lt...

A heading for a section of the page. <h1 role="heading">Introduction</h1> <p>Lorem ipsum...</p>

A container for a collection of elements that form an image. <figure role="img"> <img alt="A cute cat." src="albert.jpg"> <figcaption>This is my cat, Albert.</figcaption> <figure>

An interactive reference to an internal or external resource that, when activated, causes the user agent to navigate to that resource. In the majority of cases setting an ARIA role and/or aria-* attribute that matches the default implicit ARIA semantics is unnecessary and not recommended as these...

A group of non-interactive list items. <ul role="list"> <li role="listitem">One</li> <li role="listitem">Two</li> <li role="listitem">Three</li> </ul>

A widget that allows the user to select one or more items from a list of choices. <ul role="listbox"> <li>One</li> <li>Two</li> <li>Three</li> </ul> Typically, you would use JavaScript to build the multiple-selection functionali...

A single item in a list or directory. <ul role="list"> <li role="listitem">One</li> <li role="listitem">Two</li> <li role="listitem">Three</li> </ul>

A type of live region where new information is added in meaningful order and old information may disappear. <ul role="log"> <li>User 1 logged in.</li> <li>User 2 logged in.</li> <li>User 1 logged out.</li> </ul>

The main content of a document. <!-- header & nav here --> <div role="main"> <p>Lorem ipsum...</p> </div> <!-- footer here -->

A type of live region where non-essential information changes frequently. <ul role="marquee"> <li>Dow +0.26%</li> <li>Nasdaq +0.54%</li> <li>S&P +0.44%</li> </ul>

Content that represents a mathematical expression. <img role="math" alt="y=mx+b" src="slope.png">

A type of widget that offers a list of choices to the user. <ul role="menu"> <li role="menuitem">New</li> <li role="menuitem">Open</li> <li role="menuitem">Save</li> <li role="menuitem">Clo...

A presentation of menu that usually remains visible and is usually presented horizontally. <ul role="menubar"> <li role="menuitem">File</li> <li role="menuitem">Edit</li> <li role="menuitem">View</li> <...

An option in a group of choices contained by a menu or menubar. <ul role="menubar"> <li role="menuitem">File</li> <li role="menuitem">Edit</li> <li role="menuitem">View</li> <li role="menuitem&quot...

A checkable menuitem that has three possible values: true, false, or mixed. <ul role="menu"> <li role="menuitem">Console</li> <li role="menuitem">Layout</li> <li role="menuitemcheckbox" aria-checked="true"&g...

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=&...