Home > Articles

Using ARIA Roles to Make Your Websites More Accessible

  • Print
  • + Share This
Jennifer Kyrnin, author of Sams Teach Yourself Responsive Web Design in 24 Hours, considers ARIA roles to be an important accessibility tool for every website. Learn about the most useful ARIA roles and how to include them relatively painlessly in your pages.
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:

  • alert
  • alertdialog
  • button
  • checkbox
  • dialog
  • gridcell
  • link
  • log
  • marquee
  • menuitem
  • menuitemcheckbox
  • menuitemradio
  • option
  • progressbar
  • radio
  • scrollbar
  • slider
  • spinbutton
  • status
  • tab
  • tabpanel
  • textbox
  • timer
  • tooltip
  • treeitem

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:

  • article
  • columnheader
  • definition
  • directory
  • document
  • group
  • heading
  • img
  • list
  • listitem
  • math
  • note
  • presentation
  • region
  • row
  • rowgroup
  • rowheader
  • separator
  • toolbar

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.

  • + Share This
  • 🔖 Save To Your Account

InformIT Promotional Mailings & Special Offers

I would like to receive exclusive offers and hear about products from InformIT and its family of brands. I can unsubscribe at any time.

Overview


Pearson Education, Inc., 221 River Street, Hoboken, New Jersey 07030, (Pearson) presents this site to provide information about products and services that can be purchased through this site.

This privacy notice provides an overview of our commitment to privacy and describes how we collect, protect, use and share personal information collected through this site. Please note that other Pearson websites and online products and services have their own separate privacy policies.

Collection and Use of Information


To conduct business and deliver products and services, Pearson collects and uses personal information in several ways in connection with this site, including:

Questions and Inquiries

For inquiries and questions, we collect the inquiry or question, together with name, contact details (email address, phone number and mailing address) and any other additional information voluntarily submitted to us through a Contact Us form or an email. We use this information to address the inquiry and respond to the question.

Online Store

For orders and purchases placed through our online store on this site, we collect order details, name, institution name and address (if applicable), email address, phone number, shipping and billing addresses, credit/debit card information, shipping options and any instructions. We use this information to complete transactions, fulfill orders, communicate with individuals placing orders or visiting the online store, and for related purposes.

Surveys

Pearson may offer opportunities to provide feedback or participate in surveys, including surveys evaluating Pearson products, services or sites. Participation is voluntary. Pearson collects information requested in the survey questions and uses the information to evaluate, support, maintain and improve products, services or sites, develop new products and services, conduct educational research and for other purposes specified in the survey.

Contests and Drawings

Occasionally, we may sponsor a contest or drawing. Participation is optional. Pearson collects name, contact information and other information specified on the entry form for the contest or drawing to conduct the contest or drawing. Pearson may collect additional personal information from the winners of a contest or drawing in order to award the prize and for tax reporting purposes, as required by law.

Newsletters

If you have elected to receive email newsletters or promotional mailings and special offers but want to unsubscribe, simply email information@informit.com.

Service Announcements

On rare occasions it is necessary to send out a strictly service related announcement. For instance, if our service is temporarily suspended for maintenance we might send users an email. Generally, users may not opt-out of these communications, though they can deactivate their account information. However, these communications are not promotional in nature.

Customer Service

We communicate with users on a regular basis to provide requested services and in regard to issues relating to their account we reply via email or phone in accordance with the users' wishes when a user submits their information through our Contact Us form.

Other Collection and Use of Information


Application and System Logs

Pearson automatically collects log data to help ensure the delivery, availability and security of this site. Log data may include technical information about how a user or visitor connected to this site, such as browser type, type of computer/device, operating system, internet service provider and IP address. We use this information for support purposes and to monitor the health of the site, identify problems, improve service, detect unauthorized access and fraudulent activity, prevent and respond to security incidents and appropriately scale computing resources.

Web Analytics

Pearson may use third party web trend analytical services, including Google Analytics, to collect visitor information, such as IP addresses, browser types, referring pages, pages visited and time spent on a particular site. While these analytical services collect and report information on an anonymous basis, they may use cookies to gather web trend information. The information gathered may enable Pearson (but not the third party web trend services) to link information with application and system log data. Pearson uses this information for system administration and to identify problems, improve service, detect unauthorized access and fraudulent activity, prevent and respond to security incidents, appropriately scale computing resources and otherwise support and deliver this site and its services.

