Tutorial by Examples: t

An input that allows for user-triggered actions when clicked or pressed. <button role="button">Add</button>

A supporting section of the document, designed to be complementary to the main content at a similar level in the DOM hierarchy, but remains meaningful when separated from the main content. <div role="complementary"> <h2>More Articles</h2> <ul> <!-- ...

A large perceivable region that contains information about the parent document. <p role="contentinfo"> Author: Albert Einstein<br> Published: August 15, 1940 </p>

A definition of a term or concept. <span role="term" aria-labelledby="def1">Love</span> <span id="def1" role="definition">an intense feeling of deep affection.</span>

A list of references to members of a group, such as a static table of contents. <ul role="directory"> <li><a href="/chapter-1">Chapter 1</a></li> <li><a href="/chapter-2">Chapter 2</a></li> <li><a ...

A region containing related information that is declared as document content, as opposed to a web application. <div role="document"> <h1>The Life of Albert Einstein</h1> <p>Lorem ipsum...</p> </div>

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>

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

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

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 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>