June 14, 2022

Accessibility with screen readers and other input devices

When designing software, it's important to understand how different devices interact with what you're building

by

David Steffen

Accessibility is the practice of making your service or product usable by as many people as possible. Input (and output) devices are one of the biggest concerns you’ll want to keep in mind when designing, building, or updating your product.

What Does Accessibility Have To Do With Input Devices?

Everyone uses input and output devices to interact with their devices. Different people have different preferences. Some people use almost nothing but touch-screens, other people may avoid touch-screens whenever possible. Some are used to a tiny phone screen, while others want nothing less than a bank of monitors that fills their whole desk. But of course, input and output devices are a vital part of software, how we tell the software what we want, and how the software performs.

Not every input device and not every output device will work for every person. Writing software that functions well for accessibility devices for people with disabilities is something that is frequently overlooked. 

A person may not be able to use a mouse because of hand tremors, or may not be able to see the screen well enough to tell where the mouse cursor is pointing. They may not be able to reliably hit buttons on a touch screen, or may not be able to hear the audio of a presentation. 

Your software should be able to interact with different kinds of devices to ensure that as many people can use the software as possible.

Usability on different devices is not limited to only disability concerns. Anyone might have limited access to different kinds of devices, so making sure that a web app is usable on a tablet or smartphone is important, too.

Person holding and using a touch-screen tablet.

What is a Screen Reader?

A screen reader is an accessibility device that allows people with visual impairments (including blindness) to access information and use software. Screen readers allow the user to interact with software in alternate ways without depending on visual feedback to the user.  

Screen readers give feedback to the users in one of two ways:

  1. Audio: As the user navigates around the interface, the screen reader software reads text from the screen and describes inputs.  
  2. Braille: A refreshable Braille display can produce raised Braille dots that describe the text and interface that can be read by touch.

Screen readers on a desktop device generally use a keyboard to navigate, and there are some similarities to how a user can navigate using keyboard-only (such as using the Tab key to move between inputs), but screen reader navigation is NOT simply keyboard navigation. 

Screen reader software adds more than just the audio feedback; it provides a wide set of extra options to help make it easier for screen reader users to use software.

If you have never used a screen reader before, and you want to get an idea of how they work, smartphones come with screen readers as part of the operating system. You can turn the screen reader on in the system settings, often under “Accessibility” which might have a name like “Voice Assistant.” Check in that section for a tutorial.  (You might want to have a second device handy to look up help, in case you have trouble figuring out how to navigate back to turn the screen reader off).

A screenshot of how to turn on the screen reader functionality in a settings menu

Details will vary from program to program, so check the documentation of a particular screen reader for more information.

MacOS has the VoiceOver program built in. NVDA is a free option for Windows devices.

An Incomplete List of Input Device Accessibility Concerns

Expandable Menus
Some menus may not be reachable by keyboard or screen reader at all. Others may allow the menu heading to be read. Others may depend on a mouse “hover” that has no equivalent on some devices. If a menu heading itself has a clickable navigation then there may be no way to expand that menu on a tablet without navigating, which makes the submenu inaccessible.

Alt Image/Audio/Video
Most images should have “alt” text that the screen reader can use to describe the image. This is especially true for images that are necessary to understand how to use the app, such as an image button, but should also be provided for decorative images. Any video/audio components such as tutorial videos should have alternative options for those who cannot hear or see them.

Skippable Content
The most important of this is some kind of “Skip to Main Content” link reachable near the top of the screen that is often only visible when keyboard navigating. This allows the control focus to be quickly shifted to the main content on the page, rather than requiring the user to navigate through the entire menu section for every page that loads.

Table Navigation
Information can be presented to the user in various ways that look like a table in a visual interface, but it should also be clearly marked as an interface in the underlying table. This ensures that a screen reader knows how to navigate it properly, and will be able to clearly tell the user what row and column a particular item is in.

Conclusion

It’s important to understand general concerns surrounding accessible software design as you design and improve your software, and understanding how different devices interact with the software is a vital aspect of that. 

If you liked this article, join our newsletter for more founder resources every month.
Thanks for subscribing!
Oops! Something went wrong while submitting the form.

David Steffen is a Senior Developer at Cloudburst, award-nominated founder, short fiction editor and publisher, cross-stitcher, and friend of dogs. He looks at everything from a perspective of storytelling and how it informs our understanding of the world.