In this “Getting Started” portion of the guide, we’ll be getting your computer set up for accessibility testing.
Small confession – it’s been about a decade since I’ve used a non-Mac computer. So while I would love to help people get their computer set up for accessibility testing on other devices, I’m going to have to trust that someone else can do a much better job than I can. If you have a guide to setting up other types of devices, please send it my way I would love to link to your guide.
1 – Enable System-Wide Keyboard Accessibility
System Preferences > Keyboard > Shortcuts > Full Keyboard Access > All controls
2 – Enable VoiceOver
*Note – this will automatically start every time you boot up your computer.
I recommend going through the VoiceOver training (Click on “Open VoiceOver Training” on the VoiceOver settings page), it will take you about 45 minutes to complete, but it gives unparalleled insights into how devices work for your non-sighted users. If you don’t have time now make a note to go back later (I recommend adding it to your calendar with a due date). Understanding your users is at the core of all UX design, and this is a powerful way to understand your users with accessibility needs. Even though I’m not going to walk you through the other accessibility features such as Speach, or Description, be sure to try them out for yourself so you can understand how to design for them.
System Preferences > Accessibility > VoiceOver > Enable VoiceOver
To stop VoiceOver, simply click the ‘X’ in the corner of the VoiceOver box.
To turn VoiceOver on again use the keys CMD(⌘)+FN+F5 (Or CMD(⌘)+F5 on Macs without the Touch Bar).
If the VoiceOver speech is too fast, go to: System preference > Accessibility > Speech – Change the speed here. I usually set mine at normal, or just below normal depending on the type of auditing I’m doing.
(Note: This is a great feature to know where it is – if you’re ever doing usability testing with non-sighted users, you will probably have to ask them to slow down the text to speech feature so you can follow along with them.)
Setting up your Browsers
Each screen reader has a recommended browser pairing. For VoiceOver on Mac, you should use Safari. In order to use your keyboard to navigate Safari, you’ll need to change the browser settings.
Open Safari > Preferences > Advanced > Press Tab to highlight each item on a webpage
I recommend doing your screen reader testing in Safari, but I recommend using Chrome to check your websites before you test them with a screen reader. Many of the developers I’ve worked with use Chrome DevTools, or Arc Toolkit to check accessibility- but in my experience, they are pretty developer-focused. My favorite plugin for testing developed designs is axe by Deque labs.
axe currently has a pretty incredible FREE beta going on that helps guide you through accessibility auditing. Once you download the plugin, inspect the webpage you want to check (the same way you would inspect code on a page). And then go to the inspect panel – and find the axe pane.
If you haven’t used the code inspect tool on Chrome before:
- Right-click on the page you want to inspect
- Click ‘inspect’
- You can change where the inspect panel shows up by clicking the kabab menu in the upper right corner, (I prefer to have my inspect panel side by side if I’m using a larger screen).
- To open axe, click on the >> to view more options and then select axe.
- I’ll go through how I use axe in a future tutorial, but for now, I recommend just trying it out and seeing what you can understand from a quick tour of the tool.