A11Y 101: How to use a screenreader

When it comes to accessibility, one of the most tricky but highly used tools is a screenreader.

Screen readers are tools that can be used by visually impaired people. It could be people who are blind or need assistance in navigating a website.

You might wonder, but how many people actually use these screenreaders? In the USA, around 1:30, people over 40 actually use them!

What is a screenreader

A screenreader is basically a tool that helps you navigate and view a website by speaking out about what it sees.

Because of how screen readers work, it's essential to try and make this experience spot on.

The readers typically start by reading links and focus highly on following semantic HTML structure, so make sure this is set up correctly.

We'll dive a bit deeper into fixing elements for a screenreader specific.

There are quite a few choices for screenreaders. I'll be looking at the three most common ones.

MacOSX VoiceOver

You might have accidentally opened this on a Mac, and the computer started speaking to you.

VoiceOver is not just a web screenreader but can help you navigate your computer in total.

To open VoiceOver on your Mac, you should type Command + F5 or press the Touch ID three times if you have the Touch Bar Mac.

Your Mac will now announce it's active.

Once it's turned on, the default modifier key is control + option, often referenced as the VO key to make things easier.

Let's look at some everyday things we can do now:

tab: Next link or form control
VO+command+L: Next link
VO+command+H: Next heading
VO+command+G: Next graphic
VO+space: Activate link or form control
VO+A: Start reading
control: Stop reading
VO+->: Read the next item
VO+<-: Read the previous item
VO+P: Read paragraph
VO+'S`: Read sentence

There are many more things we can do. See the VoiceOver option chart on the Apple docs.

From my own experience, you definitely need to get used to it, and at first, it's tough to find how it exactly works and where it starts to read.

You might even find it doesn't read some aspects on your website or skips over them. (More on this in the evaluation tool article coming up)

Windows NVDA

NVDA is a free screenreader for people on Windows laptops. It works pretty much in the same way as VoiceOver but has some different commands that can be used.

By default, the NVDA key is the Insert key and we'll refer to it as the NVDA key.

To turn NVDA on, use Control+Alt+N. To turn it off use: NVDA+Q

tab: Next link or form control
K: Next link
H: Next heading
G: Next graphic
space: Activate link or form control
VO+↓‌: Start reading
control: Stop reading
VO+->: Read next item
VO+<-: Read previous item
VO+↑: Read sentence

WebAIM has a great list of the most common commands for web navigation with NVDA.

ChromeVox for Chrome

If you are in between or only want one for Google Chrome, try and use ChromeVox. It's a free plugin that works really well.

Download Google Chrome ChromeVox

To turn it on or off, use Ctrl+Alt+z.

As with most screenreaders, the navigation is pretty much the same, but this one even comes with swipe gestures for tablet users!

The default ChromeVox command is Ctrl+Cmd, also known as CV

tab: Next link or form control
CV+L+L: Next link
CV+L+H: Next heading
Enter: Activate the link or form control
VO+↓‌: Start reading
control: Stop reading
VO+->: Read the next item
VO+<-: Read the previous item

There are quite a few commands, and the easiest way to check all of them is to open the ChromeVox settings page.

Conclusion

I would really urge you all to at least try out one of these screenreaders and find out how easy it is to navigate your own website by using one of them.

Can you identify any hiccups that might need to be addressed?

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

A11Y 101: How to use a screenreader

Comments

A11Y 101

A11Y 101: Evaluation tools

More from this blog

I wrote 1000 articles, what’s next?

Vendure community and more

Deploying Vendure

Vendure - Overwriting email templates

Customizing vendure

What is a screenreader

MacOSX VoiceOver

Windows NVDA

ChromeVox for Chrome

Conclusion

Thank you for reading, and let's connect!

Command Palette

Comments

A11Y 101

A11Y 101: Evaluation tools

More from this blog

What is a screenreader

MacOSX VoiceOver

Windows NVDA

ChromeVox for Chrome

Conclusion

Thank you for reading, and let's connect!