Digital Accessibility is not just about making your website working on a screen reader. But the best way to have a good understanding of how Blind users experience heading structure, writing image descriptions and forms is by using a Screen Reader yourself.

Screen reader test is not something to wait until QA. Designers, Writers and Developers should also use them. This way everyone becomes better equipped at making inclusive decisions at every step of Digital production.

There is no excuse anymore. Gone are the days when screenreaders were hard to get and expensive. Now, they come factory-installed on Apple Mac and Windows devices. As a result, anyone with a computer or mobile can use a screenreader.

Before trying a screen reader, you must learn how to navigate a webpage by only using your keyboard. Did you know that the first keyboards we use today have the keys arranged in the same way as the original typewriters? Did you know that the first typewriters were created for Blind people? That’s the reason why there are raised bumps over the “F” and “J” keys. They are guides to where to place the indicators of each hand, so that fingers can easily reach all the other keys without looking at them.

Photo by Nhu Nguyen on Unsplash

You don’t need to know many commands to use the keyboard instead of a mouse. All you need is to use a few keys to start:

1. Go to any news website
2. Forget about your mouse or mouse track and use the tab key to navigate through links. As you press your tab key, you might see an outline around navigation items and links. This is the Focus Indicator. It helps people who don’t need a screen reader, but are using only the keyboard or another type of assistive technology to know what links and buttons are active.

1. If you want to move back, press the Tab Key and Shift key at the same time.
2. If you want to activate a link, use the Enter key.
3. If you want to activate a button, use either the Enter key or the Space bar.

Now you might be asking, “What’s the difference between a button or a link?”. They might all look the same to you, but they have different functions. Links perform actions that don’t affect the page at all. They are used for navigation and often take you to another page. Buttons perform actions that change a web page, such as submitting a form, doing calculations or bringing search results. Visual users will often click the mouse to activate a link or button without giving any second thought. But Blind users with a screenreader will listen to an announcement telling them if they are interacting with a link or a button. They will then hit either the enter key or space bar, depending on what is announced.

Attention Developers: Always use Semantic Markup for links (<a>) and Buttons (<button>). Avoid using “role=button” for divs or the worst nightmare of all: ‘links with role=button’. Never do that.

You can use the arrow keys to move up and down the page, left or right. In addition to activating buttons with the Enter key, you can also expand accordions, drop-downs and submenus.

Now that you had a go at using only the keyboard to navigate a web page, it is time to start using a screenreader.

Windows Users:

Narrator comes installed with your Windows machine. To start Narrator, go to a webpage and press Windows logo key + Ctrl + Enter on your keyboard. Narrator will start reading the contents aloud to you, as you navigate through item by item with the tab key.

To stop Narrator use the same command again (Windows logo key + Ctrl + Enter).

On a Windows machine, you also have the option to download and install NVDA, which is a free screen reader. Once installed, NVDA can be started by pressing Control + Alt + N and stopped by pressing Insert + Q.

Apple Mac Users:

On a Mac you can easily switch VoiceOver on by using Siri. Just give the following Voice command: “Hey Siri, turn VoiceOver on”. You can turn it off in the same way: “Hey Siri, turn VoiceOver off”.

Using a screen reader should become second nature

Now that you know how to switch a screen reader on and off and the basics of keyboard navigation, there is no reason not to implement these techniques as part of your content and development testing.

Pay attention to how the screen reader announces links. Would they make sense to you if you had your eyes closed? Can you understand the page’s structure when headings are read aloud to you as Heading level 1, Heading level 2, etc.? Do they follow a hierarchical order or do they jump in a confusing way? Is marketing blurb or entire paragraphs being announced as headings, instead of emphasis? Are there any unnecessarily described images and other images with the whole convoluted file name read aloud? Are form labels read correctly or are they missing? Are you unable to operate the navigation, drop-downs and complete form by using only the keyboard and listening to the screen reader?

Accessibility is a requirement for ‘done’. If your feature can’t be operated by the keyboard and/or is not announced by a screen reader then it is not ‘done’.

The UX Collective donates US$1 for each article we publish. This story contributed to World-Class Designer School: a college-level, tuition-free design school focused on preparing young and talented African designers for the local and international digital product market. Build the design community you believe in.