Advanced Use of ARIA for Dynamic Content

1. Introduction

Goal:

The goal of this tutorial is to teach you how to use Accessible Rich Internet Applications (ARIA) in advanced ways to manage dynamic content on your web pages.

Learning Outcomes:

You will learn how to use ARIA roles, states, and properties to make your dynamic web content more accessible. You will also learn how to implement ARIA live regions to manage updates and changes in content.

Prerequisites:

You should have a basic understanding of HTML, CSS, JavaScript, and a general understanding of how ARIA works.

2. Step-by-Step Guide

ARIA Roles:

ARIA roles provide information about what an element is or does. For dynamic content, roles such as alert, log, status, and progressbar can be used.

Example:

<div role="alert">This is an important message!</div>

ARIA States and Properties:

ARIA states and properties provide additional information about an element's current condition or characteristics. For instance, aria-hidden, aria-expanded, and aria-busy can be used for dynamic content.

Example:

<button aria-expanded="false">Menu</button>

ARIA Live Regions:

ARIA live regions allow assistive technologies to understand when a part of the web page updates. This is very useful for dynamic content. aria-live can have values like off, polite, and assertive.

Example:

<div aria-live="polite">This content will update.</div>

3. Code Examples

Example 1: Using aria-expanded

<!-- The button that controls the expanding and collapsing -->
<button id="expander" aria-expanded="false" onclick="toggleContent()">Toggle Content</button>

<!-- The content that expands and collapses -->
<div id="content" aria-hidden="true">This is the content that will be toggled.</div>

<script>
  function toggleContent() {
    const content = document.getElementById('content');
    const expander = document.getElementById('expander');
    const isExpanded = expander.getAttribute('aria-expanded') === 'true';

    // Toggle the 'aria-hidden' attribute
    content.setAttribute('aria-hidden', isExpanded);

    // Toggle the 'aria-expanded' attribute
    expander.setAttribute('aria-expanded', !isExpanded);
  }
</script>

Example 2: Using aria-live

<!-- The live region -->
<div id="live-region" aria-live="polite">Waiting for updates...</div>

<script>
  function updateContent() {
    const liveRegion = document.getElementById('live-region');

    // Update the live region
    liveRegion.textContent = 'Content updated at ' + new Date().toLocaleTimeString();
  }

  // Update the content every second
  setInterval(updateContent, 1000);
</script>

4. Summary

In this tutorial, we learned about advanced ARIA techniques for dynamic web content. We discussed ARIA roles, states, properties, and live regions.

Continue learning about ARIA by studying other roles, states, and properties, and how they can be used to improve accessibility. You can find more information in the WAI-ARIA Authoring Practices.

5. Practice Exercises

1. Create a web page with a progress bar that updates every second. Use the progressbar role and the aria-valuenow property to indicate the current progress.

2. Create a web page with a dropdown menu. Use the menu and menuitem roles and the aria-expanded state to manage the dropdown.

3. Create a web page with a live chat interface. Use a live region to announce new messages.