How to test accessibility technologies in a website

Question

Short background / Context

I'm a frontend dev newbie and would like to test that whether the accessibility of my and others' websites is good. So I am trying to find a screen reader for firefox or for ubuntu (linux) where I can hear the content read aloud by the program.

I've installed orca on Lubuntu though I couldn't yet set it up to read the websites aloud. I've also read and read through various websites but am still a bit confused.

Examples of these websites are wikipedia articles on screen reader, Vinux (a linux distro specially designed for these purposes). Also tried VoiceOver on an Iphone, which seems a very good feature (found on iphones accessibility settings).

---

Question

Any software I could install either on the browser or linux, or better any cross plattform / cross browser tool for reading websites aloud? Or approaches you may recommend to start getting into it?

I don't expect an all-throughout explanation but at least some guidelines.

Answer 1

You already have VoiceOver so all you need is to learn the controls.

As you are starting out a 'standard' screen reader is NVDA, which is free. Now I have never used on a Linux distro but I hope that this guide makes sense to you and will allow you to run it (as it Windows based).

NVDA works at the computer level so it works with all Browsers (although it works best with FireFox).

Same story with VoiceOver but it works best with Safari.

Finally there is JAWs (and not sure if runs on Linux) but that is expensive while you are starting out and is comparable to NVDA.

Here are the commands for NVDA

Here are the commands for VoiceOver for Mac

Here are the commands for an iOS touch screen device

Then once you have the control references just search Google for 'getting started with a screen reader' and you will find loads of videos.

Learn the controls and then put a piece of paper over the screen / switch the screen off and try to navigate around a website. When you get lost, remove the paper and work out where you are.

When starting out (NVDA) use the number 1-6 to navigate through heading levels as that is the 'noob' way of understanding page layouts (and you will then immediately realise one of the problems is front end devs who use classes to visually style a paragraph to look like a heading and your accessibility journey will start! hehe), then progress to regions on the page.

Also I would look at getting an automated testing extension installed in your browser while you are starting out, this way you can try the screen reader and see what an error sounds like / how it affects the end user and then identify the errors using the tool.

I use Chrome for my testing so Wave, Accessibility Insights, Axe, OpenWax are all great extensions to try.

Finally refer to the WCAG 2.1 Guidelines once you have understood how a screen reader interacts with a page (they are heavy reading I am afraid).

Good luck, I answer loads of questions on Stack Overflow under the 'accessibility' tag so once you have got used to a screen reader and run into 'coding problems' ask away there and I will help any way I can.

The 'accessibility' tag is also a great place to learn just by reading questions and answers.