NVDA Screen Reader: Complete Guide for Accessibility Testing
NVDA (NonVisual Desktop Access) is the most widely used free screen reader in the world. It is open-source, runs on Windows, and provides a full-featured screen reading experience that rivals commercial alternatives costing hundreds of dollars. For developers and testers, NVDA is an essential tool for verifying that websites and applications work correctly with assistive technology.
Because NVDA is free and open-source, it has become the de facto standard for accessibility testing on Windows. According to the WebAIM screen reader survey, NVDA consistently ranks as the most popular screen reader among respondents, ahead of JAWS and VoiceOver. If you only test with one screen reader, NVDA is the one to choose.
Why NVDA Matters for Accessibility Testing
Automated accessibility testing tools catch roughly 30–40% of WCAG issues. The remaining issues — problems with reading order, focus management, dynamic content announcements, and meaningful screen reader output — require manual testing with actual assistive technology. NVDA gives you direct insight into how a significant portion of screen reader users experience your website.
Installation and Setup
Download NVDA from nvaccess.org. The installer is straightforward and takes less than a minute. During installation, you have two options:
- Install on this computer — installs NVDA as a standard Windows application that can start automatically at the Windows logon screen and run in the system tray
- Create portable copy — creates a self-contained NVDA folder you can run from a USB drive or any directory without installing. This is ideal for testing machines where you do not want a permanent installation
After installation, NVDA launches and presents a welcome dialog. This dialog lets you choose your NVDA modifier key and configure basic settings. You can also access this dialog later from the NVDA menu.
For testing purposes, consider these initial settings:
- Set the speech rate to a comfortable speed (you can always adjust with
NVDA+Ctrl+Up/Down arrows) - Enable the Speech Viewer (under Tools) so you can visually see what NVDA announces
- Disable "Start NVDA after I sign in" if you only want NVDA running during testing sessions
- Consider enabling sounds for focus and browse mode changes so you can hear when modes switch
The NVDA Modifier Key
Almost every NVDA keyboard shortcut uses a modifier key referred to as the "NVDA key" in documentation. By default, this is the Insert key. You can also configure CapsLock as an alternative or additional NVDA key, which is useful on laptops that lack an Insert key.
To change the NVDA modifier key, open NVDA Preferences → Settings → Keyboard, and check or uncheck the modifier key options. You can have both Insert and CapsLock active simultaneously.
Throughout this guide, NVDA refers to whichever modifier key you have configured. So NVDA+T means press Insert+T (or CapsLock+T).
Browse Mode vs Focus Mode
This is the single most important concept to understand when using NVDA. These two modes fundamentally change how your keyboard input is handled, and misunderstanding them is the most common source of confusion for new NVDA users.
Browse mode (also called virtual buffer mode) is active when you are reading web content. In this mode, NVDA intercepts your keystrokes and uses them for navigation. Pressing H jumps to the next heading. Pressing K jumps to the next link. Arrow keys move through the content character by character, word by word, or line by line. You are essentially navigating a linearized version of the page.
Focus mode (also called forms mode) is active when you are interacting with form controls, such as text fields, dropdowns, and checkboxes. In this mode, your keystrokes pass directly to the web page. Pressing H types the letter "h" into a text field rather than jumping to a heading.
NVDA switches between these modes automatically in most cases:
- When you press
EnterorSpaceon a form field in browse mode, NVDA switches to focus mode - When you press
Escapewhile in a form field, NVDA returns to browse mode - When you
Tabinto a text input or textarea, NVDA enters focus mode automatically - When you
Tabout of a form area and onto non-interactive content, NVDA returns to browse mode
You can also manually toggle between modes with NVDA+Space. A rising tone indicates focus mode; a falling tone indicates browse mode.
Understanding this automatic switching is critical for testing. If your custom widget does not trigger the correct mode, users will either be unable to type into it or unable to navigate away from it.
Essential Navigation Shortcuts (Browse Mode)
These shortcuts work in browse mode when reading web pages. They are single-key shortcuts — just press the letter without any modifier. Add Shift to go to the previous element instead of the next.
H/Shift+H— next / previous heading (any level)1through6— next heading at that specific level (e.g.,2jumps to next h2). AddShiftfor previousK/Shift+K— next / previous linkU/Shift+U— next / previous unvisited linkV/Shift+V— next / previous visited linkF/Shift+F— next / previous form fieldB/Shift+B— next / previous buttonE/Shift+E— next / previous edit field (text input)T/Shift+T— next / previous tableI/Shift+I— next / previous list itemL/Shift+L— next / previous listG/Shift+G— next / previous graphic (image)D/Shift+D— next / previous landmark (ARIA landmarks and HTML5 semantic elements)N/Shift+N— next / previous block of text not inside a link
Reading and General Shortcuts
Up/Down arrows— read previous / next lineLeft/Right arrows— read previous / next characterCtrl+Left/Right arrows— read previous / next wordNVDA+Up arrow— read current lineNVDA+B— read the entire document from the current position (say all)NVDA+T— read the window titleCtrl— stop speech immediatelyShift— pause speech (press again to resume)NVDA+Tab— read the currently focused elementNVDA+F— report text formatting at the cursor positionEnter— activate a link or button, or enter focus mode on a form controlSpace— activate a button, check a checkbox, or toggle a controlEscape— exit focus mode and return to browse modeNVDA+Space— manually toggle between browse mode and focus mode
Tab Key Navigation
Tab/Shift+Tab— move to next / previous focusable element (links, buttons, form controls)
The Tab key works in both browse mode and focus mode. It moves focus between interactive elements in DOM order, skipping non-interactive content. This is important for testing keyboard accessibility separately from screen reader navigation — Tab order must be logical and match visual order.
The Elements List (NVDA+F7)
The Elements List is one of the most powerful features in NVDA and one of the most revealing for accessibility testing. Press NVDA+F7 to open it. You will see a dialog with tabs for different element types:
- Links — shows all links on the page with their accessible names
- Headings — shows the heading hierarchy with levels, revealing whether your heading structure is logical
- Form fields — shows all form controls with their labels
- Buttons — shows all buttons with their accessible names
- Landmarks — shows ARIA landmarks and HTML5 sectioning elements
From the Elements List, you can:
- Type in the filter field to search for specific elements
- Select an element and press
Enterto activate it (follow a link, press a button) - Select an element and press
Move toto move NVDA's cursor to that element without activating it
For testing, open the Elements List and examine each tab. Are heading levels sequential (h1, h2, h3, not h1, h3, h5)? Do links have descriptive names instead of "click here" or "read more"? Do form fields have proper labels? Are landmarks present and correctly nested? This single dialog reveals a large number of common accessibility issues.
Speech Viewer
The Speech Viewer is a floating window that displays all text NVDA speaks. This is invaluable for testing because you can see exactly what is being announced without needing to listen to every word at speech speed.
To open it: press NVDA+N to open the NVDA menu, then navigate to Tools → Speech Viewer. Alternatively, you can use NVDA+F2 to open the NVDA menu, then go to Tools.
The Speech Viewer shows text in real time as NVDA speaks it. You can leave it open in a corner of your screen while testing. Look for:
- Missing labels on form fields (NVDA will announce "edit" or "button" without a name)
- Redundant announcements (the same text read multiple times)
- Missing role information (a custom widget that does not announce its type)
- Incorrect state announcements (a toggle that does not announce "pressed" or "expanded")
Working with Tables
NVDA has dedicated table navigation commands that work in browse mode. When you land on a table (using T to jump to it), NVDA announces the table dimensions (rows and columns). You can then navigate within the table:
Ctrl+Alt+Right arrow— move to the next cell in the same rowCtrl+Alt+Left arrow— move to the previous cell in the same rowCtrl+Alt+Down arrow— move to the next cell in the same columnCtrl+Alt+Up arrow— move to the previous cell in the same column
When navigating between cells, NVDA reads the column header (from <th> elements) followed by the cell content. If headers are missing or incorrectly associated, NVDA either reads no header or the wrong one — a clear sign that the table markup needs fixing.
For data tables, always verify:
- Column and row headers are properly defined using
<th>elements - The
scopeattribute is set correctly on headers (colorrow) - Complex tables use
headersandidattributes to associate cells with their headers - The table has a caption or is labeled with
aria-labeloraria-labelledby - Layout tables are not marked up as data tables (use
role="presentation"orrole="none"if needed)
Working with Forms
Forms are where browse mode and focus mode interaction becomes most apparent. When you navigate to a form using browse mode, you can read through the form labels and structure. When you Tab into or press Enter on a form field, NVDA typically switches to focus mode automatically so you can type.
Key behaviors to test:
- Labels — when a field receives focus, NVDA should announce the field's label. If it announces only "edit" or "combo box" without a name, the label is missing or not programmatically associated
- Required fields — fields with
aria-required="true"or therequiredattribute should be announced as "required" - Error messages — when validation errors appear, they should be announced. Use
aria-describedbyto associate error messages with their fields, or usearia-invalid="true"and live regions - Fieldsets and legends — groups of related fields (like radio buttons) should be wrapped in
<fieldset>with a<legend>. NVDA announces the legend when entering the group - Autocomplete and suggestion lists — verify that suggestions are announced and can be navigated with arrow keys
- Custom form controls — date pickers, color pickers, toggle switches, and other custom widgets need ARIA roles, states, and properties to be announced correctly
NVDA Settings for Testing
Open NVDA settings with NVDA+Ctrl+G (General settings) or NVDA+N followed by Preferences → Settings. Key settings panels to configure for testing:
Speech settings:
- Set speech rate to a comfortable level — not too fast that you miss announcements, not so slow that testing takes forever
- Punctuation level affects how much punctuation NVDA reads aloud. Set it to "Some" for general testing
Browse mode settings:
- "Use screen layout" — when enabled, NVDA tries to preserve the visual layout. Disable for a purely linear reading experience
- "Automatic focus mode for focus changes" — controls whether NVDA auto-switches to focus mode. Keep this enabled for realistic testing
- "Automatic focus mode for caret movement" — controls whether moving the caret into a form field triggers focus mode
- "Audio indication of focus and browse modes" — plays a sound when modes switch. Enable this to keep track of mode changes
Document formatting settings:
- Control how much formatting information NVDA reports (font, size, bold, links, headings, lists, tables, landmarks)
- For testing, enable most of these to get a complete picture of what NVDA announces
Testing Workflow for Developers
Follow this structured workflow when testing a page with NVDA:
- Step 1: Page load announcements. Load the page and listen to what NVDA announces. It should read the page title. If the page title is missing or generic ("Untitled"), fix it
- Step 2: Heading structure. Press
NVDA+F7and check the Headings tab. Verify headings are properly nested and descriptive. Then navigate headings withHand number keys to confirm the reading experience - Step 3: Landmark navigation. Press
Dto jump between landmarks. Confirm the page has a main landmark, navigation landmark, and appropriate region labels - Step 4: Link review. Check the Links tab in the Elements List. Look for vague names like "click here," "read more," or empty links. Each link should make sense out of context
- Step 5: Image alt text. Press
Gto jump between images. Verify each image has appropriate alternative text. Decorative images should be hidden from screen readers - Step 6: Form testing. Tab through all form fields. Verify each field is labeled, required fields are announced, and error messages are read when validation fails
- Step 7: Interactive components. Test every interactive widget (menus, tabs, accordions, modals, carousels). Verify ARIA roles and states are announced correctly and keyboard operation works
- Step 8: Dynamic content. Test any content that updates without a page reload. AJAX-loaded content, notifications, live search results, and status messages should be announced via ARIA live regions
- Step 9: Focus management. Open and close modals, navigate multi-step forms, trigger in-page navigation. Verify focus moves to the appropriate location after each action
NVDA with Firefox vs Chrome
NVDA works with both Firefox and Chrome, but there are important differences to be aware of:
Firefox is the recommended browser for NVDA testing. NVDA was originally developed with Firefox in mind, and the two work together most reliably. Firefox provides more detailed accessibility tree information and has better support for certain ARIA attributes. Some NVDA features, like table navigation and certain browse mode behaviors, work most consistently in Firefox.
Chrome has improved its NVDA compatibility significantly over the years, but some differences remain:
- Chrome uses its own accessibility API layer, which can sometimes produce different announcements than Firefox for the same markup
- Some ARIA role implementations behave slightly differently between browsers
- Browse mode document handling and virtual buffer updates can vary
- Chrome's auto-form-fill features can interfere with focus mode behavior
- Live region announcements may be timed differently
For thorough testing, test with both browsers. Start with Firefox for your primary testing pass, then verify critical flows in Chrome since many users do use Chrome with NVDA.
Useful NVDA Add-ons for Testing
NVDA supports add-ons that extend its functionality. Install add-ons from the NVDA Add-on Store (available from the NVDA menu under Tools). These are particularly useful for testing:
- Focus Highlight — visually highlights the current NVDA navigator object, focus position, and browse mode cursor on screen with colored rectangles. Extremely useful for understanding where NVDA thinks the focus is
- Web Access for NVDA — provides enhanced web navigation commands and improved interaction with complex web applications
- Developer Toolkit — displays the accessible name, role, states, and properties of the currently focused object. Essential for debugging ARIA implementations
- NVDA Speech History — lets you review what NVDA has recently spoken, similar to the Speech Viewer but accessible via keyboard shortcut
- Beep Keyboard — plays a beep for every keystroke, making it easy to hear whether NVDA is intercepting keystrokes (browse mode) or passing them through (focus mode)
Common Issues Found with NVDA Testing
These are the accessibility problems most frequently uncovered when testing with NVDA:
Missing or incorrect form labels:
- NVDA announces "edit" without a label name — the input lacks a
<label>with a matchingforattribute, or lacksaria-labeloraria-labelledby - The visual label is present but not programmatically connected to the input
- Placeholder text is used as the only label (disappears when typing, not reliable across screen readers)
Heading structure problems:
- Skipped heading levels (h1 followed by h3)
- Multiple h1 elements on a single page
- Headings used purely for visual styling rather than document structure
- Important sections with no headings at all
Missing landmark regions:
- No
<main>element orrole="main" - Navigation areas not wrapped in
<nav> - Multiple navigation landmarks without distinguishing
aria-labelvalues
Images without alternative text:
- Informative images with empty or missing
altattributes - Decorative images that are not hidden from screen readers (should use
alt=""oraria-hidden="true") - Images of text that could be replaced with actual text
- Complex images (charts, diagrams) without adequate text descriptions
Custom widgets without ARIA:
- Tabs that do not use
role="tablist",role="tab", androle="tabpanel" - Accordions without
aria-expanded - Modal dialogs that do not trap focus or use
role="dialog"witharia-modal="true" - Toggle buttons missing
aria-pressed - Menus not following the ARIA menu pattern
Dynamic content not announced:
- Status messages, notifications, and alerts not using
aria-liveregions orrole="alert" - Loading indicators that are purely visual with no screen reader announcement
- Content that appears or changes on screen without notifying assistive technology
- Single-page application route changes that do not announce the new page title or move focus
Focus management failures:
- Opening a modal without moving focus into it
- Closing a modal without returning focus to the trigger element
- Deleting an item from a list without moving focus to a logical location
- Focus getting trapped in a widget with no way to escape via keyboard
- Focus disappearing into off-screen or hidden elements
Practice Exercises
These exercises will build your NVDA proficiency. Complete them in order, as each builds on skills from the previous one.
Exercise 1: Basic page reading. Open a familiar website (such as Wikipedia) with NVDA running. Use the Down arrow to read through the page line by line. Practice stopping speech with Ctrl and reading the current line with NVDA+Up arrow. Read the page title with NVDA+T.
Exercise 2: Heading navigation. On the same Wikipedia page, press H repeatedly to jump through all headings. Try 1, 2, and 3 to jump to specific heading levels. Use Shift+H to go back. Open the Elements List with NVDA+F7 and examine the heading hierarchy.
Exercise 3: Landmark navigation. Visit a well-structured site and press D to jump between landmarks. Note the landmark types NVDA announces (navigation, main, banner, complementary, contentinfo). Check the Landmarks tab in the Elements List.
Exercise 4: Link and form exploration. Press K to step through links. Notice which links have descriptive names and which are vague. Navigate to a page with a form. Press F to jump between form fields and listen to how each field is announced. Tab through the form and note whether focus mode activates correctly.
Exercise 5: Table navigation. Find a page with a data table. Press T to jump to it. Listen for the table dimensions. Use Ctrl+Alt+Arrow keys to navigate between cells. Pay attention to whether column headers are read as you move down a column.
Exercise 6: Mode switching. On a page with a search field, navigate to the search input in browse mode and press Enter to switch to focus mode. Type a query. Press Escape to return to browse mode. Try pressing NVDA+Space to manually toggle modes. Listen for the mode change sounds.
Exercise 7: Test your own work. Take a page you have built and run through the full testing workflow described above. Open the Elements List and examine every tab. Document the issues you find. Fix them and retest to verify the improvements.
Exercise 8: Dynamic content testing. Visit a page with dynamic behavior (e.g., a page with live search, notifications, or AJAX content loading). Trigger the dynamic behavior and listen for whether NVDA announces the changes. If it does not, the page is likely missing ARIA live regions.
Je vaše spletno mesto dostopno?
Brezplačno skenirajte svoje spletno mesto in prejmite svojo oceno WCAG v nekaj minutah.
Brezplačno skenirajte svoje spletno mesto