Before testing with a screen reader, it’s vital to do keyboard testing first. If a webpage doesn’t work with a keyboard alone, it won’t work with a screen reader.
To use this guide effectively for screen reader testing, make sure you understand how to use a screen reader properly by using the how to use a screen reader guide.
Use the right screen reader and browser combination
Not all screen readers work effectively with all browsers. For testing, the following combinations provide the most coverage of screen readers used by our customers, members, and colleagues. You don’t have to test with each screen reader listed below, but you should test with at least one screen reader per operating system.
| Operating System (OS) | Screen Reader | Browser |
|---|---|---|
| Windows | NVDA | Firefox (primary), Chrome (secondary) |
| Windows | JAWS | Chrome (primary), Firefox (secondary) |
| Windows | Narrator | Edge |
| macOS | VoiceOver | Safari |
| iOS | VoiceOver | Safari |
| Android | TalkBack | Chrome |
Read the page title
Clear and accurate page titles help everyone understand the purpose of the page or document. Page titles must be read out correctly by screen readers so people using this software can understand the meaning of the page or document.
Note: the page title appears at the top of the browser window and briefly describes the content of a webpage.
What to check:
- The page title reads out correctly and in full, e.g., “Savings Accounts and ISAs, Nationwide.”
- The page title clearly and accurately describes the webpage’s content.
Read all content
When screen readers first land on a page, they may read the whole page to familiarise themselves with the content. As users build up a mental model of the content, they may use screen reader shortcuts to jump to areas they are interested in.
Reading all the content on a page can help highlight structural and reading order issues.
What to check:
- All content reads out and makes sense (look out for odd pauses in the speech or mispronunciation of words).
- All content reads in a logical order (top to bottom, left to right) that follows the visual hierarchy of the content.
- Content is not duplicated or missing.
Navigate by heading
Often, when screen reader users first arrive on an unfamiliar page, they build up a mental model of the content by navigating through the headings on the page.
When headings are coded correctly and have the right semantic level, people can build up an accurate model of the page content.
Find out more about headings in the Section headings guide.
Move to each heading in turn
What to check:
- You can move to each heading on the page using a screen reader shortcut key, e.g. H.
- You can move to each heading in a logical order that follows the reading order of the content.
- Headings are read correctly as the heading text followed by the heading level, e.g., “Nationwide for You, heading level 2.”
Using the headings menu
Most screen readers have a way of displaying a menu containing all the headings on a page. It provides a quick way of navigating to specific sections on a page.
What to check:
- The headings menu shows any text on the page that visually appears as a heading.
- Each heading is identified as a heading and read out correctly, e.g. “Nationwide for You, heading level 2” or “Heading level 2, Nationwide for You”.
- You can navigate to each heading from the heading’s menu.
Navigate by link
People using screen readers jump from link to link to navigate through content.
A screen reader must identify a link as a link so users can understand that it is interactive. Links must also have sufficient context to enable someone to understand the link’s purpose the first time they read it.
Find out more about links in the Links and Buttons guide.
Move to each link in turn
What to check:
- Move to each link using the “Tab” key.
- Each link is identified as a link and read out correctly, e.g. ‘About Us, Link’ or ‘Link, About Us’.
- You can activate each link using the “Enter” key.
Use the links menu
Most screen readers have a way of displaying a menu containing all the links on a page. It provides a quick way of navigating to specific links on a page.
What to check:
- The links menu shows all links on the page.
- Every link’s purpose is clear and makes sense in the links menu.
- You can navigate to each link from the links menu.
Navigate by list
Lists are a useful way to organise information.
By identifying lists correctly in the code or document structure, it can help screen readers users to understand the relationships in the content better, enabling them to navigate and digest information more easily.
Find out more about lists in the Lists guide.
What to check:
- You can navigate to each list on the page using screen reader shortcut keys.
- The list reads out as ‘list with number of items in the list,’ e.g. ‘list with five items’.
- You can navigate to each list in a logical order, which follows the visual hierarchy of the content.
- Each item in a text list reads out as ‘bullet’ followed by the item text, e.g., ‘Bullet, find out more about overpayment reserves’.
Navigate by image
Alternative text descriptions for images describe the image in text for people unable to see the image. The descriptions must be clear and accurate, so screen readers users can access the information and understand the content.
Find out more about alternative text descriptions in the Alt text guide.
What to check:
- You can navigate to each image on the page using screen reader shortcut keys.
- You can navigate to each image in a logical order, which follows the visual hierarchy of the content.
- If the image is decorative, the screen reader shouldn’t announce it.
- Functional, complex, or informative images should read out as ‘graphic’, followed by an appropriate alternative text description.
Navigate by table
Navigating by tables helps people using screen readers build up a mental model of data on the page.
Users may not need to read the content in the table initially but instead should be able to understand its purpose and decide if they want to continue further.
Find out more about tables in the Data tables guide.
What to check:
- You can navigate to each table on the page using screen reader shortcut keys.
- You can navigate to each table in a logical order, which follows the visual hierarchy of the content.
- The table title reads out, followed by the word “table” and the number of rows and columns, e.g. “Details of international payment types, cost and timescales table, with four rows and three columns.”
Navigate within a table
All screen readers provide keystrokes that allow users to interact more easily with the table content.
When tables are well-designed and coded, it makes it easier for screen reader users to navigate the table columns and rows to understand the relationships in the content.
What to check:
- You can navigate to the table on the page using arrow keys or screen reader shortcut keys.
- The title of the table reads out.
- When navigating left and right along a row, each column header reads out before the content in the row cell.
- When navigating up and down along a column, each row header reads out before the content in the column.
Navigate within forms
Filling in and submitting forms can be difficult for screen reader users, especially if they are not designed and built in an accessible way. Screen reader users must navigate to each form field, understand what each field is for, how to fill it in, and whether the form contains errors.
Find out more about forms in the Forms guide.
What to check:
- You can navigate to each field in a form using the arrow keys, tab key, or screen reader shortcut keys.
- The label for each form field reads out.
- You can select checkboxes and radio buttons using the Spacebar key.
- You are alerted to validation and error messages on the page, and each error message reads out in full.