The destructive side of ARIA HTML enhancements

Christina Adams — Tue, 04 Oct 2022 16:42:55 +0000

ARIA == Accessible Rich Internet Applications

This code system was created to enhance the user experience for assistive technology users and add semantics where HTML is lacking. But it can also completely destroy the user experience if not implemented properly. Let me give you two examples.

aria-label

The aria-label attribute is (in my opinion) the most used aria technique. It is easy to understand and doesn't require additional markup changes. However, the value of the aria-label attribute completely destroys any native text within the element that would provide an accessible name.

<a href="http://twitter.com/offsetchris" 
   target="_blank" 
   aria-label="Opens in a new window">
  Follow me on Twitter
</a>

In this example what is the link's name? It depends on the audience.

Users referencing the visual interface:

"Follow me on Twitter"
Users accessing with assistive technology:

"Opens in a new window"

Two completely different experiences with different user expectations. The developer had the best intentions to make a better user experience for assistive technology users by adding "Opens in a new window" to describe the behavior of the link opening a new tab or window when activated. Except now the native name of the link has been overwritten by aria-label and some users have no reference to where the link will take them.

This same destructive nature also applies to aria-labelledby with the same results.

Authoring practices copy paste

ARIA gives us nothing for free. It is the developer's responsibility to fully implement a recommended widget or pattern. If the developer pastes in some of the HTML that is referenced but fails to add keyboard access scripting or ignores required child roles in a complex widget the pattern fails and often prohibits users from accessing the widget entirely.

Take the Tab Panel example from the ARIA Authoring Practices Guide document. If the developer scrolls down, finds the HTML for the example, pastes it into their system and never reads any further in the requirements what happens? Here is a sample of this pattern showing the clickable tab element code.

<div role="tablist"
       aria-labelledby="tablist-1"
       class="manual">
    <button id="tab-1"
            type="button"
            role="tab"
            aria-selected="true"
            aria-controls="tabpanel-1">
      <span class="focus">
        Maria Ahlefeldt
      </span>
    </button>
    <button id="tab-2"
            type="button"
            role="tab"
            aria-selected="false"
            aria-controls="tabpanel-2"
            tabindex="-1">
      <span class="focus">
        Carl Andersen
      </span>
    </button>
    <button id="tab-3"
            type="button"
            role="tab"
            aria-selected="false"
            aria-controls="tabpanel-3"
            tabindex="-1">
      <span class="focus">
        Ida da Fonseca
      </span>
    </button>
    <button id="tab-4"
            type="button"
            role="tab"
            aria-selected="false"
            aria-controls="tabpanel-4"
            tabindex="-1">
      <span class="focus">
        Peter Lange-Müller
      </span>
    </button>
  </div>

The tabs are coded as buttons with a more semantic role of tab. But notice the tabindex="-1" on the last three tabs? If the recommended keyboard access to these tabs is not implemented as the Authoring Practices document describes the user will be able to use their TAB key on the keyboard to access the first tab but will never be able to access the second and third tab using keyboard alone. Not completing the ARIA pattern has withheld content from a specific user group, destroying the user experience (and likely trust) of any user trying to fully access your site.

Use with care

ARIA is great! But you need to do it right and implement it with care because it can make a site substantially worse or even unusable if done improperly.

Header image description: The Destructive Side of ARIA HTML Enhancements with a emoji thumb down over a dev panel showing aria-label overriding a native HTML name in a bad way.

DEV Community: Christina Adams

The destructive side of ARIA HTML enhancements

ARIA == Accessible Rich Internet Applications

aria-label

Authoring practices copy paste

Use with care