Leo

When you’re designing and developing for accessibility, performing manual testing using a screen reader is important to catch and fix accessibility and usability issues that cannot be caught by automated accessibility checkers. You can catch the majority of issues by performing testing using the screen readers that your users rely on the most. If you haven’t already, you want to set up a screen reader testing environment on your computer, and invest a little learning time to get acquainted with the most relevant screen reader commands and shortcuts that you will need to perfom basic manual testing with a screen reader on a day-to-day basis. In this chapter, we will walk through setting up a screen reader testing environment on your computer. We will discuss software options you have to do that (both free and premium), and what screen reader and browser combinations to test with. We will also go through enabling accessibility testing on a Mac (which requires a little manual work to do). And finally, we will learn about a few useful features and cheasheets that make testing a little friendlier when you’re just getting started. <h2 id="macos-vs-windows-screen-readers" tabindex="-1">macOS vs Windows screen readers</h2> Both Windows and macOS come with screen readers built into them that are available for free. The built-in Windows screen reader is called Narrator. The macOS built-in screen reader is VoiceOver. According to <a href="https://webaim.org/projects/screenreadersurvey9/">WebAIM’s screen reader user survey</a>, more than 90% of screen reader users reported being on Windows. And according to the same survey, the two most popular screen readers are <a href="https://www.freedomscientific.com/Products/Blindness/JAWS">JAWS (Job Access With Speech)</a> and <a href="https://www.nvaccess.org/">NVDA (NonVisual Desktop Access)</a> (which are both Windows screen readers), followed by VoiceOver. If you’re already on Windows or if you own a Windows machine, you’re already halfway through setting up your screen reader-testing environment. If you’re on a macOS computer, you shouldn’t test solely with VoiceOver. It is more opinionated and does not always reflect what the majority of screen reader users experiences.  If you’re on macOS and you have no access to a Windows machine (whether an actual machine or a virtual one), you can test your work with Windows screen readers using any modern browser instead. We’ll get back to this in another section. <!-- ## Choose a virtualization environment

There are three popular Virtual Machine software for macOS:

VirtualBox (Free, open-source)
Parallels Desktop (Commercial)
VMWare Fusion (Commercial)

VirtualBox has an advantage over other options in that it is open-source and available for free. Parallels Desktop and VMWare Fusion are commercial software.

I personally use Parallels Desktop because it is fast and has a very intuitive user interface. But you can use whichever one you prefer.

Once you have chosen, downloaded and installed a virtualization environment, you can install and run a virtual machine on it.

Download a Windows Virtual Machine (VM)

Microsoft provides free Windows 10 Virtual Machines that you can download and manage locally.

The VM requies a password to login which Microsoft provides along with the installation instructions. The password is Passw0rd!.

Once you've downloaded a VM, you want to install it using the virtualization software you have installed earlier.

After installing, take a snapshot of the virtual machine because it will expire after 90 days. Taking a snapshot allows you to roll back in time to that snapshot so you can keep using the virtual machine without interruptions.

To take a snapshop using Parallels desktop:

Go to "Actions" > "Take Snapshot"

Give your snapshot a name and an optional description.

If you're not using Parallels, follow the instructions to take a snapshot in the virtualization environment you chose. Marcus Herrmann wrote a short and practical step-by-step guide to installing a Windows 10 VM on VirtualBox that I recommend checking out for instructions on how to get set up in VirtualBox. </aside>

