Tutorial by Examples: a

A section of a page that consists of a composition that forms an independent part of a document, page, or site. Setting an ARIA role and/or aria-* attribute that matches the default implicit ARIA semantics is unnecessary and is not recommended as these properties are already set by the browser....

A region that contains mostly site-oriented content, rather than page-specific content. <div role="banner"> <h1>My Site</h1> <ul> <li><a href="/">Home</a></li> <li><a href="/about">About</...

A cell containing header information for a column. <table role="grid"> <thead> <tr> <th role="columnheader">Day 1</th> <th role="columnheader">Day 2</th> <th role="columnheader">Day ...

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 dialog is an application window that is designed to interrupt the current processing of an application in order to prompt the user to enter information or require a response. <div role="dialog"> <p>Are you sure?</p> <button role="button">Yes</b...

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

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

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

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