An input that allows for user-triggered actions when clicked or pressed.

The button role is used when the element is designed to look like a button but is coded as a link. Sometimes an image will be used in place of button. Adding scripting for that image will help the mouse users, but the screen reader users will not be able to understand that it is a button.

For various reasons, on web pages we find the functionalities such as Continue, Next, Confirm, Cancel etc and are coded as links. As per the semantics, these elements must be coded as buttons but not links. To ensure that the element is read as button by the screen readers role="button" can be used.

Buttons are mostly used for discrete actions. Standardizing the appearance of buttons enhances the user's recognition of the widgets as buttons and allows for a more compact display in toolbars.

Buttons support the optional attribute aria-pressed. Buttons with a non-empty aria-pressed attribute are toggle buttons. When aria-pressed is true the button is in a "pressed" state, when aria-pressed is false, it is not pressed. If the attribute is not present, the button is a simple command button.

Syntax

<a href="/continue.html" role="button">Continue</a>

A checkable input that has three possible values: true, false, or mixed.

The checkable input that has three states. Checked, unchecked and mixed. In most  cases, checked state and unchecked state is observed. The checkbox role is used in a input type radio button. Many checkboxes do not use the mixed value, and thus are effectively boolean checkboxes. For a normal input type checkbox, the screen readers by default behavior announces them as checkboxes. For input type radio buttons, if the authors want to intimate the user as checkbox, the checkbox role can be used.

aria-checked (state) can be used in conjunction with checkbox role. The aria-checked (state) will intimate the user about the state of the checkbox. Aria-checked="true" indicates the checked state of the checkbox and false indicates the unchecked state.

Syntax

<input type="radio" role="checkbox" aria-checked="true" aria-label="Male" />

A cell containing header information for a column.

To form a logical relation between the headers and the corresponding data in data tables < th> tags are used. These < th> tags are supported with HTML scope attribute. scope="col" forms a relation between the column header and its corresponding data. In certain scenarios, use of < th scope="col"> might not be possible. Usage of role="columnheader" helps in these situations. Role="rowheader" does the same functionality for < th scope=row">. Screen readers like JAWS and NVDA will recognize the columnheader (role) and rowheader(role).

columnheader can be used as a column header in a table or grid. It could also be used in a pie chart to show a similar relationship in the data.

Authors must ensure elements with role columnheader are contained in, or owned by, an element with the role row.

Example

<table summary="Marks of students for class IX">
<tr>
<td role="columnheader">Names</td>
<td role="columnheader">Mathematics</td>
<td role="columnheader">Physics</td>
<td role="columnheader">Chemistry</td>
</tr>
<tr>
<td role="rowheader">Student A</td>
<td>70</td>
<td>80</td>
<td>90</td>
</tr>
<tr>
<td role="rowheader">Student B</td>
<td>60</td>
<td>70</td>
<td>80</td>
</tr>
<tr>
<td role="rowheader">Student C</td>
<td>75</td>
<td>85</td>
<td>95</td>
</tr>
</table>

Note: Because cells are organized into rows, there is not a single container element for the column. The column is the set of gridcell elements in a particular position within their respective row containers.

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.

combobox is the combined presentation of a single line text field with a list box popup. The combobox may be editable. Typically editable combo boxes are used for autocomplete behavior,  and authors should set aria-autocomplete attribute on the text field.

In an input type text box when an auto complete behavior is present a combo box role is used. In addition, the aria-owns role option can be used to have a best experience. Take a look at the below example for a simple editable combobox with combobox role. 

Note: Elements with the role combobox have an implicit aria-haspopup value of true.

Example

<input type="text" aria-label="Wild Animals" role="combobox" aria-haspopup="true" aria-autocomplete="list" aria-owns="owned_listbox" aria-activedescendant="selected_option">
<ul role="listbox” id=”owned_listbox">
<li role="option">Zebra</li>
<li role="option" id="selected_option">Tiger</li>
<li role="option">Lion</li>
<li role="option">Elephant</li>
<li role="option">Fox</li>
</ul>

