aria-pressed — Indicating Toggle Button State

In this tutorial, you will learn about aria. We cover key concepts, practical examples, and best practices to help you master this topic.

aria-pressed indicates whether a toggle button is currently pressed or unpressed, providing a three-state model for buttons that can be toggled between on and off.

In this tutorial, you'll learn how to use aria-pressed for toggle buttons in ARIA.

What You'll Learn

By the end of this lesson, you'll understand the three aria-pressed values, the difference between pressed and checked states, and how to implement accessible toggle buttons.

Why It Matters

Toggle buttons are common in settings panels, toolbars, and feature controls. Without aria-pressed, users cannot tell whether the toggle is active.

Real-World Use

Doda Browser's toolbar uses aria-pressed on the dark mode toggle button so screen reader users know whether dark mode is enabled.

Toggle State Flow

flowchart LR
  A[Button clicked] --> B{Current pressed state}
  B -->|false or missing| C[Set aria-pressed='true']
  B -->|true| D[Set aria-pressed='false']
  B -->|mixed| E[Set aria-pressed='false']
  C --> F[Enable feature]
  D --> G[Disable feature]

How aria-pressed Works

aria-pressed is used on buttons that toggle a feature on and off:

<button aria-pressed="false" onclick="toggleDarkMode(this)">
  Dark Mode
</button>

function toggleDarkMode(button) {
  const pressed = button.getAttribute('aria-pressed') === 'true';
  button.setAttribute('aria-pressed', !pressed);
  document.body.classList.toggle('dark-mode', !pressed);
}

The screen reader announces "Dark Mode, toggle button, not pressed".

Three-State Model

<button aria-pressed="true">Bold (active)</button>
<button aria-pressed="false">Italic (inactive)</button>
<button aria-pressed="mixed">Underline (partial)</button>

aria-pressed vs aria-checked

Common Mistakes

• Using aria-pressed on non-button elements: Only use it with role="button".
• Using aria-checked on toggle buttons: Use aria-pressed for buttons, aria-checked for checkboxes.
• Not syncing visual state with pressed state: The visual toggle must match the ARIA state.
• Forgetting to add tabindex="0": If using a non-native button element, ensure focusability.
• Using aria-pressed="mixed" incorrectly: Only use mixed when the button represents a group with mixed states.

Practice and Challenge

1. What are the three values of aria-pressed? true, false, mixed.

2. What role must an element with aria-pressed have? button.

3. What is the difference between aria-pressed and aria-checked? aria-pressed is for toggle buttons; aria-checked is for checkboxes and switches.

4. When would you use aria-pressed="mixed"? When the button represents a group where some items are toggled on and some off.

5. Challenge: Build a toolbar with three toggle buttons: Bold, Italic, Underline. Use aria-pressed and toggle a text selection style.

FAQ

Mini Project

Create a settings panel with multiple toggle buttons (dark mode, notifications, auto-save). Use aria-pressed on each button. Sync the visual and ARIA states.

What's Next

Continue to aria-valuemin, aria-valuemax, aria-valuenow, aria-valuetext to learn about range value communication.