ARIA Roles and Labels

ARIA (Accessible Rich Internet Applications) is a set of attributes defined by the W3C that help make dynamic web content and advanced UI components more accessible to people using assistive technologies like screen readers. ARIA defines semantics that can be applied to elements, with these divided into roles (defining a type of user interface element) and states and properties that are supported by a role.

ARIA attributes

Roles

Roles define what an element is and support interaction in a way that is consistent with user expectation. They also provide a way to determine the structure of a page such as main content (role="main") or a navigation region (role="navigation"), enabling assistive technology users to orientate themselves and navigate easily to various sections. For example, being able to navigate content by headings using screen reader navigation commands.

ARIA roles are added to HTML elements using role="role type", where role type is the name of a role in the ARIA specification. For example, role="button". Some roles require the inclusion of associated ARIA states and properties.

By default, many semantic elements in HTML have a role. For example, <input type="radio"> has the "radio" role. Roles should not be placed on elements that already have semantic meaning. They should only be placed on non-semantic elements,<div> and <span> elements where semantic meaning is lacking.

Reference: ARIA role types, Using ARIA: Roles, states, and properties

States and properties

States and properties are used to communicate dynamic changes in content. Use cases in Adapt include:

aria-expanded="true" used to identify collapsable content, for example Accordion body and Media transcripts.

aria-haspopup="dialog" identifies buttons that trigger an interactive popup to display, for example the navigation drawer button or a Hotgraphic pin.

Reference: ARIA states and properties

Live regions

Simple content changes which are not interactive should be marked as live regions. A live region is explicitly denoted using the aria-live attribute. These announce updates without changing focus.

aria-live is used to set the priority with which screen readers should treat updates to live regions - the possible settings are: off, polite or assertive.

aria-live="assertive" used by ButtonsView announces question-specific correct answer text when the user toggles the 'show correct answer' button.

Reference: ARIA live regions

Accessible name

An accessible name is the name of a user interface element. This is the text associated with an HTML element that provides users of assistive technology with a label to understand what the element purpose is and how to operate it correctly.

Reference: Accessible name, Text labels and names, How accessible names are used by the browser

Using ARIA Label in Adapt

The aria-label attribute is a description that is never displayed on screen but is relayed to a screen reader user. It defines a string that labels the current element.

This attribute can be used with any typical HTML element; it is not limited to elements that have an ARIA role assigned. Use it in cases where a text label is not visible on the screen.

<div class="navigation-inner" role="navigation">
    <a href="#" class="navigation-back-button" aria-label="Back button"></a>
    <a href="#" class="navigation-drawer-toggle-button" aria-label="Drawer"></a>
</div>