• If an author sets a combobox's value of aria-autocomplete to 'none' (default), authors must manage and set focus on the associated listbox, so assistive technologies can follow the currently selected value.
• If an author sets a combobox's value of aria-autocomplete to 'inline' or 'both', authors must update the value of the focused text field, so assistive technologies can announce the currently selected value.
• If an author sets a combobox's value of aria-autocomplete to 'list', user agents must expose changes to the aria-activedescendant attribute on the combobox while the combobox remains focused. If a change to the aria-activedescendant attribute occurs while the combobox is focused, assistive technologies should alert the user of that change, for example, by speaking the text alternative of the new active descendant element. Authors should associate the combobox textfield with its listbox using aria-owns. For example:

  <input type="text" aria-label="Tag" role="combobox" aria-expanded="true"
    aria-autocomplete="list" aria-owns="owned_listbox" aria-activedescendant="selected_option">
  <ul role="listbox" id="owned_listbox">
    <li role="option">Zebra</li>
    <li role="option" id="selected_option">Zoom</li>
  </ul>

To be keyboard accessible, authors should manage focus of descendants for all instances of this role.

Note: In XForms  the same select can have one of 3 appearances: combo-box, drop-down box, or group of radio-buttons. Many browsers allow users to type ahead to existing choices in a drop-down select widget. This specification does not constrain the presentation of the combo box.

Note: Elements with the role combobox have an implicit aria-haspopup value of true.

A form of widget that performs an action but does not receive input data.

Note: command is an abstract role used for the ontology. Authors are instructed not to use this role in content.

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.

Any section of the document that supports but is separable from the main content, but is meaningful on its own even when separated from it. Contents such as advertisements on the page are marked as complementary landmarks. HTML 5 aside tag does the same work that complementary role does. 

There are various types of content that would appropriately have this role. For example, in the case of a portal, this may include but not be limited to show times, current weather, related articles, or stocks to watch. The complementary role indicates that contained content is relevant to the main content. If the complementary content is completely separable main content, it may be appropriate to use a more general role.

User agents should treat elements with the role of complementary as navigational landmarks. Screen readers have good support with complementary landmark and will announce the beginning and end of the landmark.

Syntax

<div role="complementary"> </div>

A widget that may contain navigable descendants or owned children.

Authors should ensure that a composite widget exists as a single navigation stop within the larger navigation system of the web page. Once the composite widget has focus, authors should provide a separate navigation mechanism for users to navigate to elements that are descendants or owned children of the composite element.

Note: composite is an abstract role used for the ontology. Authors are instructed not to use this role in content.

A large perceivable region that contains information about the parent document.

Contentinfo is a landmark region. The region on a webpage that contains the footer information is marked with the contentinfo role. In HTML 5, the same information is conveyed with the footer tag. Screen reader announces the beginning and the end of the contentinfo landmark.

Examples of information included in this region of the page are copyrights and links to privacy statements.

User agents should treat elements with the role of contentinfo as navigational landmarks.

Within any document or application, the author should mark no more than one element with the contentinfo role.

Note: Because document and application elements can be nested in the DOM, they may have multiple contentinfo elements as DOM descendants, assuming each of those is associated with different document nodes, either by a DOM nesting (e.g., document within document) or by use of the aria-owns attribute.

Syntax

<div role="contentinfo">Footer content and links </div>

A definition of a term or concept.

The aria specification does not provide a role to specify the definition term, but host languages may provide such an element. If a host language has an appropriate element for the term (e.g., dfn or dt in HTML), authors should include the term in that element. Authors should identify the definition term by using an aria-labelledby attribute on each element with a role of definition.

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.

A dialog role is almost equal to an alertdialog role.

A dialog role is also used to alert the user with a message. Unlike the alert role, the user can interact with the message. The initial focus goes to an element in the alert and user can navigate within the dialog box using keyboard and mouse. Developers should take care that the keyboard and mouse interactions are within the dialog when it is opened. Provide the alert message to the user with aria-describedby property to ensure that the message is conveyed to the screen reader user. 

Authors should provide a dialog label. Labels may be provided with the aria-label or aria-labelledby attribute if other mechanisms are not available. Authors should ensure each active dialog has a focused descendant element that has keyboard focus.