Setting Up and Using Screen Readers

Creating a good user experience requires us to think carefully about the diverse needs and devices of our users. We as designers and developers know that not everyone sees, hears, or reads content in the same way.

A screen reader is an assistive technology that is used by individuals who are blind, visually impaired, or need additional assistance navigating a website. This article will guide you through how to set up and use a screen reader in order to assess the web accessibility of various websites, including your own.

More users than you might expect are using some kind of assistive device. According to the National Institute of Health, about 1 in 30 Americans over the age of 40 will experience visual impairment. Producing accessible websites is both equitable and good for business.

The screen reader provides a text-to-speech (TTS) experience for the user to translate the information on the screen into speech, which can be heard through speakers, headphones or braille. This is why it’s extremely important to utilize semantic HTML code and appropriate WAI-ARIA attributes.

A visually impaired user will use a combination of screen reader commands and operating system commands to accomplish the many tasks a computer is capable of performing. These commands are prompted through keyboard shortcuts or mouse actions, like scrolling and clicking.

Although basic screen readers will not help blind users navigate a computer, screen readers with additional features can give individuals with visual impairments much more independence.

Screen readers can vary based on the operating system you are using. However, they can also be implemented through the browser. Please note that when using a browser’s screen reader, it’s best to turn off the operating system’s screen reader.

Screen Reader Options

Here are a few screen reader options that are free for your computer or browser.

(OS X) VoiceOver

Apple computers come with a screen reader built in, called VoiceOver. You can access it easily by pressing Command-F5. If VoiceOver is on, pressing Command-F5 turns it off.

If this is your first time opening VoiceOver, you can listen to the Quick Start Tutorial, which will give you an interactive tour of VoiceOver navigation and interaction basics.

The benefit to VoiceOver is that it is already installed and ready to use on your Apple computer and also works with websites.

(Windows) NVDA

NVDA (NonVisual Desktop Access) is a free screen reader for Windows, which allows blind and vision-impaired people to use computers. It reads the text on the screen in a computerized voice.

The user can easily control what is read to them by moving the cursor to the relevant area of text with a mouse or using the arrows on the keyboard. NVDA provides the key to education and employment for many blind people. It also provides access to social networking, online shopping, banking, and news. NVDA can also convert the text into braille if the computer user owns a device called a “braille display”. NVDA can be installed on your Windows machine or used on a USB stick. This screen reader is unique because it’s an open source program, which means developers can contribute to improving this software.

(Google Chrome) ChromeVox

ChromeVox is built using only web technologies like HTML5, CSS, and Javascript. ChromeVox (Classic) was designed from the start to enable unprecedented access to modern web apps, including those that utilize W3C ARIA (Access to Rich Internet Applications) to provide a rich, desktop-like experience.

This enables visually impaired users to experience the power of web applications while also giving developers a way to verify the accessibility of their web applications.

ChromeVox can be easily added to your Chrome browser as an extension through the Chrome Web Store. Once installed, you can use these keyboard shortcuts. If you want to change the keyboard shortcuts, just click the browser extension icon, then click “options”.

Testing Accessibility

Now, let’s test one of them out.

Choose one of the screen readers listed above that fits your operating system or browser to test websites such as NY Times, Facebook, GitHub, and Dribbble. Getting the full experience through the screen reader will help you understand how it’s used and the difficulties the visually impaired experience when a website lacks accessibility.

Be sure to mouse and click around or use your keyboard to have the screen reader focus on specific areas.

Starting with the New York Times and moving down the list, let’s check out the screen reader experience.

New York Times

• Click on the main section of the page
• Tab through and notice the focus is on the headlines and the comments
• Hit enter when you land on comments
• Tab through this experience

Was it easy to read the comments on the article or were you prompted to read about the article first? How could this experience be improved?

Facebook

• Tab through the content to get to the main section of the page
• On your keyboard click “Alt + /”
• Tab through the “jump to” menu to get to the news feed

GitHub

GitHub is a development platform that provides tools for people to share their code with others, make edits to shared projects, and keep track of all versions and changes.

• Click on a repository to go to it’s landing page.
• If there isn’t a repository you want to explore, try looking at Express, a common JavaScript framework that we teach at Codecademy
• Tab through until you reach the section that tells you how many commits, branches, releases and contributors the repository contains
• Notice how these are considered “list items”
• Tab once more until you can see the list of languages used
• Notice how this is considered an ordered list and lists each tab by number

What did you think about this experience? Did it lack any critical information? Is there anything you think GitHub needs to consider or improve?

Dribbble

Dribble is a design-focused social network that allows designers to share their own work and explore the work of others.

• On the landing page tab through until you reach the first item
• Notice how the screen reader reads the numbers without the description of what the number correlates to
• On the top right under the black navigation bar, choose a different display layout
• Allow the screen reader to read through the posts in the different layouts

What did you think about the experience when you changed the layout? Was it easier to follow along on a larger layout vs. another?

Your Own Website

If you have ever made your own website, maybe for a course on Codecademy, or for your personal portfolio, try visiting it with a screen reader now. What is or is not possible for users visiting your site using a screen reader?

Conclusion

Of the websites that you visited, which one was easier or more accessible to visit? What issues did you face that you think would get better with more practice using a screen reader, and what issues were problems with the designs of the sites that you visited?

After considering which one was easier, check out this accessibility guide from Facebook to read about how to get the most out of Facebook as a user with disabilities. You can also look at the Facebook Accessibility page to get news and updates from the Facebook Accessibility team.

As you can see, it can be somewhat challenging to use a screen reader. That’s why it’s our job as designers to make the web an accessible place for everyone. Next time you design a website, keep these tests and your experience in mind.