top of page

NVDA Screen Reader Tutorial: How to Use It for Accessibility Testing

Updated: 6 days ago



When testing web accessibility, it’s essential to ensure that users with visual impairments can navigate and interact with your website. One of the most effective ways to achieve this is by using a screen reader. NVDA (NonVisual Desktop Access) is a free and open-source screen reader that reads the content on your screen aloud. Here’s a practical guide on how to use NVDA for accessibility testing, focusing on key tasks you can perform to ensure your website is accessible.


Install NVDA Screen Reader

  • Download NVDA: Go to nvaccess.org and download the latest version.

  • Launch NVDA: Once installed, NVDA will automatically start reading aloud. If not, press Ctrl + Alt + N to launch it.

Basic Navigation with NVDA Screen Reader

NVDA is operated using the keyboard, which is essential for accessibility testing. Here are the most useful navigation commands:

  • Tab: Move forward through clickable elements (links, buttons, form fields).

  • Shift + Tab: Move backward.

  • Arrow Keys: Move through text and content:

    • Up/Down: Move line by line.

    • Left/Right: Move character by character.

    • Ctrl + Arrow: Move word by word.

  • H: Jump to the next heading.

  • 1-6: Navigate directly to a specific heading level (e.g., “1” for level 1 headings).

  • Enter: Activate a link or button.


Testing with NVDA Screen Reader

To test web accessibility using NVDA, focus on key aspects like headings, form fields, links, images, and interactive elements. Here are some tasks to perform:

  1. Headings: Check if the heading structure is logical. Use H and the number keys (1-6) to navigate through headings. Ensure that headings are properly nested, making it easy for users to understand the page's structure.

  2. Links and Buttons: Use Tab to navigate to links and buttons. Ensure that links are descriptive (e.g., "Click here" should be avoided). Buttons should have accessible labels that clearly describe their function.

  3. Forms: Navigate through forms using Tab and Shift + Tab. Ensure that form fields are properly labeled, and error messages are clear when form validation fails.

  4. Images: Check that all images have meaningful alt text. NVDA will read the alt text aloud, so ensure that the description is clear and provides context to the image.

  5. Dynamic Content: For websites with dynamic content, such as popups or AJAX updates, ensure that NVDA announces changes. This can be tested by interacting with elements that trigger dynamic changes and listening to the screen reader’s feedback.

  6. Keyboard Accessibility: Ensure that all interactive elements can be accessed via the keyboard alone. Test that you can navigate through all important elements using only the Tab and arrow keys.

  7. Testing Links: Ensure that each link has clear and descriptive text. NVDA reads links aloud, so it’s important that the link text conveys its purpose.


Common Accessibility Issues in Forms with NVDA Screen Reader on Windows

  1. Element Announcement Duplication: NVDA may announce elements multiple times due to improper ARIA roles or labels.

  2. Incorrect Focus Order: Focus may skip or follow an illogical sequence, disrupting navigation.

  3. Unannounced Elements: Some form elements may not be announced by NVDA if they lack proper roles or names.

  4. Unexpected Scrolling: Focus on an element may trigger unexpected page scrolling.


This practical guide should help you leverage NVDA for thorough accessibility testing, ensuring that your website is accessible to users with visual impairments. For more details, please watch the video.

Commentaires


© 2023 by Mark Shrike

bottom of page