Everyone that works with development of web pages has to deal with universal design. Accessibility should be considered from the start and it is therefore smart to test with a screen reader during the development. It is often more costly to make an existing project accessible, rather than just doing it right the first time. This fall I have tried to learn how to use VoiceOver on Mac. I want to share with you the most essential parts I have learned and I hope this introduction will help you get started with VoiceOver.
Testing your web application with a screen reader is something every development team should do to make websites for everyone. There are many automated tools that can help you on the way to an accessible website, but there will always be cases that are best captured when testing the website with a screen reader. There are several screen readers available, and unfortunately, they all behave a bit differently for end-users. In this article, I will only address VoiceOver on macOS, but testing the solution now and then with other screen readers is also recommended.
First things first, you need to know how to turn VoiceOver off. The shortcut Command + F5 is important to remember since you don't want to be trapped in VoiceOver mode. The same shortcut is used to turn it on. If you prefer you could also triple-click on the Touch-ID to open accessibility shortcuts.
Next, the VoiceOver activation keys (VO) are by default control + option. VO are used in combination with other keys to access the VoiceOver commands and gestures. The most basic commands are:
- Navigate to the next element —
VO + → - Navigate to the previous element —
VO + ← - Navigate to the next interactive element -
tab - Simulate a click —
VO + space - Pause the screen reader —
ctrl - Interact with an element (this is also used to navigate into the website) —
VO + shift + ↓
Try it yourself on Wikipedia's article about Christmas. When you feel you manage to navigate the article we are ready to introduce the rotor. The rotor allows you to get a quick overview of the webpage. It presents all items of a particular type in a list. To open the rotor menu you press VO + U. You can navigate through different types of elements with the left and right arrows. If you open the Wikipedia article again, find the Headings menu and try to navigate through the different headings with the up and down arrows. Using the rotor can help you determine if the website uses the correct semantic HTML mark-up.
With the commands above you should be prepared enough for testing your website. Putting yourself in the shoes of your users is a good exercise. And, if you really want to test your VoiceOver-skills you can turn the screen black with VO + shift + F11. Good luck!