1. Introduction

Purpose of the tutorial

This tutorial aims to guide you on how to use Accessible Rich Internet Applications (ARIA) to improve the accessibility of your web content. ARIA provides a way to make web content and web applications more accessible to people with disabilities.

Expected learning outcome

By the end of this tutorial, you'll understand the best practices for using ARIA roles, states, and properties to make your web content compatible with screen readers.

Prerequisites

You should have a basic understanding of HTML and JavaScript. Familiarity with web accessibility is also beneficial but not mandatory.

2. Step-by-Step Guide

Understanding ARIA

ARIA is a set of attributes that you can add to HTML elements. These attributes communicate the state, properties, and roles of UI elements to assistive technologies like screen readers.

Using ARIA Roles

ARIA roles define what an element is or does. Examples are role="button", role="menu", role="dialog", etc. Use these roles judiciously and only when an equivalent HTML element does not exist.

Using ARIA States and Properties

ARIA states and properties define the attributes that affect the behavior or value of an element. Examples are aria-disabled="true" or aria-expanded="false".

Best Practices

• Always prefer native HTML over ARIA roles. Use ARIA roles only when there's no equivalent HTML element.
• Don't change native semantics unless you really need to.
• All interactive ARIA controls must be usable with the keyboard.
• Do not use role="presentation" or aria-hidden="true" on a focusable element.
• All interactive elements must have an accessible name.

3. Code Examples

ARIA Role

Here's an example of how to use ARIA roles:

<div role="button" tabindex="0" onclick="myFunction()">Click me!</div>

In this snippet, a <div> is given a role of a button. The tabindex="0" allows it to receive keyboard focus.

ARIA Property

Here's an example of how to use ARIA properties:

<div role="button" aria-pressed="false" onclick="toggleButton(this)">Click me!</div>

<script>
function toggleButton(element) {
    var pressed = element.getAttribute('aria-pressed') === 'true';
    element.setAttribute('aria-pressed', !pressed);
}
</script>

This button keeps track of its state using the aria-pressed attribute.

4. Summary

This tutorial covered the basics of using ARIA roles, states, and properties to make web content more accessible. The key takeaway is to always prefer native HTML elements over ARIA roles.

5. Practice Exercises

1. Exercise 1: Create a <div> that acts like a checkbox. It should be able to receive focus and toggle its checked state when clicked or when "Enter" is pressed.

2. Exercise 2: Create a dropdown menu using ARIA roles and properties. The menu should be hidden by default and should appear when the menu button is clicked.

Solutions:

1. Solution to Exercise 1:

<div role="checkbox" aria-checked="false" tabindex="0" onclick="toggleCheckbox(this)" onkeydown="toggleCheckbox(this, event)">Click me!</div>

<script>
function toggleCheckbox(element, event) {
    if (event && event.key !== 'Enter') return;
    var checked = element.getAttribute('aria-checked') === 'true';
    element.setAttribute('aria-checked', !checked);
}
</script>

1. Solution to Exercise 2:

<button aria-haspopup="true" aria-controls="menu1">Open Menu</button>
<div id="menu1" role="menu">
    <div role="menuitem">Option 1</div>
    <div role="menuitem">Option 2</div>
    <div role="menuitem">Option 3</div>
</div>

<script>
var button = document.querySelector('button');
var menu = document.getElementById('menu1');
menu.style.display = 'none';
button.onclick = function() {
    var expanded = button.getAttribute('aria-expanded') === 'true';
    button.setAttribute('aria-expanded', !expanded);
    menu.style.display = expanded ? 'none' : 'block';
};
</script>

Next Steps

Continue learning about ARIA and accessibility from the ARIA Authoring Practices Guide.