ARIA, or WAI-ARIA (Web Accessibility Initiative — Accessible Rich Internet Applications), is a specification designed to support accessible web applications. The Web Accessibility Initiative, under which ARIA was developed, is part of the World Wide Web Consortium (W3C), which develops web standards. This specification is designed to make web applications, widgets, and web content more accessible to people with disabilities.
Why Accessibility?
We can all agree that making websites accessible is a noble aim, and that everyone should be able to obtain and use the same information and services that many of us take for granted. But aside from humanitarian motivations, making websites and web applications accessible simply makes sense. The more people able to access your commercial site, the greater your market. Accessibility improvements can also improve site design and make your website easier to use, creating an enhanced experience for every user.
Accessibility could also soon become a legal concern — many provincial, state, and national regulations have begun to mandate that government websites comply with certain specifications. It is only a matter of time before private entities are expressly mandated to be fully accessible, too.
Using ARIA to Improve Accessibility
But how does ARIA help improve web accessibility, exactly? Web site components are becoming increasingly complex, and are beginning to pose additional accessibility challenges.
For example, if elements within your website change over time, or change with user interaction (such as a menu item that expands if you hover your mouse over it), this can cause significant problems for a user with visual challenges. HTML syntax does not always allow web developers to describe such elements properly to enable assistive technology to properly relay that information to users.
WAI-ARIA meets these challenges by assigning roles to elements, and then gives these roles properties and states. These roles, properties, and states can help assistive technology users to understand what is happening on their screens and explore their options. ARIA can help define dialogs, menus, sliders, and other elements.
Add Basic Landmarks
One of the best ways to improve site navigation for disabled users is to add basic landmarks. In the current versions of HTML and XHTML, there is no standard method by which a computer can programmatically determine the function or purpose of page elements. In other words, while you can apply headings to your page, the code itself does not specify what or where your main content, navigation and search elements are. By finding these elements and adding the complementary ARIA role, your site will become significantly more accessible.
For example:
<div id="maincontent" role="main">
<form action="search.php" role="search">
Semantic Stopgap
For most semantic elements such as header, h1, and nav, WAI-ARIA attributes are unnecessary, as these elements express what they are. In fact, if HTML5 semantic tags such as <button> or <form> are used, the appropriate ARIA semantics are added by default. Adding them manually is unnecessary and redundant. However, there are always gaps, whether in HTML5 itself, or the in browsers in which they are read.
For example, as of January 2017, Internet Explorer did not correctly expose an HTML5 role of “navigation” by default. Because Internet Explorer is still used by a significant number of people, this presents an accessibility challenge. In such cases, ARIA can be used as a stopgap, providing accessibility to HTML5 pages while browsers are catching up.
<nav role="navigation"> <ul>… </ul></nav>
In the above example, it might seem that the ARIA defined role is redundant. The nav HTML5 element already implies pretty clearly that the list of links within the element will make up a navigation control. However, if a browser with a strong user-base (like IE) does not recognize this element, defining it with ARIA can be a great help.
Visual and the Accessible Interfaces
For a website to be accessible, the current state of any element in the user interface needs to be perceivable by assistive technologies. For example, if a menu item is expanded because the user has clicked on it, revealing additional sub-menu items, assistive technologies must recognize that the menu item has been selected and expanded, and be able to report it to the user. ARIA states can facilitate that translation.
As you can see, WAI-ARIA can be used in numerous ways to improve the accessibility of your site, and these are but a few examples within this rich specification. I
