Front-End Development for Screen Readers: A Five-Second Jumpstart (macOS)

Think back to the last time you finished work on an interface.

Maybe it was a small feature addition, or an entirely new application. In its completed form, the UI looked just like it should. The functionality was up to spec. If you're the kind of person who gets attached to your work, maybe it even seemed to sparkle around the edges. ✨

While working on it, maybe you had some concerns about accessibility. But if no one had mentioned it as a deliverable, is it your responsibility to make sure that UI is useable by everybody? If you're a front-end developer, designer, QA engineer, or otherwise involved in creating interfaces for people, there's a fine collection of articles on the internet that could do better than me to convince you: accessibility is your responsibility, too.

Accessibility can be a daunting field. There is a wide variety of disabilities, and no user is the same. Following best practices and using automated tools will get you a long way, but stepping into the shoes of your users, experiencing websites the way they do, will give you perspective and knowledge that can only be gained firsthand.

One tool used by millions of blind or visually impaired people, shaping how they experience the web, is the screen reader. Trying out a screen reader yourself can be intimidating, seemingly requiring specialized knowledge and a large time investment. But in fact, they are surprisingly approachable once you know a couple shortcuts. I'll show you how to use one for your work, starting today, in five seconds. Is five seconds quicker than you expected? Well, macOS and Windows both come with screen readers built in and ready to use, so trying out your website or web app with a screen reader is actually just a keyboard shortcut away. Learn just one or two more shortcuts, and you're ready to evaluate and solve a huge variety of essential accessibility problems that might come up in your UI.

Screen reader demo

Ready to see it once before you try it yourself?

A couple things to note in that video:

1. We found our first accessibility bug!
2. It only took us five seconds to do!

Starting from the first point, the bug—did you notice how the buttons, a "download from the cloud" button and a "trash can" button, make their purpose pretty clear to sighted users, but to a screen reader user, all they hear upon highlighting each button is the word "button"? Considering that one button is meant to preserve data and the other to erase it from existence, getting the two mixed up could be catastrophic. That's an experience no developer would want to inflict on a user, and so it's great we caught this one and can now fix it. Perhaps you can even think about areas in your own recent work where such pitfalls might be lurking.

Next, the speed! Bet you didn't know you had a screen reader so close at hand this whole time. Here are the only two shortcuts used in the video: ||Command + F5|| (Touch Bar users or those using the function key row as volume-changing shortcuts, etc., may need to additionally press and hold ||Fn|| to use ||F5||), to activate VoiceOver; and ||Control + Option + Right (or Left) Arrow||, to navigate from one item to the next. Note that instead of following a two-dimensional control scheme including directions of up and down, screen reader navigation treats the different parts of the page as a one-dimensional sequence of items, just like when you're tabbing through inputs and buttons on a website. If you're having trouble navigating to the right spot on the page, clicking or selecting something nearby with a mouse can jump you closer.

Getting your screen reader start

Ready to try it out for yourself?

1. First, open the demo app in a separate browser window so you can read these steps as you go along.
2. Press ||Command + F5|| (or ||Command + Fn + F5||) to activate the VoiceOver prompt and click "Use VoiceOver".
3. Click in the text area.
4. Press ||Control + Option + Right Arrow|| to move the VoiceOver cursor (a black rectangle) down to the next item on the page, the buttons. Press it a few more times to find out where it goes, and use ||Control + Option + Left Arrow|| to backtrack your way up the page.
5. You can turn VoiceOver off with the same shortcut you used to activate it, or by clicking the close icon in the VoiceOver window.
6. Bonus: if you can handle one more shortcut, there's a handy tool called a rotor that helps screen reader users navigate pages. With VoiceOver active, press ||Control + Option + U|| to bring up the rotor and move through the different lists it provides with the arrow keys. Pressing enter on an item will set the VoiceOver cursor focus to that element, and you can interact with it further.

Now, for a fun experiment—pull up a piece of UI you recently worked on, cross your fingers, and activate VoiceOver again. Hopefully your UI seems as friendly to a screen reader user as it does to sighted users. At the very least, now you know how to ensure it will be friendly to them in the future. On a side note: sharing this newfound perspective of yours with those in charge of your project can be a great way to get them invested in putting time into getting the accessibility right. A demo of the screen reader in action on your site is sure to be a persuasive bit of evidence.

Next steps

The screen reader know-how you now have will be a great help in discovering a broad range of accessibility issues, but once you want to dig deeper into the tougher accessibility problems, here are some great resources to grow your knowledge:

1. VoiceOver Quick Start: VoiceOver actually comes with its own training module to teach you all the fundamental shortcuts and navigation methods in about 20-30 minutes. You can access it from the "Learn More" button in the dialog that pops up when activating VoiceOver, or with ||Command + Control + Option + F8|| any time VoiceOver is active.
2. Lighthouse: In the Lighthouse tab available by default in Chrome Dev Tools, you can run accessibility tests on your app and get a detailed breakdown of any issues that were detected and advice on how to resolve them. The problematic buttons we spotted in our demo were flagged in Lighthouse tests as well.
3. Apple VoiceOver Guide
4. WebAIM: This site covers the fundamentals of web accessibility in a very easy-to-follow format, with explanations of the important concepts as well as concrete HTML examples representing best practices.
5. W3C Web Accessibility Initiative Site: Literally setting the standards for web accessibility, this organization offers a thorough guide for evaluating the accessibility of a website, teaching you what to look for along the way.