aria‑selected: Practical Guide for Interactive UI

Modern web applications thrive on interactivity. Tabs, listboxes, and data grids make complex tasks easier for sighted users—but without proper semantics, those same widgets can shut people out.

For example, a set of tabs may look visually distinct, but unless screen readers know which tab is currently selected, the component is unusable for blind users. Similarly, keyboard-only users can be stranded if selection isn’t tied to focus and navigation logic.

That’s where aria-selected comes in. This attribute bridges the gap between visual presentation and assistive technology, ensuring state changes are clearly communicated. In this guide, we’ll cover what aria-selected means, when to use it, real-world code examples, and best practices for building accessible interactions.

Decoding aria-selected

According to the WAI-ARIA specification, aria-selected communicates the selection state of an element in a widget. It doesn’t change visuals—it adds semantic meaning to the accessibility tree so assistive tech can interpret the UI correctly.

Values Explained

true → This item is selected.
false → This item is selectable but not selected.
(Absence) → This item isn’t selectable at all.

Tip: Roles that support aria-selected include: tab, option, row, gridcell, and treeitem. Use it only where a “selected” state makes sense.

aria-selected vs. Other Attributes

It’s easy to confuse aria-selected with other ARIA attributes. Here’s how to know when you’re using the right one:

Attribute	Primary Purpose	Typical Components
aria-selected	Indicates which item is currently chosen	Tabs, listboxes, grids, tables
aria-checked	Binary on/off state	Checkboxes, radios
aria-pressed	Toggle button active state	Toolbar buttons
aria-current	Denotes user’s current location	Nav links, breadcrumbs

Practical Use Cases & Code

Tabs

Tabs are a classic single-select widget. Only one tab can be selected at a time.

<div role="tablist" aria-label="Profile sections">
  <button id="tab-overview" role="tab" aria-selected="true"
          aria-controls="panel-overview">Overview</button>
  <button id="tab-settings" role="tab" aria-selected="false"
          aria-controls="panel-settings">Settings</button>
</div>

<div id="panel-overview" role="tabpanel" aria-labelledby="tab-overview">
  <!-- Overview content -->
</div>
<div id="panel-settings" role="tabpanel" aria-labelledby="tab-settings" hidden>
  <!-- Settings content -->
</div>

Implementation Notes

On click, Enter, or Space: update aria-selected, swap focus, and show the panel.
Keyboard navigation: Left/Right (or Up/Down for vertical), Home/End for quick jumps.

Listbox (Multi-Select)

Listboxes can be single- or multi-select. Here’s a multi-select version:

<ul role="listbox" aria-label="Choose toppings"
    aria-multiselectable="true" tabindex="0"
    aria-activedescendant="opt-pepperoni">
  <li id="opt-pepperoni" role="option" aria-selected="true">Pepperoni</li>
  <li id="opt-mushroom"  role="option" aria-selected="false">Mushrooms</li>
  <li id="opt-olive"     role="option" aria-selected="false">Olives</li>
</ul>

Interaction Details

Arrow keys move focus; aria-activedescendant updates to track the active item.
Space toggles selection state.
Ctrl/Shift + Arrow supports range selection like desktop apps.

Grids / Spreadsheets

Grids allow row and cell-level navigation. They’re common in dashboards and spreadsheets.

<div role="grid" aria-label="Sales records" aria-activedescendant="cell-1-2">
  <div role="row">
    <div role="columnheader" aria-colindex="1">Date</div>
    <div role="columnheader" aria-colindex="2">Sales</div>
  </div>

  <div role="row" aria-rowindex="1">
    <div id="cell-1-1" role="gridcell" aria-colindex="1" aria-selected="false">Jan</div>
    <div id="cell-1-2" role="gridcell" aria-colindex="2" aria-selected="true">5 000</div>
  </div>
  <div role="row" aria-rowindex="2">
    <div id="cell-2-1" role="gridcell" aria-colindex="1" aria-selected="false">Feb</div>
    <div id="cell-2-2" role="gridcell" aria-colindex="2" aria-selected="false">4 200</div>
  </div>
</div>

JavaScript Must Handle

Arrow keys move focus across cells and sync aria-activedescendant.
Space/Enter toggles aria-selected.
Optional: persist state (e.g., in localStorage) to remember selections.

Best Practices for aria-selected

Focus Management

In single-select widgets: focus stays inside, arrow keys update selection.
In multi-select widgets: focus moves independently, Space/Enter toggles states.
Always update aria-activedescendant dynamically.

Visual Feedback Beyond Color

Don’t rely on color alone. Use icons, bold text, or borders.
WCAG 2.2 requires at least 3:1 contrast for selected/focus states.

Keyboard Navigation

Tabs: Arrow keys, Home/End, Enter/Space to activate.
Listbox/Grid: Arrow keys plus Space/Enter (and Ctrl/Shift combos for multi-select).
Optional: Escape to clear selection or exit.

Testing Your Implementation

Accessibility doesn’t stop at code—it must be validated.

Screen reader testing: NVDA, JAWS, and VoiceOver should announce selection changes correctly.
Keyboard walkthroughs: Confirm focus order and selection behavior.
Automated checks: Useful for catching missing attributes, but always supplement with manual testing.

Bonus Patterns

Once you’re comfortable with the basics, aria-selected can also power:

ARIA Trees: File explorer-like navigation.
Carousels: Tabs-like controls for slide navigation.
Email-style panels: Combining aria-selected with aria-multiselectable for Gmail-style selection logic.

Build with Inclusion from the Start

The aria-selected attribute may seem small, but it represents a bigger principle: creating interfaces where everyone can interact equally.

Accessibility is about thoughtful interaction design, not just compliance checklists. By implementing aria-selected correctly, you close the gap between a slick UI and one that’s truly inclusive.

Don’t wait until launch—or worse, until a lawsuit—to think about accessibility. Build it in from the beginning, and both your users and your future self will thank you.

Want clarity on how your site measures up or how to improve implementation? Schedule a private ADA briefing with 216digital and get expert insight on real-world accessibility practices.