Using ARIA Roles to Make Your Websites More Accessible
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Accessible Rich Internet Applications (ARIA) is a W3C specification that sets out to make web pages and web applications more accessible. When a web page is made more accessible to people with disabilities, it also becomes easier to use for people without disabilities, thanks to both direct and indirect benefits.
For example, the option to adjust zoom levels in a web browser is a direct benefit of accessibility. This change benefits the visually impaired, but also people who just have tired eyes, or who need the text enlarged for some other reason.
An indirect benefit of accessibility extends the accessibility feature to make it useful for more than just its original intended purpose. For example, sidewalk ramps were intended to help people in wheelchairs, but they're also useful for parents with strollers, children and small animals with short legs, people with wheeled luggage—even some types of wildlife have been seen detouring to use the ramps.
ARIA roles can make your web pages more accessible for disabled people, but they can also make them easier for non-disabled people to use. And you may be surprised at how easy these roles are to add.
What Are ARIA Roles?
The ARIA specification is very detailed and somewhat difficult to understand, but the part that most web designers should note is the ARIA roles. A role is a keyword that describes the purpose of the HTML element containing it. For example, a role can define a major area of a web page (main, heading, navigation), a type of widget (menuitem, slider, button), the structure of the HTML document (article, toolbar, listitem), or other, more abstract states like whether an item might change or is scrollable.
The most important thing to remember is that ARIA roles don't make any changes to your web page design. They don't change how the element works or how it will look. Roles simply provide information about the element so that user agents can make the right choices for how they display or present the element.
In most cases, if an ARIA role is working correctly, it appears to do nothing at all. That's because the roles are intended for use by assistive technology (AT). You can read more about how ARIA roles might be tested at the ARIA Test Cases page on the Mozilla Developer Network.
Types of ARIA Roles
Several types of roles are defined in the ARIA specification:
- Landmark roles
- Widget roles
- Document structure roles
- Abstract roles
By understanding how and when you should apply these roles in your documents, you can make your web pages more accessible.
Landmark Roles
Landmark roles are the most important roles for web designers to use, because these roles focus on the large content areas of a page. Screen readers and other assistive technologies use landmark roles to help create navigation through the page and the website.
The following table describes the landmark roles.
|
Landmark Role |
Description |
|
application |
This role defines the element as a web application rather than a web page. |
|
banner |
The banner landmark includes site-specific content such as the organization's logo, name, sponsors, and so on. |
|
complementary |
A complementary section of a page includes content that complements the main area but isn't part of it. In HTML, this content is most often defined using the <aside> tag. |
|
contentinfo |
This landmark includes information about the parent document. It might list things like copyright information, privacy statements, or the date on which the page was published or last updated. |
|
form |
The form role includes a collection of form elements. Use this role to collect form elements when you aren't using the <form> tag. |
|
main |
This landmark indicates the primary content of the page. In HTML, this is represented by the <main> tag. |
|
navigation |
This landmark includes a collection of navigational elements. The <nav> element in HTML defines this role. |
|
search |
This landmark indicates a region that includes a search widget. |
If you use only one type of ARIA role, the landmark roles are the ones you should use. Since these roles define large chunks of the page, you should only need to define them on two or three elements at most.
Widget Roles
Widget roles describe patterns of interaction that don't have semantic equivalents in HTML. These roles let you tell the user agent that the element is a timer, has a tooltip, and so on, allowing the user agent to display the content more effectively.
Following are some of the types of widget roles:
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Use widget roles only when you don't have an appropriate HTML element (such as a slider) or you can't use the element (like <button>) for some reason.
Document Structure Roles
Document structure roles provide a structural description for a page section. Most of these roles already have an HTML element that serves the same purpose. You should always use the HTML element as your first choice, rather than setting an ARIA role.
Following are the document structure roles:
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Abstract Roles
Abstract roles are not used by front-end developers or web designers. These roles are used by web browsers to help streamline a web page and make it load more efficiently. You'll never see them in an HTML document.
Why Should You Use ARIA Roles?
Using ARIA roles can improve your website in two areas: accessibility and semantics. As mentioned previously, making your site more accessible makes your web pages more usable by people with (or without) disabilities. Even if visitors cannot see or hear, they can still get your accessible page content and interact with it in a meaningful way.
Many countries have laws surrounding accessibility. In the United States, for example, governmental websites are expected to be accessible, and often sites in the public sector must abide by accessibility rules as well. Some countries also require certain businesses in the private sector to have accessible websites.
Even if your site is not required by law to be accessible, making it accessible is a good idea. By making your site accessible, you make it easier for more people to use the site.
But you can also use ARIA roles to make your site more semantic. Many ARIA roles have been incorporated into HTML as explicit HTML elements; for example, <article>, <nav>, and <aside>. But not all ARIA roles have comparable HTML elements. By defining your HTML elements with semantic roles, you tell the browser or AT viewing your page exactly what to expect from that element.
While it's a good idea to use the exact HTML elements rather than the ARIA roles, sometimes that's not possible. This situation makes the ARIA role even more important. For example, to an AT this HTML looks like a link, not a button:
<a href="#">Submit the Form</a>
Even if your CSS styles it to look like a button, the AT will still treat it like a normal link. By adding the button role to the link, you can reduce confusion and give the link a semantic value that differs from its assumed value. (Where do you add the roles? The next section provides details.)
Using ARIA Roles in HTML
Adding ARIA roles to HTML is very easy. Simply add the role attribute to the element you want to define, and include the role's type as the value. Returning to the preceding example, you indicate that the link is a button by adding role="button" in the link tag:
<a href="#" role="button">Submit the Form</a>
Here are a few guidelines to follow when adding ARIA roles to your web pages:
- Choose HTML first. If a native HTML element already has the semantics you want, use the HTML element rather than a different element with an ARIA role. HTML elements usually require fewer characters to write than adding an ARIA role (for example, <main> is shorter to download than role="main"), which also saves some download speed.
- Don't be redundant. If you use an HTML element that has semantics, don't add an ARIA role on top of that. For instance, you don't need to write <button role="button">; just using the <button> tag is sufficient.
- Don't change the native semantics. For example, don't try to be cute by saying that your <h1> is really a button (<h1 role="button">). Instead, use a second HTML element to define the button state (<h1><button>).
- Use modern HTML. This comes back to the first rule, "Choose HTML first." With modern HTML, you should be using tags like <article> rather than the ARIA article role.
- Validate your ARIA roles. The best way to avoid making a mistake is to validate your HTML with the ARIA roles. You can use the Nu HTML Checker from the W3C to check your ARIA roles, along with the rest of your HTML.
Many more ARIA roles are available than I can cover in this article. You can define things like elements that are labeled by other elements, whether a form field is required—even define hidden items so that the AT deliberately excludes them from the document. Now that you have a basic understanding of ARIA roles, go out and learn more, so you can make your websites as accessible and useful as possible.