With your Windows VM set up and ready to go, you can now start installing the screen readers you want to test on. --> <h2 id="setting-up-windows-screen-readers" tabindex="-1">Setting up Windows screen readers</h2> JAWS is the most popular and feature-rich screen reader. a JAWS license isn’t free and is faily expensive. But you can still use it to perform testing for your work. JAWS will run in full in demo mode for 40 minutes at a time, until it is activated on your computer. While this is a limitation for longer testing sessions, the 40 minutes are usually more than enough to perform basic testing. NVDA is a feature-rich, free alternative to JAWS. We will install and set up NVDA in the following sections. <h3 id="download-nvda-screen-reader-on-windows" tabindex="-1">Download NVDA screen reader on Windows</h3> Go to the <a href="https://www.nvaccess.org/">NVAccess Web site</a>. Click the Download link. That will take you to the <a href="https://www.nvaccess.org/download/">NVDA download page</a>. NVDA is available for free, but <a href="https://www.nvaccess.org/support-us/#donation-support">a donation</a> is strongly encouraged.  Click the Download button. Wait for NVDA to download. And go through the installation wizard when it’s done.  <h4 id="visualize-nvda%E2%80%99s-current-focus-target-with-visual-highlight" tabindex="-1">Visualize NVDA’s current focus target with Visual Highlight</h4> To make testing with NVDA more convenient (especially if you’re new to screen reader testing), I recommend enabling NVDA’s Visual Highlight feature. To enable it, go to Preferences > Settings > Vision > Visual Highlight, and check the Enable Highlighting option. <figure class="wide"><img src="https://www.sarasoueidan.com/assets/images/article--a11y-testing-env/nvda-visual-highlight.png" alt="Screenshot of the Vision panel in NVDA settings. In the Vision panel, the 'Enable Highlighting' option is checked in the Visual Highlight group." /></figure> What this does is it shows a focus highlight around the element that NVDA is currently focused on — whether it’s in a webpage or anywhere on your system. This feature is useful for partially-sighted screen reader users who want to track the location of the NVDA navigator object and the currently-focused element. Seeing where the screen reader’s current focus is at is also helpful for you when you’re performing testing, especially if you’re recording your screen for an educational video, for example. ^^ <h4 id="enable-nvda-speech-viewer" tabindex="-1">Enable NVDA speech viewer</h4> Another helpful feature you can enable is the NVDA Speech Viewer log window. Click the NVDA icon in your taskbar (on the bottom right of your screen by default), and go to NVDA > Tools and enable Speech Viewer. You also have the option to open the speech viewer log window by default on NVDA startup. <figure class="wide"><img src="https://www.sarasoueidan.com/assets/images/article--a11y-testing-env/nvda-speech-viewer.png" alt="Screenshot of the NVDA taskbar menu, with the speech viewer option enabled in the submenu." /></figure> The speech viewer log window contains the text that NVDA speaks, which can be helpful when you’re just getting started with screen reader testing. Just keep in mind that its usefulness of sometimes limited because <a href="https://adrianroselli.com/2020/08/speech-viewer-logs-of-lies.html">the log often does not fully represent what is announced</a>. <h4 id="setup-keyboard-layout-for-testing-with-nvda-on-a-mac" tabindex="-1">Setup keyboard layout for testing with NVDA on a Mac</h4> If you’re on a Mac, go to NVDA > Preferences > Settings > Keyboard and Choose “Laptop” Keyboard layout instead of the default Desktop option. The desktop layout relies on many keys which do not exist on some Mac keyboards. You can also set this preference in NVDA’s start popup menu. <figure class="wide"><img src="https://www.sarasoueidan.com/assets/images/article--a11y-testing-env/nvda-keyboard-layout.png" alt="Screenshot of the NVDA settings pane." /></figure> <aside role="note">If you're using JAWS, there is a similar option in the JAWS startup wizard to choose the Laptop keyboard layout instead of the default Desktop layout.</aside>  <h3 id="map-the-insert-key-to-another-key-on-mac" tabindex="-1">Map the Insert key to another key on Mac</h3> The <kbd>insert</kbd> key is the default modifier key used by most screen readers on Windows. If you don’t own an external keyboard that has an <kbd>insert</kbd> key, you might need to use a software work-around to make up for the lack of the <kbd>insert</kbd> key on your keyboard. NVDA settings include an option to set the <kbd>caps lock</kbd> key as the NVDA modifier key. You can do that if you prefer. I personally prefer to not do that because it interferes with typing when the <kbd>caps lock</kbd> is On. Alternatively, you can use a software program to map one of your less-used keyboard keys to the missing <kbd>insert</kbd> key. I use <a href="https://karabiner-elements.pqrs.org/">Karabiner Elements</a>. <h4 id="setting-up-karabiner-elements-on-macos" tabindex="-1">Setting up Karabiner Elements on macOS</h4> Karabiner is a free app. To use it: <ol> <li>Download the app from <a href="https://karabiner-elements.pqrs.org/">the Karabiner Elements Website</a>. You want to download it on your Mac, not in your virtual machine.</li> <li>Run through the setup, and make sure to enable access in your System Preferences settings if it is blocked by macOS (which it probably will be by default).</li> <li>Once it is installed and your keyboard is recognized, go to Simple Modifications.</li> <li>Choose the device(s) you want to create a mapping for, and then click Add Item to map an unused key to the insert key.</li> </ol> In my Karabiner, I mapped the right <kbd>option</kbd> key to the Windows <kbd>insert</kbd> key. And I also mapped the right <kbd>cmd</kbd> key to the <kbd>print screen</kbd> key, which can be used in combination with other keys to quickly turn Windows High Contrast mode On and Off (which is a shortcut that will come in handy in another chapter). <figure class="wide"><img src="https://www.sarasoueidan.com/assets/images/article--a11y-testing-env/karabiner.png" alt="Screenshot of Karabiner’s Simple Modifications panel. In my panel, I have mapped the rightcommand key to printscreen and the rightoption key to insert for all devices." /></figure> That’s it. Now if you open your VM and fire up a screen reader, you can use the right <kbd>option</kbd> key (or the key of your choice) as a modifier key in place of the <kbd>insert</kbd> key. <h2 id="virtual-accessibility-testing-in-your-browser" tabindex="-1">Virtual accessibility testing in your browser</h2> If you’re on macOS and you have no access to a Windows machine, you can test your work with Windows screen readers using any modern browser instead. You can do that using a service called <a href="https://assistivlabs.com/">AssistivLabs</a>. AssistivLabs is to screen reader testing what BrowserStack is to cross-browser testing. It remotely connects you to real assistive technologies (like NVDA, JAWS, and Windows High Contrast Mode) using any modern web browser. AssitivLabs currently only offers testing with Windows screen readers and assistive technologies (like Windows High Contrast Mode and Windows Magnifier) for most accounts; testing using macOS assistive technologies will be available in the future. AssitivLabs is a paid service — it’s not available for free by default. But it is very helpful for when and if getting access to a Windows machine is otherwise not possible. <aside role="note"> Note that <a href="https://practical-accessibility.today/">Practical Accessibility course</a> enrollees will get a 6-months unlimited free trial to Assistivlabs. 🎁 </aside> <h2 id="enable-keyboard-accessibility-on-a-mac" tabindex="-1">Enable keyboard accessibility on a Mac</h2> To complement your screen reader, you should enable keyboard accessibility on your Mac. Keyboard accessibility is not enabled by default on macOS. If you’ve ever tried to tab your way through interactive and focusable elements on webpages and couldn’t, that’s why. (Frustrating, I know.) You need to manually enable keyboard accessibility on macOS by going to System Preferences > Keyboard, and enabling the “Use keyboard navigation to move focus between controls” option in the Shortcuts tab. <figure class="wide"> <img src="https://www.sarasoueidan.com/assets/images/article--a11y-testing-env/macos-keyboard-settings.png" alt="Screenshot of the Keyboard preferences pane in macOS System Preferences." /></figure> On macOS 13+, you’ll go to System Preferences > Keyboard, and then enable the Keyboard Navigation (Use keyboard navigation to move focus between controls. Press the Tab key to move focus forwards and Shift Tab to move focus backwards) option. <figure class="wide"> <img src="https://www.sarasoueidan.com/assets/images/article--a11y-testing-env/macos-13-keyboard-a11y.png" alt="Screenshot of the Keyboard preferences pane in macOS 13 System Preferences." /></figure> Once you’ve enabled system-wide keyboard accessibility, you want to also enable keyboard tabbing in Safari. In Safari, go to Preferences > Advanced. And enable the “Press tab to highlight each item on a webpage” option. <figure class="wide"> <img src="https://www.sarasoueidan.com/assets/images/article--a11y-testing-env/safari-keyboard-settings.png" alt="Screenshot of the Safari General Preferences pane." /></figure> Now you can tab your way through webpages as you should. <aside role="note">If you're on an older version of macOS or you want to enable these settings in Firefox and Chrome, I've added a couple of resources to help you do that in the recommended resources section at the end of the chapter.</aside> <h2 id="which-browser-and-screen-reader-pairings-should-you-test-on%3F" tabindex="-1">Which browser and screen reader pairings should you test on?</h2> Screen readers work best when they are paired with the browsers they are the most compatible with. When performing testing, you can catch most accessibility issues (sometimes even all of them) by pairing each screen reader with the browser it is most commonly used with. <h3 id="on-macos" tabindex="-1">On macOS</h3> VoiceOver works best with (and should, therefore, be paired with) Safari. If you use VoiceOver with Chrome or Firefox, for example, you might get unexpected results because VoiceOver is optimized to work with Safari not with other browsers. <h3 id="on-windows" tabindex="-1">On Windows</h3> Narrator works best with Edge, and has difficulty interfacing with other browsers. But Narrator isn’t most users’ first choice. JAWS — the most popular of all screen readers on Windows — works best with Chrome and Firefox. When perfoming testing, pair it with Chrome. NVDA works best and is commonly paired with Firefox. <h3 id="mobile-screen-readers" tabindex="-1">Mobile screen readers</h3> Throughout this course, we will focus mainly on desktop screen reader testing. But you should test your work using mobile screen readers as well. In <a href="https://webaim.org/projects/screenreadersurvey9/">WebAIM’s ninth screen reader user survey</a>, 90% of respondents reported using a screen reader on a mobile device. According to WebAIM, this number has increased over the last 12 years. WebAIM also notes that participants with disabilities (91.6%) are more likely to use a mobile screen reader compared to individuals surveyed without disabilities (71.4%). So it is very important that you test your work on mobile to ensure that it works for a large group of screen reader users. VoiceOver on iOS/iPadOS is the most popular mobile screen reader. VoiceOver comes bundled with iOS/iPadOS. Like its desktop version, you want to use it in conjunction with mobile Safari. On Android, Talkback (the built-in screen reader) is best paired with Chrome. <h2 id="guides-to-browsing-and-navigating-content-with-a-screen-reader" tabindex="-1">Guides to browsing and navigating content with a screen reader</h2> Make some time to learn how to navigate and browse web content with each screen reader. It might take some time and feel like a steep learning curve at first, but by doing that you will gain an invaluable skill for your accessibility work. Here is a list of official user guides that are helpful for getting started: <ul> <li><a href="https://www.nvaccess.org/files/nvda/documentation/userGuide.html">NVDA User guide</a>. Most read-only webpages are browsed in NVDA using <a href="https://www.nvaccess.org/files/nvda/documentation/userGuide.html?#BrowseMode">Browse mode</a>.</li> <li><a href="https://www.freedomscientific.com/Products/software/JAWS/">JAWS documentation</a> (<a href="https://www.freedomscientific.com/training/jaws/hotkeys/#wb">Shortcut to JAWS Hotkeys</a>)</li> <li><a href="https://support.microsoft.com/en-us/windows/complete-guide-to-narrator-e4397a0d-ef4f-b386-d8ae-c172f109bdb1">Complete guide to Narrator</a> (<a href="https://support.microsoft.com/en-us/windows/appendix-b-narrator-keyboard-commands-and-touch-gestures-8bdab3f4-b3e9-4554-7f28-8b15bd37410a#WindowsVersion=Windows11">Shortcut to Narrator keyboard commands and touch gestures</a>)</li> <li><a href="https://help.apple.com/iphone/11/#/iph3e2e415f">VoiceOver Guide</a> <ul> <li><a href="https://support.apple.com/en-lb/guide/voiceover/vo27974/10/mac/13.0">Use VoiceOver to browse webpages on Mac</a></li> <li><a href="https://help.apple.com/voiceover/command-charts/">Apple VoiceOver Command charts</a></li> </ul> </li> <li><a href="https://support.google.com/accessibility/android/topic/10601774?hl=en&ref_topic=3529932">Talkback user guides</a></li> <li><a href="https://support.apple.com/en-lb/guide/iphone/iph3e2e415f/16.0/ios/16.0">Turn on and practice VoiceOver on iPhone</a></li> </ul> And to get a high-level (yet practical) overview of how someone using a screen reader browses the Web, I recommend watching the Browsing with assistive technologies video series by Tetralogical: <ul> <li><a href="https://tetralogical.com/blog/2021/09/29/browsing-with-a-desktop-screen-reader/">Browsing with a desktop screen reader</a></li> <li><a href="https://tetralogical.com/blog/2021/10/05/browsing-with-a-mobile-screen-reader/">Browsing with a mobile screen reader</a></li> </ul> <h2 id="screen-reader-keyboard-shortcut-cheatsheets" tabindex="-1">Screen reader keyboard shortcut cheatsheets</h2> When you’re just getting started with screen reader testing, and you want to test with at least three screen readers across different platforms and devices, it can be difficult to remember all the keyboard shortcuts for each screen reader right away. <a href="https://dequeuniversity.com/screenreaders/">Deque University</a> provides useful screen reader keyboard shortcuts and gestures cheatsheets, that you can either reference on your computer, or print out and have them handy during your testing. <ul> <li><a href="https://dequeuniversity.com/screenreaders/survival-guide">Desktop Screen Readers Survival Guide - Basic Keyboard Shortcuts</a></li> <li><a href="https://dequeuniversity.com/screenreaders/forms-guide">Desktop Screen Readers Forms Guide</a></li> <li><a href="https://dequeuniversity.com/screenreaders/nvda-keyboard-shortcuts">NVDA keyboard shortcuts</a></li> <li><a href="https://dequeuniversity.com/screenreaders/jaws-keyboard-shortcuts">JAWS keyboard shortcuts</a></li> <li><a href="https://dequeuniversity.com/screenreaders/narrator-keyboard-shortcuts">Narrator keyboard shortcuts</a></li> <li><a href="https://dequeuniversity.com/screenreaders/voiceover-keyboard-shortcuts">VoiceOver keyboard shortcuts</a></li> </ul> <h2 id="resources-and-recommended-reading" tabindex="-1">Resources and recommended reading</h2> <ul> <li><a href="https://karlgroves.com/efficiency-in-accessibility-testing-or-why-usability-testing-should-be-last/">Efficiency in Accessibility Testing or, Why Usability Testing Should be Last</a></li> <li><a href="https://marcus.io/blog/checking-whcm-on-mac">Checking Windows High Contrast mode on a Mac for free</a> (inculdes instructions to download and set-up VirtualBox)</li> <li><a href="https://dequeuniversity.com/mac/windows-screen-readers">Using Windows Screen Readers on a Mac</a></li> <li><a href="https://webaim.org/projects/screenreadersurvey9/">The WebAIM screen reader user survey</a></li> <li><a href="https://www.scottohara.me/blog/2014/10/03/link-tabbing-firefox-osx.html">No, tabbing is not broken. Yes, I was confused too.</a></li> <li><a href="https://www.a11yproject.com/posts/macos-browser-keyboard-navigation/">Browser keyboard navigation in macOS</a></li> <li><a href="https://www.smashingmagazine.com/2018/09/importance-manual-accessibility-testing/">The Importance Of Manual Accessibility Testing</a></li> <li><a href="https://adrianroselli.com/2022/11/your-accessibility-claims-are-wrong-unless.html">Your Accessibility Claims Are Wrong, Unless…</a></li> <li><a href="https://www.accessibility-developer-guide.com/knowledge/screen-readers/relevant-combinations/">Relevant combinations of screen readers and browsers</a></li> </ul> <aside role="note"> Hat tip and thanks to <a href="https://www.sarasoueidan.com/blog/testing-environment-setup/adrianroselli.com/">Adrian Roselli</a> for pointing out that the <a href="https://addons.nvda-project.org/addons/focusHighlight.en.html">Focus Highlight</a> NVDA add-on is no longer necessary since focus highlighting has been built into NVDA 2019.  And thank you to <a href="https://twitter.com/viki53?s=21&t=UArpY22DI5MPDonW7LSFmA">Corentin H.</a> for providing the screenshot of keyboard accessibility preferences on macOS 13. </aside>