Aaron Preece
When you're making your website accessible, there are many guidelines and suggestions to help you do so. Front and center is the Web Content Accessibility Guidelines (WCAG), which are incredibly detailed and comprehensive in detailing what is needed to bring accessibility to your website or web app. If you would like to take things even further, you can use the same software that a blind or low vision person would use to navigate the web to ensure your website is fully accessible and usable.
In this article, we will detail everything you need to know to start testing your website for accessibility using the Non-Visual Desktop Access (NVDA) screen reader on Windows. We choose NVDA as the screen reader of choice for web developers for several reasons. First, it is one of the two most popular screen readers on Windows, the other being JAWS by Vispero. Fortunately, NVDA and JAWS have many commonalities in how they interact with the web and present it to users. Secondly, NVDA is free software that can be downloaded and used by anyone free of charge. Finally, much like JAWS, the free software is relatively complex and full-featured.
Screen Reader Basics
Before we dive into NVDA itself, let's take a moment to understand what a screen reader is and how it functions for a blind or low vision user. A screen reader, in simple terms, takes visual screen content and outputs it as audible speech using a speech synthesizer. It's important to note that in addition to outputting content as speech, a screen reader provides alternative mechanisms for navigating user interfaces to compensate for controls that would normally be accessed by mouse. On desktop computers, this primarily takes the form of keyboard commands. On mobile, screen readers use specific multi-finger gestures to accomplish the same. For this piece, we specifically focus on desktop screen readers as websites on a desktop tend to be displayed in the most complex form.
Getting Started with NVDA
To use NVDA, you will first need to download the software from this page and install it. When you open the installer on your Windows computer, you will hear a musical intro play before the installer loads. When the installer loads, you will be presented with speech feedback as a temporary copy of NVDA is loaded onto your system so that you may complete the installation successfully if you are someone who is blind or has low vision. Be aware of the speech, but everything you need to install the program will be presented to you visually, and you can use your mouse as normal to complete the installation on your computer.
When NVDA first launches, you will be presented with a dialog box welcoming you to NVDA and allowing you to set your keyboard layout as well as choose if you wish the Caps Lock key to be the NVDA modifier key. The NVDA modifier key is incredibly important and used for a massive amount of the commands present in NVDA. I highly recommend that you check the checkbox to make Caps Lock the NVDA modifier key as it significantly improves your ability to input NVDA-specific commands efficiently. When Caps Lock is a modifier key, you can still use the Caps Lock function by pressing it twice quickly.
With the decisions in the welcome dialog made and the dialog closed, you will most likely wish to change some default settings in NVDA such as the speech synthesizer or the rate of speech. NVDA is primarily a keyboard-command-driven application with little visible UI. That being said, there are UI elements for settings and tools that you may wish to access. To gain access to NVDA settings and preferences, open the main NVDA menu by pressing and holding the NVDA key and then pressing N. So going forward, we would say something like, "To open the NVDA menu, press NVDA+N."
Now you should have a visual menu that you can use your mouse or arrow keys to interact with. I would first recommend going into Preferences and then into Settings to adjust the speech settings. Make changes to the rate and other options as you wish and then apply the changes and close this window. NVDA will automatically save your changes by default, but in case you would like to save them manually, hold NVDA and Ctrl and press C. You should hear "configuration saved," alerting you that you have saved your current settings manually.
Before we open a web browser and begin exploring the web with NVDA, we need to make one more change. Go back into Preferences and Settings, and navigate to Browse Mode. Here, you want to uncheck the box that says "Use screen layout when supported." The most drastic change to turning this off will be that now, all links will show up as the first item on their line when navigating the web using arrow keys. When this option is left on, inline links are left inside of the sentences where they appear. This can make navigation much more cumbersome when using the web, in my personal experience.
Before we begin using NVDA on the web, there is an NVDA add-on that is incredibly helpful to anyone using NVDA visually online. NVDA can be augmented through add-ons—small application packages that can be installed for greater functionality. For some examples of those I use personally to augment the accessibility of my computer usage, see this blog post. The add-on we wish to find is called Focus Highlight. The link provided in the previous sentence will work properly with the latest version of NVDA at the time of this article's publication. Focus Highlight is incredibly useful as it will show a visual marker on the screen illustrating where NVDA is currently focused. In addition, the different colors of the marker around the focus element will show if the element is one that can be navigated to using the keyboard normally or is an element only navigable because of NVDA's processing of the web page.
When you use a screen reader on the web, essentially the screen reader takes the HTML code of the site that has been displayed and structures it into one large column. Think about the situation where you have a navigation bar going left to right as well as a sidebar going vertically that is next to the main content of your page. For NVDA, your navigation bar will probably appear first if you have constructed it so in your HTML, and each item in the navigation bar, even though it is visually arranged horizontally, will be navigated vertically using the up and down arrows. Subsequently, you will find your sidebar and then below that your main content of your page or potentially vice versa depending on your layout in the actual HTML code. A good way to think of this is that every single web page is displayed as if it were a Word document. So up and down arrows move line by line, left and right move character by character, and other keyboard commands you can use in a Word document function similarly, such as Ctrl+left and right for navigating word by word or Home and End for navigating to the beginning or end of the line. This is vitally important to keep in mind because you want to be sure that the focus order in your actual HTML code is displayed in such a way that you want the screen reader user to see your page when they visit it.
Using the up and down arrow to navigate through most pages does become quite cumbersome due to the sheer size and complexity of most websites. Fortunately, NVDA includes a set of single-key keyboard shortcuts that will allow you to navigate by different elements on the page. This is important to keep note of as most blind or low vision people have been trained to use various shortcuts frequently to efficiently navigate web pages. For example, headings have for decades been the most commonly suggested method for navigating to key content on a website. The assumption is that if, say, you're reading an article on a news website, the main content or the article will be preceded by a heading level one. By jumping directly to this heading, the blind or low vision user can efficiently navigate past all of the header information to get to the content they're actually interested in. If you do not have a heading, it makes it much more difficult for someone using a screen reader to access this content. However, if there is a reason why you would not want to implement a proper HTML heading, you can use something like an ARIA landmark, which also has a keyboard shortcut to allow users to jump by different specifically landmarked portions of your page.
Here are some common keyboard shortcuts for navigating to different elements: - H: Moves forward down the page by all heading levels. - 1-6: Navigates forward by specific heading levels. This is extremely valuable when navigating a lengthy web page, such as a Wikipedia article, that has many sections and subsections. - F: Navigates by form elements. This can be anything including edit fields, buttons, radio buttons, checkboxes, and combo boxes. All of these elements also have shortcut keys, such as E for edit field, R for radio button, B for button, C for combo box, and X for checkbox. - K: Navigates by links. - N: Navigates to the next plain text after a block of links. This does not always function properly, but it is intended to allow a user to skip past things like a navigation bar where you have a long list of links one after another. The assumption being the next bit of plain text will probably be the main content that someone is searching for or potentially the title of the next list of content.
There are several other less commonly used keyboard shortcuts; you can see these in the NVDA Commands Quick Reference by going into the NVDA menu with NVDA+N, selecting Help, and selecting Commands Quick Reference. All of these keys navigate the user forward on the page. If the user wishes to move backwards through the page, they can use the same exact keys by simply holding Shift while doing so. So, holding Shift and pressing H will navigate backwards by headings.
When you're navigating a webpage in this way using the arrow keys as well as the single-key shortcut keys to navigate by elements, you're in what is considered NVDA Browse Mode. If you intend to type anything into an edit field or, in many cases, use shortcut keys provided by a web app, the single-letter shortcut keys for elements are going to interfere. This is where Focus Mode is helpful. Focus Mode can either be entered automatically upon NVDA's focus landing on an element in which Focus Mode would be preferred, such as an edit field, or can be manually triggered by pressing NVDA+Spacebar. When you do so, you will hear a mechanical click or button-press type sound to indicate that you're in Focus Mode. Pressing it again will return you to Browse Mode, whereupon you will hear a beep sound.
As mentioned, entering Focus Mode is useful when interacting with certain page elements such as edit fields and combo boxes. But it can also be incredibly useful when using modern web apps. For example, Google Docs employs a significant number of keyboard shortcuts that can only be used when in Focus Mode. Likewise, the way accessibility has been implemented for a screen reader to accurately present the Google Docs app to the user requires Browse Mode to be turned off.
The Bottom Line
It's heartening to see the number of resources available to web developers who seek to make their websites and web apps accessible. Being able to use the same tools as someone who is blind or low vision when using your website can provide you with instant feedback on your accessibility implementations. It can also allow you to find accessibility or usability gaps that you might not otherwise detect when simply using instructional resources such as the Web Content Accessibility Guidelines.
