aria-selected — Indicating Selected Options in Lists and Tab Panels

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

aria-selected indicates which item in a set of selectable items is currently selected, commonly used in tabs, listboxes, tree views, and grid cells to communicate active selection.

In this tutorial, you'll learn how to use aria-selected effectively in your ARIA widgets.

What You'll Learn

By the end of this lesson, you'll understand when to use aria-selected, how to manage selection state, the difference between single and multi-select patterns, and how to test the behavior.

Why It Matters

Without aria-selected, screen reader users in a tablist cannot tell which tab is active. They must switch to each tab to discover the current state.

Real-World Use

Doda Browser's tab interface uses aria-selected on each tab button so screen reader users know which panel is currently displayed.

Selection Flow

flowchart TD
  A[User selects an item] --> B[Set selected item's aria-selected='true']
  B --> C[Set previously selected item's aria-selected='false']
  C --> D[Update related states]
  D --> E[Move focus if needed]
  E --> F[Screen reader announces new selection]

How aria-selected Works

aria-selected is used on selectable items within a container role like tablist, listbox, or radiogroup:

<div role="tablist" aria-label="Scan results">
  <button role="tab" aria-selected="true" tabindex="0">All</button>
  <button role="tab" aria-selected="false" tabindex="-1">Quarantine</button>
  <button role="tab" aria-selected="false" tabindex="-1">Clean</button>
</div>

The screen reader announces "All tab selected" and "Quarantine tab not selected".

Single Selection vs Multi-Selection

In single-selection widgets, only one item has aria-selected="true" at a time:

function selectTab(tablist, selectedTab) {
  // Deselect all
  tablist.querySelectorAll('[role="tab"]').forEach(tab => {
    tab.setAttribute('aria-selected', 'false');
    tab.setAttribute('tabindex', '-1');
  });
  // Select the clicked tab
  selectedTab.setAttribute('aria-selected', 'true');
  selectedTab.setAttribute('tabindex', '0');
  selectedTab.focus();
}

For multi-select widgets, allow multiple items to be selected:

<div role="listbox" aria-label="Filters" aria-multiselectable="true">
  <div role="option" aria-selected="true" tabindex="0">Viruses</div>
  <div role="option" aria-selected="false" tabindex="-1">Malware</div>
  <div role="option" aria-selected="true" tabindex="-1">Phishing</div>
</div>

aria-selected vs aria-current

aria-selected is for items within a selectable container. aria-current is for contextual navigation:

<!-- Navigation: use aria-current -->
<nav><a href="/" aria-current="page">Home</a></nav>

<!-- Tabs: use aria-selected -->
<div role="tablist"><button role="tab" aria-selected="true">Home</button></div>

Common Mistakes

• Using aria-selected on navigation links: Use aria-current for navigation context.
• Forgetting to deselect previous items: Multiple selected items in a single-select widget is incorrect.
• Not updating tabindex with selection: In roving tabindex patterns, only the selected item should be focusable.
• Using aria-selected on items that are not in a selection container: aria-selected needs a parent role like tablist or listbox.
• Omitting aria-selected on all items: Every selectable item should have the attribute.

Practice and Challenge

1. What does aria-selected="true" indicate? The item is currently selected within its set.

2. What widget roles commonly use aria-selected? tab, option, treeitem, and gridcell.

3. Why must tabindex be updated alongside aria-selected? In roving tabindex, only the selected item should be in the tab order.

4. What is the difference between single and multi-select? Single select allows one selection; multi-select allows multiple.

5. Challenge: Build a tab panel with three tabs. Manage aria-selected and tabindex so only the active tab is in the tab order.

FAQ

Mini Project

Create a tab panel component with four tabs. Implement keyboard navigation with arrow keys, manage aria-selected, and show/hide the corresponding panels. Test with NVDA.

What's Next

Continue to aria-required to learn how to mark required form fields.