Tutorial by Examples

A message with important, and usually time-sensitive, information. <div role="alert" aria-live="assertive">Your session will expire in 60 seconds.</div> Note that I've included both role="alert" and aria-live="assertive" at the same time. The...

A type of dialog that contains an alert message, where initial focus goes to an element within the dialog. <div role="alertdialog"> <h1>Warning</h1> <div role="alert">Your session will expire in 60 seconds.</div> </div>

A region declared as a web application, as opposed to a web document. In this example, the application is a simple calculator that might add two numbers together. <div role="application"> <h1>Calculator</h1> <input id="num1" type="text"> +...

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

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

A cell in a tabular container. <table> <thead> <!-- etc --> </thead> <tbody> <td role="cell">95</td> <td role="cell">14</td> <td role="cell">25</td> </tbody> </t...

A checkable input that has three possible values: true, false, or mixed. <p> <input type="checkbox" role="checkbox" aria-checked="false"> I agree to the terms </p>

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 presentation of a select; usually similar to a textbox where users can type ahead to select an option, or type to enter arbitrary text as a new item in the list. <input type="text" role="combobox" aria-expanded="false"> Typically, you would use JavaScript to...

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 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 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 landmark region that contains a collection of items and objects that, as a whole, combine to create a form. Using the semantically correct HTML element <form> implies default ARIA semantics, meaning role=form is not required as you should not apply a contrasting role to an element that is a...

A grid is an interactive control which contains cells of tabular data arranged in rows and columns, like a table. <table role="grid"> <thead> <!-- etc --> </thead> <tbody> <!-- etc --> </tbody> </table>

A cell in a grid or treegrid. <table role="grid"> <thead> <!-- etc --> </thead> <tbody> <tr> <td role="gridcell">17</td> <td role="gridcell">64</td> <td role="gr...

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