Keyboards and screen readers are both useful and robust forms of technology used to navigate webpages and apps, giving web users the capability to navigate digital experiences and interact with content that would otherwise be inaccessible to them.
Keyboard and Screen Readers – Not All Users Are the Same
It’s often assumed that web users with vision or mobility impairments are the only people taking advantage of these devices, when in fact, other users experience benefits as well. For example, many users without disabilities use common keyboard shortcuts, such as “Command + S” to save a file on Windows, and “Control + S” to save a file on a Mac OS. There are dozens of keyboard commands available to us to work more efficiently no matter our abilities.
On the other hand, for blind and low vision web users, or those with motor skill disabilities who can’t operate a mouse due to limitations like tremors or muscle weakness, both keyboards and screen readers are essential technologies they need to interact with online content. These users are literally hands-free with a screen reader, using text-to-speech programs such as Google’s Talkback or Apple’s VoiceOver. Those native iOS screen readers work similarly to stand-alone readers such as NVDA (Non-Visual Desktop Access), which scans a website’s content and reads it aloud.
Knowledge is Key
It’s important for designers and developers to empathize with web users facing these limitations and understand how they navigate online experiences. For example, Eric Sanner, a Sitecore Lead Technical Consultant at Perficient advises, “Turn off your monitor to fully rely on the screen reader instead of your vision and see if you can understand the flow of the page. Most screen reader users have a set of keyboard shortcuts to navigate a page and use these tools on a regular basis such as the ‘h’ key to skip between header tags.”
Another common use of screen readers is to find a “landmark” element and look above and below that landmark for more or related content. Both tips are key to designing an efficient and easy-to-use digital experience for more Web users.
Keyboard and Screen Readers – Computing Without a Mouse
Recently Ian O’Bara, accessibility evangelist, published in the proceedings of the Human Factors and Ergonomics Society and Human Computer Interaction International, demonstrated to Perficient colleagues how an actual keyboard user would tab through a webpage using keyboard shortcuts.
“Keyboard navigation is a good place to start learning,” O’Bara said. “It gives sighted users the ability to confirm the focus order of the page, to help them orient to the page, and logically find what they want.” Both the Mac OS and Windows OS have numerous shortcuts, so much so you can work without a mouse. O’Bara advised learning basic keyboard shortcuts and cited it as a good place to learn. To understand the importance of keyboard navigation to keyboard users, we need to understand the importance of “focus order” when tabbing through a website page or mobile app. According to the W3C Success Criterion 2.4.3: Focus Order:
“…to ensure that when users navigate sequentially through content, they encounter information in an order that is consistent with the meaning of the content and can be operated from the keyboard. This reduces confusion by letting users form a consistent mental model of the content. There may be different orders that reflect logical relationships in the content. For example, moving through components in a table one row at a time or one column at a time both reflect the logical relationships in the content…”
Even More…
Additionally, O’Bara demonstrated the accessibility of several websites using NVDA, a free open-source screen reader. It’s one of many screen readers and works somewhat differently than Mac VoiceOver or Google Talkback, but overall, they achieve the same goal, giving keyboard users access to website and app content like NVDA. One way screen readers operate the same is how they literally crawl a website page. “Screen readers are very linear, and they read the page from top to bottom because they don’t have any sense of spatial layout on a page,” Sanner emphasized. “For instance, should a design have text to the left of a button, a screen reader has no way to know this.”
During O’Bara’s demo he pointed out an important difference between screen reader and keyboard navigation, “Navigating with a keyboard has limitations screen readers do not, such as more easily and quickly navigating through landmark regions, such as a header, main, and footer.” With a keyboard, you won’t necessarily have that ease of use, so O’Bara recommended this tip, “Have the first user interface (UI) element focusable on the page as a link to the main body of the page and interact with elements there”.
Sanner brings up a key recommendation for designers and developers to keep in mind when creating or revising the user experience for screen reader users: “Think about the things that are important on the page and ensure those items are audible to the screen reader. For instance, take a credit rating website, one of the most important things on the page is your credit score, it’s really bad if the screen reader misses that piece of information because it’s not accessible to that type of assistive technology.” The same is true of keyboard tabbing as well.
Easy and Accessible Interaction
Now that you have a baseline understanding of the importance of designing for both keyboard and screen reader assistive technologies, feel free to stay tuned for the second installation of this series, where I’ll dive into the working draft Web Content Accessibility Guidelines (WCAG) 2.2, and what that means to design for screen reader and navigation accessibility. For more information on accessibility, download our guide, Digitally Accessible Experiences: Why It Matters and How to Create Them, and check out our UpSkills series and UX for Accessible Design series for more information on accessible design, and contact us about our Accessibility IQ.
