Member-only story
Designing for accessibility by using Apple VoiceOver
I’ve been working on accessibility quite a lot recently. I’ve been following the usual advices given by the community, having a good contrast ratio, making sure we use semantic HTML, picking color blind friendly colors, using aria-label’s where appropriate and verifying that the tab order of items are logical. These are all very important aspects and there are many more that I didn’t name here.
And to test what I designed, I was using some tools that would allow me to evaluate these things. For example, I would use an external tool to tell me if there are any contrast issues, or I would use another app to simulate how the product looks like for the people with different types of color blindness etc.
Yet, to test how the tab order works and how the product would be used by visually impaired users, I would simply press tab key couple of times and make sure it doesn’t jump around meaninglessly.
Oh boy was I wrong. This test comes nowhere near what a visually impaired user would experience with any product.
Using Apple VoiceOver for the first time
In order to understand how a visually impaired person uses the internet and to learn what I can improve in my designs to make their experience better, I decided to do a little accessibility test on my own website and this time I wanted to do it properly and use Apple VoiceOver just like a real user would.
So, for those that haven’t heard of the Apple VoiceOver, it is the built in screen reader for macOS. Unless you changed some settings to disable the shortcut, by default it is enabled simply by pressing the key combination Cmd + F5, you can even try it right now if you are on a Mac. VoiceOver comes with a very nice tutorial to teach you the basics and afterwards you are off to the wild to explore on your own.
By the way, if you want to try something similar on a Windows machine, check out NV Access.
Low hanging fruits
Once I was done with the basic tutorial, I went back to my website and started navigating the page with my newly acquired skillset.
