Dashboard UX Lab

Screen reader test script

Automated checks prove the dashboard says what the spec says. Only a person with a real screen reader can tell whether that is pleasant and clear to hear. This is the script for that test: what to do, what you should hear, and the results so far.

The expected speech on this page is computed from the spec, not written by hand. On every commit, both builds are checked against it in Chromium, Firefox and WebKit, in all three languages, timing included.

How to run it

  1. Open a scenario link below and turn on your screen reader.
  2. Move to the dashboard heading, then do each step without moving focus yourself.
  3. Listen for the same words in the same order. Screen readers add roles and states, such as “heading level 2”; that is expected.
  4. “Polite” messages wait until the screen reader finishes what it is saying. “Assertive” messages interrupt it.
  5. Record what you heard with the result form, including when everything passed.

Setups to cover

The script

Loaded

A normal, fast response with full access.

Open in:ReactFramework-free TypeScript

Playwright test:React (.spec.ts)Framework-free TypeScript (.spec.ts)

  1. Step 1 Open the link and wait.

    You should hear:

    Nothing. Silence is correct here.

  2. Step 2 Press “Replay request” in the lab controls.

    You should hear:

    1. after 450 mspoliteLoading dashboard data.
    2. after 850 mspoliteDashboard updated: All plans.

Loading

A two-second response: long enough to notice, short enough to wait.

Open in:ReactFramework-free TypeScript

Playwright test:React (.spec.ts)Framework-free TypeScript (.spec.ts)

  1. Step 1 Open the link and wait.

    You should hear:

    Nothing. Silence is correct here.

  2. Step 2 Press “Replay request” in the lab controls.

    You should hear:

    1. after 450 mspoliteLoading dashboard data.
    2. after 2,150 mspoliteDashboard updated: All plans.

Slow response

Twelve seconds. The interface escalates instead of spinning forever.

Open in:ReactFramework-free TypeScript

Playwright test:React (.spec.ts)Framework-free TypeScript (.spec.ts)

  1. Step 1 Open the link and wait.

    You should hear:

    1. after 3,150 mspoliteThis is taking longer than usual.
    2. after 8,150 mspoliteStill waiting for the server. You can keep waiting or cancel this request.

  2. Step 2 Press “Replay request” in the lab controls.

    You should hear:

    1. after 450 mspoliteLoading dashboard data.
    2. after 3,150 mspoliteThis is taking longer than usual.
    3. after 8,150 mspoliteStill waiting for the server. You can keep waiting or cancel this request.

  3. Step 3 When “Cancel request” appears, press it.

    You should hear:

    1. after 0 msFocus moves to button “Load again”.
    2. after 150 mspoliteRequest cancelled.

Empty results

The request succeeds but nothing matches the filter.

Open in:ReactFramework-free TypeScript

Playwright test:React (.spec.ts)Framework-free TypeScript (.spec.ts)

  1. Step 1 Open the link and wait.

    You should hear:

    1. after 850 mspoliteNo results for Legacy.

  2. Step 2 Press “Show all plans”.

    You should hear:

    1. after 450 mspoliteLoading dashboard data.
    2. after 700 msFocus moves to heading “Revenue overview”.
    3. after 850 mspoliteDashboard updated: All plans.

Error with retry

The first request fails with a 503. Retrying recovers.

Open in:ReactFramework-free TypeScript

Playwright test:React (.spec.ts)Framework-free TypeScript (.spec.ts)

  1. Step 1 Open the link and wait.

    You should hear:

    1. after 1,350 mspoliteThe dashboard failed to load. Try again is available.

  2. Step 2 Press “Try again”.

    You should hear:

    1. after 1,200 msFocus moves to heading “Revenue overview”.
    2. after 1,350 mspoliteDashboard updated: All plans.

Restricted access

The visitor has no access to this dashboard.

Open in:ReactFramework-free TypeScript

Playwright test:React (.spec.ts)Framework-free TypeScript (.spec.ts)

  1. Step 1 Open the link and wait.

    You should hear:

    Nothing. Silence is correct here.

  2. Step 2 Press “Replay request” in the lab controls.

    You should hear:

    1. after 450 mspoliteLoading dashboard data.
    2. after 850 mspoliteYou don’t have access to this dashboard.

Results so far

Nobody has run the script with a real screen reader yet. Runs are welcome at any time through the form below.

Latest result for each setup and scenario. Each run is recorded in the repository with versions and notes.
SetupLoadedLoadingSlow responseEmpty resultsError with retryRestricted access
NVDA with Firefox on WindowsNot tested yetNot tested yetNot tested yetNot tested yetNot tested yetNot tested yet
VoiceOver with Safari on macOSNot tested yetNot tested yetNot tested yetNot tested yetNot tested yetNot tested yet
VoiceOver with Safari on iPhoneNot tested yetNot tested yetNot tested yetNot tested yetNot tested yetNot tested yet
TalkBack with Chrome on AndroidNot tested yetNot tested yetNot tested yetNot tested yetNot tested yetNot tested yet

Submit a result

Spanish and Arabic review

The Spanish and Arabic text was drafted by the author. A native-speaker review is skipped for now because no reviewer is available, so both stay marked as unreviewed. If something reads wrong, suggest better wording; every accepted suggestion is credited.

Suggest a translation fix