Testing with Screen Readers

Automated tools can tell you that a button has no name. Only a screen reader can show you what using your page actually feels like: whether headings make sense, whether a dialog is announced, whether a status message is heard at the right moment. You do not need to become an expert user. A developer who knows a dozen commands can find most serious problems in ten minutes.

In this lesson you will learn which screen readers to use, the key commands for NVDA, the gestures for VoiceOver and TalkBack on phones, and a repeatable test script. Remember that you are a beginner with these tools; real screen reader users are much faster and use more features, so testing with them is even better.

Which screen reader?

In India, many people go online mainly on Android phones, so testing with TalkBack on an Android phone is very valuable. On a Windows laptop, start with NVDA. The examples below were checked against the NVDA 2026.3 user guide; key names can differ slightly between versions.

NVDA essentials

Install NVDA from the NV Access website. If you allowed the desktop shortcut during installation, Ctrl+Alt+N starts it. NVDA uses a modifier key called the NVDA key: by default Insert (you can also choose Caps Lock in the settings).

Add Shift to the single-letter keys to go backwards, for example Shift+H for the previous heading.

NVDA has two modes on web pages. In browse mode, the single-letter keys above jump around the page. In focus mode, keys go to the control, so you can type in a text field. NVDA usually switches automatically when you Tab into a field. The Speech Viewer (NVDA menu, Tools, Speech viewer) shows everything NVDA says as text, which is very helpful when you are learning, or when you want to copy an announcement into a bug report.

VoiceOver and TalkBack essentials

VoiceOver on a Mac: press Command+F5 to turn it on or off. The VoiceOver modifier, written VO, is Control+Option together (or Caps Lock). VO+Right arrow and VO+Left arrow move to the next and previous item, VO+Space activates the item, and VO+U opens the rotor, a menu of headings, links, landmarks and form controls.

VoiceOver on iPhone: Settings, Accessibility, VoiceOver. Swipe right or left with one finger to move to the next or previous item, double-tap anywhere to activate, and rotate two fingers on the screen to use the rotor. Set up the Accessibility Shortcut so you can turn VoiceOver on and off quickly; you will need it, because touch works differently while it is on.

TalkBack on Android: Settings, Accessibility, TalkBack, then Use TalkBack. You can also set a shortcut that turns it on when you press and hold both volume keys for a few seconds. Swipe right or left to move between items, double-tap to activate, and use two fingers to scroll. TalkBack opens a tutorial the first time you turn it on; do it once.

A practice page

Run this page, start a screen reader, and try the commands: list the headings, jump between landmarks, fill in the form and listen to the status message.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Practice Page - Kochi Tourist Info</title>
</head>
<body>
  <header>
    <p>Kochi Tourist Info</p>
    <nav aria-label="Main"><a href="#see">Places</a> | <a href="#plan">Plan a trip</a></nav>
  </header>
  <main>
    <h1>Visit Kochi</h1>
    <h2 id="see">Places to see</h2>
    <ul>
      <li>Fort Kochi beach</li>
      <li>Mattancherry Palace</li>
      <li>Chinese fishing nets</li>
    </ul>
    <h2 id="plan">Plan a trip</h2>
    <form id="trip">
      <label for="days">Number of days</label>
      <input id="days" type="number" min="1" max="10" value="2">
      <fieldset>
        <legend>Travelling by</legend>
        <input type="radio" id="t-train" name="travel" checked> <label for="t-train">Train</label>
        <input type="radio" id="t-air" name="travel"> <label for="t-air">Air</label>
      </fieldset>
      <button>Get suggestions</button>
    </form>
    <p id="status" role="status"></p>
  </main>
  <footer><p>Practice page for screen reader testing.</p></footer>
  <script>
    document.querySelector("#trip").addEventListener("submit", (event) => {
      event.preventDefault();
      const days = document.querySelector("#days").value;
      document.querySelector("#status").textContent = `Suggestions ready for a ${days}-day trip.`;
    });
  </script>
</body>
</html>

In NVDA, NVDA+F7 lists three headings, D moves through banner, navigation, main and content information landmarks, and pressing the button announces "Suggestions ready for a 2-day trip." without moving focus.

A ten-minute test script

Use the same steps on every page you test:

1. Load the page. Is the title announced and does it describe the page?
2. Headings list. Do the headings form a sensible outline? Is there one <h1>?
3. Landmarks. Is all content inside landmarks? Are repeated landmarks labelled?
4. Links list. Does every link make sense out of context?
5. Tab through everything. Does each control announce a name, a role and its state? Is anything skipped, or does focus go somewhere invisible?
6. Use every widget. Open menus, dialogs, tabs and accordions. Are state changes announced? Does focus go to the right place?
7. Submit forms with mistakes. Are errors announced and linked to fields?
8. Trigger dynamic updates. Are status messages heard, once, at the right time?
9. Images. Do informative images have useful alternatives, and are decorative ones silent?

Write down exactly what you heard, not just "it was wrong". "Button announced as 'button' with no name" is a useful bug report.

Find the bugs

This page looks fine but has four problems that only show up with a screen reader or in the accessibility tree. Find them before reading the exercise solution.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Page</title>
</head>
<body>
  <main>
    <h1 aria-hidden="true">Rohtak Bus Pass</h1>
    <img src="https://course.ethicscomputer.in/assets/samples/avatar.svg" width="80" height="80">
    <p>Pass holder: Kabir Malik</p>
    <button type="button" id="share"><svg width="16" height="16" viewBox="0 0 16 16"><circle cx="8" cy="8" r="6" fill="#0b5cad"/></svg></button>
    <button type="button" aria-expanded="true">Show pass details</button>
    <p hidden>Valid until 31 March 2027</p>
  </main>
</body>
</html>

Common mistakes

• Testing only with a mouse while the screen reader talks. Use the keyboard or touch gestures, as real users do.
• Treating one screen reader as all of them. Behaviour differs; test the main pairs your users have.
• Adding extra text to "help" the screen reader, such as "button" inside the button text. Screen readers already announce roles.
• Forgetting mobile. Test on a real phone with TalkBack or VoiceOver.
• Not turning the screen reader off before testing with the mouse on a phone. Touch behaves differently while it is on.

Key points

• Test with at least NVDA (Windows) and TalkBack (Android); add VoiceOver on Apple devices when you can.
• Learn a small set of commands: headings, landmarks, links, form fields, the elements list and read all.
• NVDA has browse mode for reading and focus mode for typing; NVDA+Space switches.
• Follow the same short script on every page, and record exactly what you heard.
• Screen reader testing complements, and never replaces, automated checks and keyboard testing.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Bus Pass - Rohtak City Bus</title>
</head>
<body>
  <main>
    <h1>Rohtak Bus Pass</h1>
    <img src="avatar.svg" width="80" height="80" alt="Photo of the pass holder">
    <p>Pass holder: Kabir Malik</p>
    <button type="button" id="share">
      <svg aria-hidden="true" width="16" height="16" viewBox="0 0 16 16"><circle cx="8" cy="8" r="6" fill="#0b5cad"/></svg>
      Share pass
    </button>
    <button type="button" aria-expanded="false" aria-controls="details">Show pass details</button>
    <p id="details" hidden>Valid until 31 March 2027</p>
  </main>
</body>
</html>