Improving Accessibility with WAI-ARIA

[hyelim9591]

I have been working as a working student at SAP and mostly worked on accessibility improvement project with SAP Community teams. In my previous post about improving web accessibility in SAP Community, I’ve showed you some best practices for web accessibility and how you can contribute as well. In this post, I’ll show you some specific examples of the use of WAI-ARIA for improving web accessibility.

WAI-ARIA Use Cases

For basic web accessibility, it must be assured that all the content is read clearly by the screen reader. Here, WAI-ARIA plays an important role, which is a framework to add additional attributes to the web content to identify their detailed role, properties and state. (View this page to know more about WAI-ARIA) The following WAI-ARIA attributes are commonly used in my experience:

• ARIA role: ARIA role is set by adding role attribute to an element and defines the type of element in the UI. See this page to have closer look into six categories of roles. Using appropriate roles can improve web accessibility by providing more information about the elements in the webpage.
  
  
  
  • Abstract Roles: Exists to define general role concepts. They MUST NOT be used by the developers but only by browsers.
  
  
  • Widget Roles: Used to provide additional information for the interactive elements, which could either act as standalone user interface widget or as part of larger, composite widget. The example below shows the example of the use of widget role for menu bar. By assigning this role, it is announced how many menu items are there and the item that currently has focus. (e.g. Submenu item 1 one of three)
  
  
  
  

<nav>

  <ul role="menubar">

    <li role="none">

      <a role="menuitem" aria-haspopup="true" aria-expanded="false" href="#" tabindex="0">

        Menu item 1

      </a>

    <li role="none">

      <a role="menuitem" aria-haspopup="true" aria-expanded="false" href="#" tabindex="-1">

        Menu item 2 (Submenu 1)

      </a>

      <ul role="menu">

        <li role="none">

          <a role="menuitem" href="mb-about.html#overview" tabindex="-1">

            Submenu 1 item 1

          </a>

        </li>

        <li role="none">

          <a role="menuitem" href="mb-about.html#admin" tabindex="-1">

            Submenu 1 item 2

          </a>

        </li>

        <li role="none">

          <a role="menuitem" href="#" tabindex="-1">

            Submenu 1 item 3

          </a>

        </li>

      </ul>

    </li>

  </ul>

</nav>

• 
  
  
  
  • Document Structure: Used to provide description of the structure in a webpage. In the example below, the use of role= “group” is shown. By assigning this role, the screen reader announces, “Group start” and “Group end” when the focus moves in and out of these tags.
  
  
  
  

<div class="tags" role="group">

    <a class="tag" href="#tag1">Tag 1 </a>

    <a class="tag" href="#tag2">Tag 2 </a>

    <a class="tag" href="#tag3">Tag 3 </a>

</div>

• 
  
  
  
  • Landmark Roles: Used to provide additional description to larger sections of the webpage, which then acts as ‘landmark’ that helps page navigation with screen reader. The example below, role= “search” is assigned to the form, so that the screen reader announces “Search region” when the user enters this form.
  
  
  
  

<form class="search-Input" role="search">

    <input type="search" placeholder="Search the SAP Community" />

    <button type="reset">Reset</button>

    <button type="submit">Search</button>

</form>

• 
  
  
  
  • Live Region Roles: Used to assign roles to the element that is typically updated as a result of an external event. (e.g. chat log, alert message etc.) Can be configured with live region attributes. See this page for more information about live region attributes. (role = “alert” implies the live region attribute values aria-live = “assertive” and aria-atomic = “true”) In the example below, by assigning alert role, the alert message is announced whenever the message is updated.
  
  
  
  

<div role="alert">

	<p>Result</a>

<p id="alertMsg"></a>

</div>

<script>

    let alert = document.getElementById("alertMsg");

    if(result_must_be_updated) {

      update_result();

      alert.innerHTML = "update_alertMsg";

    }

</script>

• 
  
  
  
  • Window Roles: Used to assign roles to the element that acts as windows within the browser or application. The role = “dialog” in the example below makes the screen reader announce when the dialog pops up. The attribute tabindex = “-1” is also added to set the focus on the content of the dialog.
  
  
  
  

<div role="dialog" id="dialog-example" tabindex="-1">

    <div class="dialog-header">

        <h3 class="header">Dialog Title</h3>

    </div>

    <div class="dialog-body">

        Dialog content

    </div>

    <div class="dialog-footer">

        <button id="dialog-close">Close </button>

    </div>

</div>

• ARIA properties: Used to add specific description to the elements in webpage. Unlike ARIA states, ARIA properties are unlikely to change once they are set.
  
  
  
  • aria-label / aria-labelledby: The code below shows the example use of aria-label in the pagination. Without the aria-label, the screen reader simply reads the number in the anchor tag, for example, 1, 2 or three and so on. To make it explicit that these number means the page in the pagination, the aria-labels are added to the anchor tag.
  
  
  
  

<nav class="pagination">

  <a href="#" aria-label="Go to the first page"><<</a>

  <a href="#" aria-label="Go to previous page"><</a>

  <a href="#" aria-label="Go to the page 1">1</a>

  <a href="#" aria-label="Go to the page 2">2</a>

  <a href="#" aria-label="Go to the page 3">3</a>

  <a href="#" aria-label="Go to next page">></a>

  <a href="#" aria-label="Go to the last page">>></a>

</nav>

• ARIA states: Used to describe dynamic properties expressing characteristics of an element, that change as a result of user action or automated process.
  
  
  
  • aria-expanded: The example shows the example use of aria-expanded in the collapsible widget. The aria-expanded attribute is modified with JavaScript when the user toggles the widget so that the screen reader announces the state of the widget. (“expanded” or “collapsed”)
  
  
  
  

<div class="widget">

    <a id="widget-opener" href="#" aria-expanded="true">

            Widget Opener

    </a>

    <ul class="widget__content">

        <li class="widgetlist__item"><a href="#tag1">Tag 1</a></li>

        <li class="widgetlist__item"><a href="#tag2">Tag 2</a></li>

        <li class="widgetlist__item"><a href="#tag3">Tag 3</a></li>

    </ul>

    <a href="#viewAll">View all ...</a>

</div>

<script>

    var widgetOpener = document.getElementById("widget-opener");

    widgetOpener.addEventListener('click', function(event){

        // toggle widget

        if(widget_is_closed) {

            openWidget();

            event.target.setAttribute('aria-expanded', 'true');

        } else {

            closeWidget();

            event.target.setAttribute('aria-expanded', 'false');

        }

    });

</script>

• 
  
  
  
  • aria-hidden: In the code below, aria-hidden = “true” is added to the span tag so that the screen reader doesn’t read the vertical bar. Without this attribute, the screen reader also reads “vertical bar” when the content is read.
  
  
  
  

<span aria-hidden="true">|</span>

 

Until now, we’ve seen some example uses of WAI-ARIA to improve web accessibility. Those ones listed in this post are the common ones I mostly used, but there are many more ARIA attributes that are not shown here. You can visit this page to see more WAI-ARIA practices.