HTML: Crafting Accessible Web Content with ARIA Attributes

Written by

webdevfundamentals

in

In the world of web development, creating content that is not only visually appealing but also accessible to everyone is paramount. This is where ARIA (Accessible Rich Internet Applications) attributes come into play. ARIA provides a way to add semantic meaning to HTML elements, especially for those that don’t inherently convey their purpose to assistive technologies like screen readers. This tutorial will guide you through the essentials of ARIA, showing you how to use these attributes to build inclusive and user-friendly web applications.

Understanding the Problem: The Need for Accessibility

Imagine a user who is visually impaired and relies on a screen reader to navigate the web. Without proper ARIA attributes, a complex interactive widget might appear as a series of generic elements, leaving the user with no understanding of its function or how to interact with it. This is a common problem, and it’s why accessibility is not just a ‘nice-to-have’ but a crucial aspect of web development.

Consider a custom tabbed interface built using `div` elements. Without ARIA, a screen reader might announce each `div` as just that: a division. ARIA attributes allow you to identify each `div` as a tab, indicate which tab is currently selected, and associate each tab with its respective content panel. This transforms a confusing jumble of elements into a navigable and understandable interface.

What are ARIA Attributes?

ARIA attributes are special attributes that you can add to HTML elements to provide extra information about an element’s role, state, and properties. They don’t change the visual appearance of the element, but they provide crucial context for assistive technologies.

  • Roles: Define the purpose of an element (e.g., `role=”tab”`, `role=”button”`).
  • States: Describe the current condition of an element (e.g., `aria-expanded=”true”`, `aria-checked=”true”`).
  • Properties: Provide additional information about an element (e.g., `aria-label=”Close”`, `aria-describedby=”descriptionId”`).

ARIA attributes are prefixed with `aria-` to distinguish them from standard HTML attributes. They are used to improve the accessibility of custom widgets, dynamic content, and other interactive elements that don’t have built-in semantic meaning in HTML.

Key ARIA Attributes and Their Uses

aria-label

The `aria-label` attribute provides a human-readable label for an element. This is especially useful when the element doesn’t have visible text, such as an icon or a button with only an image. It’s like providing an alternative text description for the element.

Example:

<button aria-label="Close">
  <img src="close-icon.png" alt="">
</button>

In this example, the screen reader will announce “Close” when the user focuses on the button, providing context to the user about what the button does.

aria-labelledby

The `aria-labelledby` attribute establishes a relationship between an element and one or more other elements that serve as its label. This is helpful when the label is already present in the DOM (Document Object Model) and you want to associate it with the element.

Example:

<h2 id="section-title">Section Title</h2>
<div aria-labelledby="section-title">
  <p>Content of the section.</p>
</div>

Here, the `div` element is associated with the `h2` heading, so the screen reader will announce “Section Title” followed by the content of the `div`.

aria-describedby

The `aria-describedby` attribute links an element to another element that provides a description. This is useful for providing more detailed information about an element than a simple label can convey.

Example:

<input type="text" id="username" aria-describedby="username-help">
<span id="username-help">Enter your username (minimum 6 characters).</span>

In this case, the screen reader will announce the input field, followed by the description provided by the span element.

aria-hidden

The `aria-hidden` attribute hides an element from assistive technologies. This is useful when an element is purely decorative or contains content that is already described elsewhere.

Example:

<img src="decorative-image.png" alt="" aria-hidden="true">

This image is purely decorative and doesn’t convey any meaningful information, so it’s hidden from screen readers to avoid unnecessary verbosity.

aria-expanded

The `aria-expanded` attribute indicates whether a collapsible element (like a dropdown or an accordion) is currently expanded or collapsed.

Example:

<button aria-expanded="false" aria-controls="content-panel">Show More</button>
<div id="content-panel" hidden>
  <p>More content...</p>
</div>

When the button is clicked, JavaScript would toggle the `aria-expanded` attribute to “true” and show the content panel.

aria-controls

The `aria-controls` attribute identifies the element(s) that are controlled by the current element. This is often used with elements like buttons that trigger the display or hiding of other content.

Example:

<button aria-controls="content-panel">Show/Hide Content</button>
<div id="content-panel">
  <p>This content is controlled by the button.</p>
</div>

In this example, the button controls the visibility of the `div` with the ID “content-panel”.

aria-selected

The `aria-selected` attribute indicates which item in a group of selectable elements is currently selected. This is commonly used in tabbed interfaces or radio button groups.

Example:

<div role="tablist">
  <button role="tab" aria-selected="true">Tab 1</button>
  <button role="tab" aria-selected="false">Tab 2</button>
</div>

The screen reader will announce that “Tab 1” is selected.

Step-by-Step Instructions: Implementing ARIA Attributes

Let’s walk through a practical example: making a custom dropdown menu accessible.

1. HTML Structure

First, we need the basic HTML structure for our dropdown. We’ll use a button to trigger the dropdown and a `div` to hold the dropdown content.

<div class="dropdown">
  <button id="dropdown-button" aria-haspopup="true" aria-expanded="false">Menu</button>
  <div class="dropdown-content" hidden>
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

2. Adding ARIA Roles and Attributes

Next, we’ll add the ARIA attributes to give meaning to our elements. Here’s how we’ll enhance the HTML:

  • `aria-haspopup=”true”` on the button: Indicates that the button controls a popup (the dropdown).
  • `aria-expanded=”false”` on the button (initially): Indicates that the dropdown is collapsed. This will change to “true” when the dropdown is open.
  • `role=”menu”` on the `div` with class “dropdown-content”: Identifies the `div` as a menu.
  • `role=”menuitem”` on each `a` element inside the dropdown: Identifies each link as a menu item.
<div class="dropdown">
  <button id="dropdown-button" aria-haspopup="true" aria-expanded="false">Menu</button>
  <div class="dropdown-content" role="menu" hidden>
    <a href="#" role="menuitem">Link 1</a>
    <a href="#" role="menuitem">Link 2</a>
    <a href="#" role="menuitem">Link 3</a>
  </div>
</div>

3. Adding JavaScript for Interactivity

Now, we need JavaScript to handle the dropdown’s opening and closing and update the ARIA attributes accordingly. Here’s a simple example:

const dropdownButton = document.getElementById('dropdown-button');
const dropdownContent = document.querySelector('.dropdown-content');

dropdownButton.addEventListener('click', function() {
  const expanded = this.getAttribute('aria-expanded') === 'true';
  this.setAttribute('aria-expanded', !expanded);
  dropdownContent.hidden = expanded;
});

This JavaScript code does the following:

  • Gets references to the button and the dropdown content.
  • Adds a click event listener to the button.
  • On click, it toggles the `aria-expanded` attribute and the `hidden` attribute of the dropdown content.

4. Styling (CSS)

While ARIA provides the semantic meaning, CSS is responsible for the visual presentation. You would use CSS to style the dropdown, making it visually appealing and easy to use. Here’s a basic CSS example:

.dropdown-content {
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

This CSS positions the dropdown content, adds a background color, shadow, and styles the links within the dropdown.

Common Mistakes and How to Fix Them

Overusing ARIA

A common mistake is overusing ARIA. If a native HTML element already provides the necessary semantic meaning, don’t add ARIA. For example, use a `

More posts