You have run a scanner, fixed the red icons, and the report looks clean. But you still do not know what your site sounds like to someone who cannot see it. The only way to find out is to listen.
NVDA is a free, widely used screen reader for Windows. This guide shows how to test a website with NVDA as a beginner: installing it, the handful of moves you need, how forms behave differently, and what to listen for on a business site. You will not become an expert user in an afternoon, and you do not need to. You need to hear the obvious problems.
Set your expectations first
NVDA users are often very fast. They listen at high speech rates and jump around pages with single keys. You will be slow and a little lost at first, and that is fine. The goal is not to imitate an expert. It is to notice when the site gives you nothing to work with: a button with no name, a form field with no label, an error that is never announced.
Two tips save a lot of frustration:
- Practice on a site you know is well built first. The W3C’s Web Accessibility Initiative pages are one reasonable choice. Spend fifteen minutes there so you know what “normal” sounds like, then switch to your own.
- Turn on the Speech Viewer. It is in the Tools section of the NVDA menu, which you open from NVDA’s icon in the Windows system tray. It shows everything NVDA says as text in a small window, so you can read along and copy exact phrases into your notes.
Installing NVDA
- Download NVDA from NV Access, the nonprofit that makes it. It is free; a donation is invited but not required.
- Run the downloaded file. You can install it, or run it as a temporary or portable copy. Installing is best if you will test regularly.
- On first run, NVDA shows a welcome dialog. Here you choose the keyboard layout (desktop or laptop) and whether Caps Lock should also act as the NVDA key.
- Open Chrome or Firefox. Both work well with NVDA, and most NVDA users browse with one of them.
The NVDA key is the modifier used for NVDA’s own commands. By default it is Insert, and you can also set Caps Lock. NVDA’s help menu includes a commands quick reference, which lists every key combination. Keep it open in another window while you learn, rather than memorizing lists from blog posts.
When you want to stop, you can quit NVDA from its menu. Learn the command to silence speech early too; it is listed in the quick reference and you will use it constantly.
The few moves you need to test a website with NVDA
When a web page loads, NVDA is in browse mode. In browse mode, single letter keys jump through the page by type of element. You only need a few:
| Key | What it does | What you are checking |
|---|---|---|
| H | Moves to the next heading | Does the page have a sensible outline? |
| K | Moves to the next link | Does each link say where it goes? |
| F | Moves to the next form field | Does each field announce a label? |
| Tab | Moves to the next focusable item, as a keyboard user would | Is the focus order logical, and are all controls reachable? |
| Down arrow | Reads the next line or item | Is the reading order the same as the visual order? |
Hold Shift with H, K, F or Tab to go backward. That is enough to test most of a business site.
NVDA also has an Elements List: a dialog that lists all the headings, links, form fields, buttons or landmarks on the current page. The quick reference gives the command. It is the fastest way to review the heading outline or spot a page full of links that all say “Learn more.”
Forms: browse mode and focus mode
Forms are where beginners get confused, so it helps to understand what NVDA is doing.
In browse mode, letter keys are navigation commands. But in a text field, you need those keys to type. So when you move into a form field, NVDA switches to focus mode, where keys go to the field instead. It plays a short sound when the mode changes. Tabbing into a field normally switches to focus mode automatically; NVDA has a command to switch back and forth by hand, listed in the quick reference.
Use that to test a form properly:
- Press F or Tab to move into the first field. Listen: you should hear the label, the type of field and “required” if it is required.
- Type something and move on. Do this for every field, including checkboxes, radio buttons and dropdowns.
- Submit the form with a required field left empty, or an email address without the @.
- Listen to what happens. Is an error announced? Does it say which field and how to fix it? Does focus move somewhere useful, or does nothing seem to happen at all?
- Fix the errors and submit again. Is the success message announced, or does it appear silently on screen?
A form that looks perfect on screen often fails at step 4. Red text appears under the field, and NVDA says nothing. That fails 3.3.1 Error Identification for a screen reader user, and possibly 4.1.3 Status Messages. The post on accessible form error messages covers the fixes.
What to listen for, page by page
Go through each important page and keep a short note of anything that sounds wrong. Write down exactly what NVDA said. Here is a checklist that suits most business sites.
When the page loads
- NVDA reads the page title. Does it name the page, such as “Book an appointment, Riverside Dental,” or is it the same on every page?
- Is the text read in the right language and accent? A page with the wrong language setting can sound like gibberish.
Headings and structure
- Press H repeatedly. Is there one main heading for the page? Do the headings describe the sections that follow?
- Are there headings that are not really headings, like a phone number or “Welcome!” styled large? Or bold text that should be a heading but is not, so H skips it?
Links and buttons
- Press K through the links. Can you tell where each goes without the text around it? A string of “read more, read more, read more” fails users who browse by links. See our notes on writing descriptive link text.
- Tab to icon buttons such as the menu toggle, search, cart and social icons. Hearing “button” alone, or “link” followed by a URL, means the control has no accessible name.
- Does the menu toggle say whether it is expanded or collapsed when you press it?
Images
- NVDA announces images as “graphic” followed by the alt text. Informative images should be described meaningfully. Decorative images should be skipped entirely.
- Listen for file names (“graphic, hero underscore final two dot jpg”) and alt text that repeats the caption word for word.
Dynamic content
- Open accordions, tabs and dropdowns. Is the new content reachable and in a sensible place in the reading order?
- Trigger popups. Does focus move into them? Can you close them and return to where you were?
- Add something to a cart or filter a list. Is there any announcement that something changed?
Content that should not be there
- Visually hidden menus or slides that NVDA still reads.
- Duplicated content, such as a mobile and a desktop menu both being read.
- Text that only exists for search engines and makes no sense spoken aloud.
Recording what you find
Each time you test a website with NVDA, your notes make the difference between “NVDA was weird on the contact page” and an issue someone can fix. For each problem, record the page, the element, the keys you pressed, and what NVDA said, quoted exactly. Add which browser you used, since NVDA with Chrome and NVDA with Firefox occasionally behave differently.
It also helps to note whether the problem also shows up in a keyboard-only test. Many screen reader problems, such as unreachable menus, are keyboard problems underneath. Others, such as missing labels, only show up when you listen.
NVDA is one screen reader. Mac and iPhone users mostly use VoiceOver, which behaves differently in places. If you have access to an Apple device, our VoiceOver testing guide is the natural next step. For where both fit into a complete test, see the full website accessibility testing method.
Frequently asked questions
Is NVDA really free?
Yes. NVDA is free and open source, made by the nonprofit NV Access. You can download and install it on any Windows computer without paying anything. NV Access invites donations, but the screen reader itself has no license fee, which is one reason it is so widely used for testing.
Should I test with NVDA or JAWS?
If you can only choose one Windows screen reader, start with NVDA because it is free and widely used. JAWS is also common, especially in workplaces and some government settings, and it is a paid product. Both handle well-built sites similarly. A site built to WCAG with standard HTML usually works in both.
Can I run NVDA without installing it?
Yes. The download can run as a temporary copy, or you can create a portable copy to keep on a USB drive. Either works for testing websites. An installed copy is more convenient if you test regularly, and it works in a few places a portable copy cannot, such as Windows sign-in screens, which do not matter for web testing.
Why does NVDA stop working when I type in a form?
It has probably switched to focus mode. In browse mode, letter keys are navigation shortcuts. In a form field, NVDA switches to focus mode so your keys type text instead, and plays a short sound when it does. Move out of the field, or use the command in the quick reference to switch back to browse mode.
Listening to your own site is uncomfortable the first time, and very useful. If you would like an experienced tester to run NVDA and VoiceOver across your templates and write up what needs fixing, our screen reader testing service does that. The broader picture of our ADA website accessibility help covers how the fixes follow.
Next in this series: VoiceOver Website Testing on Mac and iPhone
