ARIA

The information presented within this glossary entry is aimed at website owners seeking to learn the ropes of web accessibility. Technical elements are described in layman’s terms, and, as a rule, all topics pertaining to the legalities of web accessibility are presented in as simplified a manner as possible. This guide has no legal bearing, and cannot be relied on in the case of litigation.

ARIA, short for Accessible Rich Internet Applications, is a set of HTML roles and attributes developed by the World Wide Web Consortium (W3C). It aims to enhance the accessibility of web content and web-based applications for members of the disability community. 

ARIA provides a standardized framework for developers to make their websites and web applications more inclusive and interactive, particularly for people who rely on assistive technologies such as screen readers.

By incorporating ARIA attributes and roles into their code, developers can improve the accessibility of complex user interface components, dynamic content, and interactivity, ultimately ensuring a more seamless and equitable web experience for all users.

ARIA's impact on web accessibility

ARIA plays a crucial role in enhancing web accessibility by addressing the limitations of HTML code. ARIA fills the gap left by regular HTML by introducing extra attributes and roles that improve how elements are understood by assistive technologies.

HTML elements have conditions or states that can be defined for them, but they have limitations. ARIA supplements HTML by providing additional roles and states that can be added to elements. These additions help assistive technologies accurately convey information to individuals with disabilities.

Additionally, ARIA can help convey the structure and behavior of more complex custom widgets, such as toolbars and datepickers. It also enables the definition of live regions, which are areas on a web page that can dynamically update their content. These live regions notify assistive technologies when changes occur, such as updates in carousel content or the appearance of notifications. This ensures that individuals with disabilities receive the update, not just information regarding the update.

Who develops ARIA?

W3C’s Web Accessibility Initiative (WAI) is responsible for the development and maintenance of ARIA. The WAI brings together industry experts, organizations, and individuals with disabilities to collaborate on creating guidelines and specifications that promote web accessibility. ARIA is continuously evolving through the collaborative efforts of the WAI community, ensuring that it remains up to date and aligned with the needs of individuals with disabilities and the advancements in web technologies.

ARIA throughout the years

ARIA has continuously evolved since its initial development, with each version building upon the previous one to address emerging challenges in web accessibility. ARIA 1.0, released in 2014, laid the foundation by introducing roles, properties, and states to enhance the accessibility of web content. It provided developers with a standardized approach to make their applications more inclusive.

ARIA 1.1, launched in 2017, focused on improving existing features, enhancing interoperability, and addressing specific use cases. In 2018, ARIA 1.2 introduced additional features for complex widgets and emphasized the importance of authoring practices.

As web technologies and accessibility needs continue to evolve, the W3C's Web Accessibility Initiative (WAI) is expected to release future versions of ARIA to further refine and expand its capabilities.

The ARIA Authoring Practices Guide

The ARIA Authoring Practices Guide is a comprehensive resource that provides guidance and recommendations for developers on how to effectively implement ARIA in web content. It offers best practices, examples, and techniques for using ARIA roles, properties, and states to enhance the accessibility of web applications.

The guide serves as a valuable reference for developers, helping them understand the correct usage and application of ARIA in various scenarios.

ARIA: a breakdown

ARIA can be broken down into three key components: roles, properties, and states.

ARIA roles

ARIA roles define the purpose and behavior of an HTML element, enabling assistive technologies to interpret and interact with them accurately. When appropriate roles, such as "button," "link," "menu," or "alert," are assigned to relevant elements, screen readers identify them as such. That way, they can introduce them to users who will then understand what they are interacting with. 

To help illustrate this, here’s an example of how a tab button would appear in HTML without an ARIA role:

<button>Name of tab</button>

And here’s how it would appear with an ARIA role:

<button role="tab">Name of tab</button>

ARIA properties

ARIA properties provide additional information about an element or modify its behavior. These properties allow developers and website owners to convey specific details that are not apparent from the element in its basic form.

Unlike ARIA roles, which define the overall purpose and behavior of an HTML element, ARIA properties provide additional details and instructions on how the element should be perceived or interacted with. 

To help illustrate this, here's an example of an HTML button element without an ARIA property — this HTML element contains only an icon and will simply be announced as “button” by a screen reader:

<button>
 <i class="fa fa-search"></i>
</button>

And here's an example of the same button with an ARIA property applied, specifically the "aria-label" property:

<button aria-label="Search">
  <i class="fa fa-search"></i>
</button>

With the "aria-label" property in place, assistive technologies, such as screen readers, can accurately convey the purpose of the button.

ARIA states

ARIA states show the current status or behavior of an HTML element. Unlike ARIA roles, which define the purpose and behavior of HTML elements, and ARIA properties, which provide additional details regarding more stable qualities, ARIA states are used to convey qualities that change. An example of this is the "aria-expanded" state, which indicates whether a collapsible section, such as a navigation menu, is currently expanded or collapsed. This allows assistive technologies to notify users about the current state of the section and adapt their browsing experience accordingly.

To help illustrate this, here's an example of an HTML button element without an ARIA state:

<button>Pause</button>

And here's an example of the same button with an ARIA state applied, specifically the "aria-pressed" state:

<button aria-pressed="false">Pause</button>

In this example, the "aria-pressed"state is utilized to indicate whether the button is currently pressed or not. By setting the value of "aria-pressed" to "false," it communicates that the button is in its default unpressed state. When screen readers encounter this ARIA state, they will be able to convey to users with disabilities that the button is currently not pressed, signaling to them that they can change that status if they choose to. 

ARIA best practices

To apply ARIA properly, developers should employ the following best practices:

Use native HTML elements

ARIA should only be used when HTML can’t do the job. If an appropriate HTML element or attribute already exists, it should be preferred because:

  1. Browsers will automatically implement appropriate keyboard interactions and visual styles (ARIA does not change behavior or appearance; it only provides information to assistive technologies)
  2. It will be simpler to implement correctly
  3. It will have more robust support from assistive technologies

Apply ARIA roles, properties, and states only when necessary

Unnecessary or excessive use of ARIA is likely to introduce confusion or conflicts, so it is best to apply ARIA roles, properties, and states thoughtfully, considering the specific accessibility needs of the web application or component

Consult with the ARIA authoring practices guide

To ensure consistent and effective usage of ARIA in your web applications, one can refer to the ARIA authoring practices guide. This guide offers valuable recommendations and pattern examples to optimize accessibility and improve the user experience

#1 Automated Web Accessibility Solution for WCAG Conformance & ADA Compliance

Drive inclusivity and meet ADA/WCAG guidelines, Try accessWidget for Free!