Screen Reader Guide

SCREEN READER FOUNDATIONS

0 of 20
Course progress: 0 / 20 lessons

PRACTICE 6 OF 8 · Complex widgets and data

Filter chips

Apply and remove filters while checking selected state, removal labels, and result count updates.

  • Level: Intermediate
  • Time: 10-15 minutes
Objective

Verify that filters expose state, removable chips have clear names, and result counts update accessibly.

PREPARE

Set up your test

  1. Turn on a screen reader you know how to operate.
  2. Navigate by controls or use Tab where the task asks you to.
  3. Listen for purpose and state, not one exact sequence of spoken words.

WORKING EXAMPLE

Establish the expected behavior

Navigate the filters and remove chip. Listen for selected state, remove purpose, and result count.

12 results with Open filter applied.

Expected behavior: state, removal purpose, and result changes are available without relying on color or proximity.

INTENTIONAL DEFECT

Find the barrier

The example below deliberately contains one accessibility defect. Skip the defective example.

Navigate the chips. Determine whether selected state, remove purpose, and result changes are clear.

OpenResolved

12 results

Hint

A removable chip named “Open x” does not clearly say what activation will do.

End of intentional defect.

DIAGNOSE

Choose the primary cause

What is missing from the defective filter chips?

EXPLANATION

Understand and repair it

Reveal explanation

What happened

The defective filters expose active state and removal only visually or ambiguously. The result count also does not announce when filters change.

Repair

Use buttons for interactive filters, expose selected state, make removal buttons specific, and announce result count changes.

<button aria-pressed="true">Open</button>
<button aria-label="Remove Open filter">Open <span aria-hidden="true">x</span></button>
<p role="status">12 results</p>

Retest

  • Navigate selected and unselected filters and confirm state is exposed.
  • Navigate applied chips and confirm each removal action is specific.
  • Change filters and confirm the result count update is announced.

Report it

Example: Active filters are indicated only by visual chip styling, and the remove control name does not clearly identify the filter it removes.

Standards and support

This exercise describes behavior rather than promising identical speech across screen reader and browser combinations.

Editorially reviewed 20 July 2026.