Table of Contents
ABOUT NVDA (NON VISUAL DESKTOP ACCESS) TOOL
NVDA is a free screen reader that enables blind and visually impaired people to use a computer. This tool reads the text on the computer and thus helps the users. For accessibility testing, NVDA is used as one of the manual ways of testing to ensure that the website is made accessible for the blind and visually impaired.
STEPS TO WORK WITH THE TOOL:
- Download the latest version of NVDA for Windows OS from https://www.nvaccess.org/
- The installation is straightforward and doesn’t require much configuration
- Once NVDA is installed, launch it by pressing the Windows Key + Alt + N or selecting it from the Start menu.
- NVDA will start speaking immediately, and you will hear a welcome message like “NVDA has started.”
- Now that NVDA is running, it will start reading everything on the screen.
- To test your website or digital content, navigate through your content using the keyboard.
- NVDA relies on keyboard navigation, so you’ll need to use the Tab key, arrow keys, and Enter to move through different parts of the page.
- Tab: Move through interactive elements (links, buttons, form fields).
- Arrow keys: Read content in paragraphs or lists.
- Enter: Activate a link or button.
- H: Jump to the next heading.
- Read Aloud: NVDA will read aloud the text it encounters on the screen. It will also read out alternative text (alt text) for images and any other content it encounters.
- To use NVDA effectively for accessibility testing, focus on the following areas:
- Navigation with Keyboard
- Test how easy it is to navigate your content using only the Tab and Arrow keys. A well-structured page should allow users to navigate logically using the keyboard.
- Ensure that interactive elements (links, buttons, form fields) are reachable via keyboard navigation.
- Headings and Structure
- Use the H key to quickly navigate through headings. Make sure that the page uses proper heading hierarchy (e.g., <h1> for main headings, <h2> for sub-headings) to make the page easier to navigate for screen reader users.
- NVDA will announce the heading level and text as you move through them.
- Navigation with Keyboard
- To test the application forms & labels,
- Form Elements: Navigate to form elements using Tab or Shift + Tab. Test each field to make sure it has a clear label and is correctly associated with its input field.
- NVDA will announce form controls, including labels, input fields, checkboxes, and dropdowns. For example, it will read “Edit text” for text inputs, “Checkbox checked” or “Checkbox unchecked” for checkboxes, etc.
- Ensure that all form elements are properly labeled using <label> tags in HTML.
- To test the application images and Alt Text
- NVDA will read out the alt text for images. Make sure every image has descriptive and meaningful alt text.
- To test this, use the Arrow keys to navigate and listen to how NVDA reads the images.
- If an image doesn’t have alt text, NVDA will announce it as “Image” or “Empty image.”
- To test the application links
- NVDA reads out the text of each link. Ensure that links are descriptive and make sense when read out of context.
- For example, “Click here” is not accessible, as it lacks context. Instead, use meaningful link text, like “Read more about our services.”
- Test the focus order of links by tabbing through them. Links should be in a logical order as users move through the page.
- To test the application tables
- When testing tables, NVDA will announce the number of rows and columns and any data it encounters.
- Make sure that tables have appropriate headers and semantic markup (using <th> for table headers and <tr> for rows).
- NVDA will also read out table relationships (e.g., which cell is in which row and column) if proper table markup is used.
- To test for Color Contrast
- While NVDA doesn’t directly test color contrast, it’s important to check whether users who rely on screen readers also benefit from good color contrast.
- Use other tools (like WAVE or Color Contrast Analyzer) to check contrast, then verify how the content is spoken by NVDA.
- NVDA has some advanced features you can use to refine your testing:
- Explore by touch (for touchscreens): If you’re testing a mobile or touch-based interface, you can use NVDA’s Explore by touch mode to interact with the screen via touch gestures.
- Speech Settings: You can adjust the speech rate, volume, and voice through the NVDA settings menu.
- Keyboard Shortcuts: Learn some important NVDA keyboard shortcuts to improve testing efficiency:
- Insert + Up Arrow: Start reading from the current location.
- Insert + Down Arrow: Stop reading.
- Insert + Spacebar: Open the NVDA menu.
- Insert + T: Read the current title of the page.
- Insert + F7: Open the links list.
- Insert + F12: Enable/disable speech output.
- NVDA works with dynamic content (AJAX, modal dialogs, etc.) but may not always announce changes automatically. To test dynamic content:
- Test with the Arrow keys and Tab key to check if content is read out when it changes.
- If dynamic content doesn’t get announced, ensure you’re using proper ARIA (Accessible Rich Internet Applications) roles and properties, like aria-live regions.
- As you use NVDA, make note of issues you encounter, such as:
- Missing alt text for images.
- Improper heading structure.
- Lack of keyboard accessibility for interactive elements.
- Missing or misused form labels.
- Inadequate contrast or poorly described links.
- Address these issues by modifying your web code (HTML, CSS, JavaScript) to improve accessibility.
- To exit NVDA, press Ctrl + Alt + N, or right-click on the NVDA icon in the system tray and select Exit NVDA.
PROS
- Simple to install and use.
- NVDA can convert text into braille (if the user has a braille display).
- Available in multiple languages.
CONS
- Only works with Windows (Not compatible with other OS types).
- Earlier versions had issues with Excel crash/chrome crash while using it, but it is reported that those issues got fixed in the latest release.
- Does not work with mobiles/tablets.
DEMO APPLICATIONS TO PRACTICE:
https://broken-workshop.dequelabs.com/
https://dequeuniversity.com/demo/dream
https://webtestingcourse.dequecloud.com/
https://dequeuniversity.com/demo/mars/
https://findanexpert.unimelb.edu.au/
https://dylanmhowell.com/seo-for-photographers/
https://www.ssa.gov/accessibility/andi/help/demo/index.html