Cookies and Related Technologies

This site uses cookies and similar technologies to personalize content, measure traffic patterns, control security, track use and access of information on this site, and provide interest-based messages and advertising. Users can manage and block the use of cookies through their browser. Disabling or blocking certain cookies may limit the functionality of this site.

Do Not Track

This site currently does not respond to Do Not Track signals.

Security


Pearson uses appropriate physical, administrative and technical security measures to protect personal information from unauthorized access, use and disclosure.

Children


This site is not directed to children under the age of 13.

Marketing


Pearson may send or direct marketing communications to users, provided that

  • Pearson will not use personal information collected or processed as a K-12 school service provider for the purpose of directed or targeted advertising.
  • Such marketing is consistent with applicable law and Pearson's legal obligations.
  • Pearson will not knowingly direct or send marketing communications to an individual who has expressed a preference not to receive marketing.
  • Where required by applicable law, express or implied consent to marketing exists and has not been withdrawn.

Pearson may provide personal information to a third party service provider on a restricted basis to provide marketing solely on behalf of Pearson or an affiliate or customer for whom Pearson is a service provider. Marketing preferences may be changed at any time.

Correcting/Updating Personal Information


If a user's personally identifiable information changes (such as your postal address or email address), we provide a way to correct or update that user's personal data provided to us. This can be done on the Account page. If a user no longer desires our service and desires to delete his or her account, please contact us at customer-service@informit.com and we will process the deletion of a user's account.

Choice/Opt-out


Users can always make an informed choice as to whether they should proceed with certain services offered by InformIT. If you choose to remove yourself from our mailing list(s) simply visit the following page and uncheck any communication you no longer want to receive: www.informit.com/u.aspx.

Sale of Personal Information


Pearson does not rent or sell personal information in exchange for any payment of money.

While Pearson does not sell personal information, as defined in Nevada law, Nevada residents may email a request for no sale of their personal information to NevadaDesignatedRequest@pearson.com.

Supplemental Privacy Statement for California Residents


California residents should read our Supplemental privacy statement for California residents in conjunction with this Privacy Notice. The Supplemental privacy statement for California residents explains Pearson's commitment to comply with California law and applies to personal information of California residents collected in connection with this site and the Services.

Sharing and Disclosure


Pearson may disclose personal information, as follows:

  • As required by law.
  • With the consent of the individual (or their parent, if the individual is a minor)
  • In response to a subpoena, court order or legal process, to the extent permitted or required by law
  • To protect the security and safety of individuals, data, assets and systems, consistent with applicable law
  • In connection the sale, joint venture or other transfer of some or all of its company or assets, subject to the provisions of this Privacy Notice
  • To investigate or address actual or suspected fraud or other illegal activities
  • To exercise its legal rights, including enforcement of the Terms of Use for this site or another contract
  • To affiliated Pearson companies and other companies and organizations who perform work for Pearson and are obligated to protect the privacy of personal information consistent with this Privacy Notice
  • To a school, organization, company or government agency, where Pearson collects or processes the personal information in a school setting or on behalf of such organization, company or government agency.

Links


This web site contains links to other sites. Please be aware that we are not responsible for the privacy practices of such other sites. We encourage our users to be aware when they leave our site and to read the privacy statements of each and every web site that collects Personal Information. This privacy statement applies solely to information collected by this web site.

Requests and Contact


Please contact us about this Privacy Notice or if you have any requests or questions relating to the privacy of your personal information.

Changes to this Privacy Notice


We may revise this Privacy Notice through an updated posting. We will identify the effective date of the revision in the posting. Often, updates are made to provide greater clarity or to comply with changes in regulatory requirements. If the updates involve material changes to the collection, protection, use or disclosure of Personal Information, Pearson will provide notice of the change through a conspicuous notice on this site or other appropriate way. Continued use of the site after the effective date of a posted revision evidences acceptance. Please contact us if you have questions or concerns about the Privacy Notice or any objection to any revisions.

Last Update: November 17, 2020