An interactive reference to an internal or external resource that, when activated, causes the user agent to navigate to that resource.

A link or hyperlink is a HTML element that connects one web page to another. Using the HTML < a> tag, the pages are linked with the "href" attribute. Screen readers are customized to recognize < a> and inform the user of the link along with the link text. However, by the introduction of web 2.0 technologies, any HTML element can be made clickable. This means that a link between two pages can be made without using the < a> tag.

Due to this advanced style of coding, users of screen readers will not recognize the link and will ignore the content of that page. Users who use only the keyboard will not be able to focus on this element.

To bridge this gap, ARIA introduces link (role). In the < span> or < div> where you use the clickable functionality just add role=”link”. Now your screen reader will recognize the element as a link. To gain keyboard focus to this element, add the "tabindex" attribute.The look and feel of a link can be customized with CSS.

Example

<span role="link" tabindex="0" onClick="somefunction()">ARIA role with link</span>

If this is a native link in the host language (such as an HTML anchor with an href value), activating the link causes the user agent to navigate to that resource. If this is a simulated link, the web application author is responsible for managing navigation.

Note: If pressing the link triggers an action but does not change browser focus or page location, authors are advised to consider using the button role instead of the link role.

A group of non-interactive list items.

Sometimes content developers want to put together few bulleted points. As per HTML semantics, any related elements having more than 3 items should be wrapped in HTML lists. Due to various reasons, HTML lists might not be possible. In such scenarios, aria list role can be used. In the < div> containing the items just add the role="list" and that should do the magic.

Lists contain children whose role is listitem, or elements whose role is group which in turn contains children whose role is listitem.

Syntax

<div role="list">List Items</div>

A widget that allows the user to select one or more items from a list of choices.

Listbox (role) is similar to a combobox role or a checkbox role. Unlike a combobox role, in listbox role the user can select more than one option.

Items within the list are static and, unlike standard HTML select elements, may contain images. List boxes contain children whose role is option.

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

A single item in a list or directory.

When list (role) is used for providing the list, content authors should use listitem (role) for the items in the list (li). Even lists within the lists also can be used with aria. To inform the level of list item, use aria-level attribute. A first level list item can use aria-level=”1”, second level list items (lists within the lists) use aria-level=”2” etc.

Authors must ensure that elements with role listitem are contained in, or owned by, an element with the role list or group.

Syntax

<div role="list">
<span role="listitem" aria-level="1">Option 1</span>
<span role="listitem" aria-level="1">Option 2
<span role="listitem" aria-level="2">Option 2 a </span>
<span role="listitem" aria-level="2">Option 2b</span>
<span role="listitem" aria-level="2">Option 2c</span>
</span>
<span role="listitem" aria-level="1">Option 3</span>
</div>

A type of live region where new information is added in meaningful order and old information may disappear.

In a live region of the page where new content is added and the added content is intimated to the user the log (role) is used. Usually in applications such as chat widgets, the new message that arrives should be intimated to the user. This should follow a sequential order.

Elements with the role log have an implicit aria-live value of polite. However if the updated content should be intimated to the user interrupting the existing work aria-live can be set to assertive. When entire live region should be intimated to the user set aria-atomic="true".

Examples include chat logs, messaging history, game log, or an error log. In contrast to other live regions, in this role there is a relationship between the arrival of new items in the log and the reading order. The log contains a meaningful sequence and new information is added only to the end of the log, not at arbitrary points.

Microsoft Active Accessibility accRole Property: 

The main content of a document.

This marks the content that is directly related to or expands upon the central topic of the document. The main role is a non-obtrusive alternative for "skip to main content" links, where the navigation option to go to the main content (or other landmarks) is provided by the user agent through a dialog or by assistive technologies. In HTML 5, the < main> tag identifies the main area of the page.

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

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

Note: Because document and application elements can be nested in the DOM, they may have multiple main 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="main">
Main content goes here
</div>

A type of live region where non-essential information changes frequently.

Common usages of marquee include stock tickers and ad banners. For informing the user about the live updates in a sequential order, use the log role. The primary difference between a marquee and a log is that logs usually have a meaningful order or sequence of important content changes.

Note: Elements with the role marquee maintain the default aria-live="off".

Content that represents a mathematical expression.

Content with the role math is intended to be marked up in an accessible format such as MathML, or with another type of textual representation such as TeX or LaTeX, which can be readily converted to an accessible format by assistive technologies.

This role provides a hook whereby a plug-in mechanism can provide multi-modal access to compliant MathML, as well as enabling support for MathML in "mainstream" user agents.

While it is inappropriate to use an image of a mathematical expression in the math role, there exists a significant amount of legacy content where images are used to represent mathematical expressions. For purposes of repair, if an image has been used to represent a mathematical expression, the text equivalent defined for that image should be valid MathML or TeX. Such images should also be labeled by text that describes the mathematical expression as it might be spoken, using the aria-describedby attribute.

MathML example:

<div role="math" aria-label="6 divided by 4 equals 1.5">
  <math xmlns="http://www.w3.org/1998/Math/MathML">
    <mfrac>
      <mn>6</mn>
      <mn>4</mn>
    </mfrac>
    <mo>=</mo>
    <mn>1.5</mn>
  </math>
</div>

TeX example:

<div role="math" aria-label="6 divided by 4 equals 1.5">
  \frac{6}{4}=1.5
</div>

A type of widget that offers a list of choices to the user.

A menu is often a list of common actions or functions that the user can invoke. The menu role is appropriate when a list of menu items is presented in a manner similar to a menu on a desktop application. Each menu has a list of items or choices which are marked with role menu item. If the menus are displayed horizontally, the horizontal appearance can be considered as menu bar and the role menubar can be assigned.

Menu (role) will be owned by the menubar role.

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

A presentation of menu that usually remains visible and is usually presented horizontally.

The menubar role is used to create a menu bar similar to those found in Windows, Mac, and Gnome desktop applications. A menu bar is used to create a consistent set of frequently used commands. Authors should ensure that menubar interaction is similar to the typical menu bar interaction in a desktop graphical user interface.

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