Digital Accessibility: Understanding Screen Reader Interaction

--

Ensuring universal usability through programmatic interaction with assistive technology.

By: Fergus Callaghan, Prudential ADA Strategy & Experience Team

Illustration of man in blue shirt, wearing headphones working at a laptop while drinking coffee.
(source: Deque)

Digital interaction is a part of everyday life to work, play, or just live! We work remotely … play games … date … even order dinner, groceries, and essentials … all online. The ability to connect is no longer optional, it is essential, not just for some, but for everyone.

Creating digital content that works for everyone requires being accessible! A large part of accessibility is ensuring your content works with assistive technology.

Assistive technology plays a pivotal role in breaking down barriers and empowering individuals with disabilities to access and interact with digital content. Among the most crucial assistive tools are screen readers, which enable people with visual impairments or other disabilities to navigate and understand digital content effectively.

Understanding screen readers

A screen reader is a software program installed on the user’s device; desktop, tablet, even mobile. Most mobile devices supply integrated screen readers such as VoiceOver for iPhone or TalkBack for Android. However, for desktops, it is up to the user to install their own screen reader software.

These software programs convert digital content, if created correctly, into synthesized speech or Braille output. This allows users who are blind or visually impaired to easily read data, interact with forms, and even chat! One of the most popular, and free, screen readers available is NVDA (NonVisual Desktop Access).

NVDA
(source: NV Access)

What is NVDA?

NVDA was created by the company NV Access, a non-profit founded through a series of corporate grants and individual donations. Realizing, and truly understanding, the need of blind and visually impaired people, developers Michael Curran and James Teh, both of whom are fully blind, set out to create accessible experiences.

According to their manifesto:

“For blind people to use a computer, they need a screen reader which reads the text on the screen in a synthetic voice or with a braille display. But in many cases screen reading software costs more than the computer itself. In the past this has left computers inaccessible to millions of blind people around the world. This is a critical problem, because without computers, access to education and employment is severely limited, not to mention everyday functions such as online banking, shopping and news.”

NVDA is an award winning open-source software program, which means the code is available to anyone to make changes. Developers are continually producing new and customized add-ons to make NVDA more robust. In fact, being open-sourced has allowed translators and developers around the world to continually contribute to its expansion and improvement. Currently, it is offered in over 55 languages and used by people in over 175 countries, making it one of the most widely used screen readers.

NVDA can be used with many different types of hardware including keyboards. By using a combination of keystrokes, or gestures on touch-enabled devices, individuals can effectively navigate through different applications, websites, and documents.

Photo of person using brail computer
(source: Stock Photos)

Impact on nonvisual users

For non-visual users, the NVDA screen reader proves invaluable in granting equal access to web content. Navigating webpages relies on various structural elements to efficiently gather information. By leveraging NVDA’s capabilities, non-visual users can independently explore and understand web content.

Headings

Headings provide users with a structural outline of the webpage’s content. By pressing ‘H’ or ‘Shift + H,’ users can jump between headings, allowing them to quickly grasp the content’s hierarchy and context.

Links and Buttons

The ‘L’ key moves users through the links on a page, while ‘B’ navigates through buttons. These elements are crucial for interacting with different functionalities. Descriptive link text informs users about the linked content, aiding in deciding whether to follow the link. Buttons enable actions such as submitting forms or initiating functions such as opening a modal window.

Skip to Main

Some webpages feature a “Skip to Main Content” link that becomes visible when the page is navigated using a screen reader. This link allows users to bypass repeated content like navigation menus and directly access the main content of the page. This feature greatly improves efficiency by allowing users to swiftly access core information.

Images

When encountering images, NVDA reads the alternative text assigned to them. This description supplies insight into the visual content and can be accessed by pressing the “G” key.

Lists

Users can easily explore lists by pressing the “L” key, with NVDA reading out the list items sequentially.

Illustration of person with random letters in front of him with a look of confusion on his face.
(source: NPR)

Screen readers extend beyond visual impairments

While screen readers are primarily associated with assisting individuals who are blind or have low vision, their application extends beyond this demographic. Screen readers have proven beneficial for individuals with various disabilities or challenges, such as:

Learning disabilities

Individuals with learning disabilities, such as dyslexia, may find it easier to understand text when it is read aloud, helping them process information more effectively.

Cognitive disabilities

Screen readers can aid individuals with cognitive disabilities, such as ADHD, by reducing the cognitive load and providing focus needed for reading comprehension.

Language barriers

Screen readers can help those not fluent in the language used on a website or application by reading the content aloud using an add-on feature called “InstaTranslate”.

Buttons illustrating wheelchair, hearing impairment, cane user.
(source: Muse by CL.io)

Optimizing content for screen readers

Developers and designers can take several key steps to optimize digital content for screen readers, thus enhancing accessibility:

Proper semantic structure

What we do: Ensure that webpages and applications use proper HTML elements (e.g., headings, lists, and landmarks) to create a clear and logical information hierarchy.

How it helps: Screen readers rely on this structure to help users navigate through the content and create context.

Descriptive links

What we do: Use descriptive link text that conveys the purpose of the link. Avoid ambiguous or device dependent phrases like “click here” or “learn more”. Instead provide context within the link text such as “learn more about NVDA!”.

Add extra information such as “opens in new tab” if the link will take the user to a new tab so they can easily find their way back to the original content.

How it helps: Enables users to understand the link’s destination.

Alternative text (alt text) for images

What we do: Add descriptive alt text to all images with necessary information by supplying meaningful descriptions of the visual content. Conversely, hiding decorative images so we reduce the cognitive load for the user.

How it helps: Relays necessary information such as in-image text and descriptions that may not be found in the surrounding page content.

ARIA (accessible rich internet applications)

What we do: Implement ARIA attributes, if needed, for interactive elements giving users much needed information such as if a checkbox is selected or an accordion is opened or closed. It also gives added insight into how to interact with buttons or inputs by linking helper text, like a date format requirement (MM/DD/YYYY), which is then read in addition to the input label.

How it helps: Communicates the purpose, state, and functionality enabling users to correctly interact.

Consistent and predictable navigation

What we do: Maintain consistency in navigation and layout across webpages to help users familiarize themselves with the site’s structure.

How it helps: Consistent navigation ensures users can easily find critical information.

Skip navigation links

What we do: Include “skip navigation” links.

How it helps: Allows screen reader users to bypass repetitive elements, such as navigation menus, and directly access the page’s main content.

Captions and transcripts

What we do: Provide accurate closed captions and transcripts for multimedia content like videos and audio files.

How it helps: Enables users to hear the content even if they can’t see it.

Conclusion

As the importance of digital accessibility continues to grow, investing in screen reader optimization plays an increasingly crucial role in creating an inclusive online environment that caters to all individuals. Through these simple practices, we create not only accessible content, but Universal Usability!

--

--