ARIA Accessibility: The Beginner’s Guide to Understanding How it Works

Download Now: Free Web Accessibility Checklist
Anna Fitzgerald
Anna Fitzgerald

Updated:

Published:

ARIA accessibility enables web authors to describe UI components in ways that assistive technologies can understand, making them accessible to assistive technology users. Let's explore what ARIA is and how it improves web accessibility.

Website owner learning about ARIA accessibility

Ideally, the internet should be for everyone. But certain functionality used in websites is not available to some users with disabilities, especially those who rely on screen readers and those who can’t use a mouse.

The problem? HTML.

Download Now: Free Website Accessibility Checklist

The previous version of HTML — HTML4 — lacked tags that semantically described certain user interface widgets, like sliders, menus, and progress bars. As a result, developers resorted to using generic elements like “div” to create these widgets. While they looked fine to users who could view the screen, they were problematic for users who couldn’t.

Website Accessibility Checklist

This checklist will help you make the following more accessible on your website:

  • Web Pages
  • Navigation
  • Video & Media
  • And More!
Learn more

    Download Free

    All fields are required.

    You're all set!

    Click this link to access this resource at any time.

    What is ARIA?

    ARIA — short for Accessible Rich Internet Applications — is a set of roles, states, and properties which can be added to HTML to describe the meaning and purpose of common user interface elements that don’t have semantic tags in HTML. By supplementing HTML in this way, ARIA attributes make web content and applications more accessible to people using assistive technologies.

    For example, ARIA provides roles like “checkbox” and “menu” to describe the type of widget being presented. ARIA also provides properties to describe the state that widgets are in, like “checked” for a checkbox or “haspopup” for a menu.

    Because ARIA controls the rendering of assistive technology users’ non-visual experience, the W3C Web Accessibility Initiative (WAI) says that, functionally, ARIA roles, states, and properties are like CSS for assistive technologies.

    Now that we understand what ARIA is, let’s go over how to use ARIA to make your site’s underlying HTML more accessible.

    ARIA Accessibility Guidelines

    Before using ARIA, it's important to take the time to understand and apply the ARIA accessibility guidelines below. These are based on the guidelines provided by the Accessible Rich Internet Applications Working Group of the WAI in the Authoring Practices 1.2 specification.

    1. Use native HTML elements when available.

    ARIA was designed to fill a gap in HTML4. However, many semantic tags were later added in HTML5. Web authors should always prefer using the correct semantic HTML element over using an ARIA role, state, or property.

    For example, web authors should use the HTML5 <nav> element instead of the adding the ARIA role=”navigation” to a div element.

    2. Meet the user’s expectations of a given ARIA role.

    The first guideline is simple: if you use an ARIA role, you need to ensure it behaves like the user expects. For example, if you add a <div> element and define its ARIA roles as “button,” then you need to incorporate the JavaScript necessary to provide the keyboard interactions expected for a button.

    3. Use ARIA to add — not take away — accessibly semantics.

    Assistive technologies need certain information to derive the meaning and purpose of user interface elements. This information is known as accessibility semantics.

    When done right, ARIA provides accessibility semantics. When done wrong, it overrides accessibility semantics.

    ARIA can provide this required info in two ways: by cloaking the original content or by adding meaning to it. For example, let’s say you have a navigation menu with several menu items. These items each represent and are linked to an important page on your site so that users can click on one of those items — like “About” — and be taken to that corresponding page.

    In HTML, these navigation items would be anchor or <a> elements. But to convey to assistive technologies, and those using assistive technologies, that these are menu items and not links, you’d add the ARIA role “menuitem.” This would cloak the original semantics in order to make the HTML more accessible to assistive technology users.

    ARIA can also enhance the original content to describe a user interface component in a way that assistive technologies understand. For example, the aria-expanded attribute conveys that a menu is not just a menu, but an expandable one.

    The power of ARIA is also its danger. Web authors can override accessibility semantics when using ARIA incorrectly. For example, if a web author created a table element and then added the ARIA role “log” to it, assistive technology users would not be able to perceive it as a table.

    Website Accessibility Checklist

    This checklist will help you make the following more accessible on your website:

    • Web Pages
    • Navigation
    • Video & Media
    • And More!
    Learn more

      Download Free

      All fields are required.

      You're all set!

      Click this link to access this resource at any time.

      ARIA Accessibility Examples

      The WAI provides a whole suite of web standards for using ARIA in HTML. There are dozens of roles, states, and properties available for defining accessible user interface elements, including:

      • Alert and message dialogs
      • Breadcrumbs
      • Buttons
      • Carousels
      • Grids
      • Links
      • Menus, menu bars, or menu buttons
      • Sliders
      • Tables

      You can find examples for any of the elements above in the WAI Authoring Practie 1.2 specification. Below we’ll limit our focus to three elements: an alert, button, and listbox. The first will show how to use an ARIA role. The second will show how to use ARIA states, and the third how to use ARIA properties. Let’s take a look at these examples below.

      ARIA Role Example

      In this example provided by the WAI, the alert button — when clicked — triggers a message.

      Accessible alert created by adding ARIA role to a div element

      In the HTML below, you can see the button element followed by a div element with an ARIA role set to “alert.” This role identifies the div element as the container where alert content will be added or updated.

      <button type="button" id="alert-trigger">Trigger Alert</button> <div id="example" role="alert"></div> <script type="text/template" id="alert-template"> <p><span lang="da">Hej</span>, hello, <span lang="it">ciao</span>, <span lang="ja">こんにちは</span>, <span lang="ko">안녕</span></p> </script>

      ARIA State Example

      In this example provided by the WAI, the button is an accessible toggle button that can be either off or on. When this specific example button is pressed, the icon changes from a “sound on” to a “sound off” icon.

      Accessible mute toggle button created with ARIA roles and states

      In the HTML below, you can see an ARIA role and two ARIA attributes being used. The ARIA role identifies the anchor element as a button widget. Because it’s a toggle button specifically, it has an aria-pressed state. When the button is toggled off, then the value of the state is false. When the button is toggled on, the state is true.

      The other aria attribute — aria-hidden— is applied to the SVG file. Set to “true,” the aria-hidden attribute removed the SVG element so screen readers don’t read it out. Since this icon is purely decorative, removing this element can improve the experience for assistive technology users.

      <p> This <q> Mute </q> toggle button uses an <code> a </code> element. <p> <a tabindex="0" role="button" id="toggle" aria-pressed="false"> Mute <svg aria-hidden="true" focusable="false"> <use xlink:href="images/mute.svg#icon-sound"></use> </svg> </a>

      ARIA Property Example

      In this example provided by the WAI, the listbox is scrollable and allows the user to select one item from a list of choices.

      Accessible listbox created with ARIA roles and propertiesIn the HTML below, you can see two ARIA roles and and an ARIA attribute. The ARIA role set to “listbox” identifies the unordered list element as having listbox behaviors and containing the listbox options. Every list item has an ARIA role set to “option,” which identifies each selectable element containing the name of an option.

      The aria-labelledby property is set to the same value as the id name of the span element, which contains the listbox label. This provides the assistive technology user with a recognizable name of the object.

      <p> Choose your favorite transuranic element (actinide or transactinide). </p> <div class="listbox-area"> <div> <span id="ss_elem" class="listbox-label"> Transuranium elements: </span> <ul id="ss_elem_list" tabindex="0" role="listbox" aria-labelledby="ss_elem"> <li id="ss_elem_Np" role="option"> Neptunium </li> <li id="ss_elem_Pu" role="option"> Plutonium </li> <li id="ss_elem_Am" role="option"> Americium </li> <li id="ss_elem_Cm" role="option"> Curium </li> <li id="ss_elem_Bk" role="option"> Berkelium </li> <li id="ss_elem_Cf" role="option"> Californium </li> <li id="ss_elem_Es" role="option"> Einsteinium </li> <li id="ss_elem_Fm" role="option"> Fermium </li> <li id="ss_elem_Md" role="option"> Mendelevium </li> <li id="ss_elem_No" role="option"> Nobelium </li> <li id="ss_elem_Lr" role="option"> Lawrencium </li> <li id="ss_elem_Rf" role="option"> Rutherfordium </li> <li id="ss_elem_Db" role="option"> Dubnium </li> <li id="ss_elem_Sg" role="option"> Seaborgium </li> <li id="ss_elem_Bh" role="option"> Bohrium </li> <li id="ss_elem_Hs" role="option"> Hassium </li> <li id="ss_elem_Mt" role="option"> Meitnerium </li> <li id="ss_elem_Ds" role="option"> Darmstadtium </li> <li id="ss_elem_Rg" role="option"> Roentgenium </li> <li id="ss_elem_Cn" role="option"> Copernicium </li> <li id="ss_elem_Nh" role="option"> Nihonium </li> <li id="ss_elem_Fl" role="option"> Flerovium </li> <li id="ss_elem_Mc" role="option"> Moscovium </li> <li id="ss_elem_Lv" role="option"> Livermorium </li> <li id="ss_elem_Ts" role="option"> Tennessine </li> <li id="ss_elem_Og" role="option"> Oganesson </li> </ul> </div> </div>

      Adding Necessary Semantics with ARIA

      Understanding and using ARIA roles, states, and properties in your markup can help you create websites with complex user interface elements that are accessible to all users, including those who rely on screen readers and those who can’t use a mouse. Once you’ve gotten down the basics of ARIA, you can start following other web accessibility guidelines to make your site fully compliant.

      New Call-to-action

      Related Articles

      A checklist to help you make your website more accessible and usable.

        CMS Hub is flexible for marketers, powerful for developers, and gives customers a personalized, secure experience

        START FREE OR GET A DEMO