FullStack Labs

Please Upgrade Your Browser.

Unfortunately, Internet Explorer is an outdated browser and we do not currently support it. To have the best browsing experience, please upgrade to Microsoft Edge, Google Chrome or Safari.
Upgrade
Welcome to FullStack Labs. We use cookies to enable better features on our website. Cookies help us tailor content to your interests and locations and provide many other benefits of the site. For more information, please see our Cookies Policy and Privacy Policy.

Accessibility in Focus: The Intersection of Screen Readers, Keyboards, and QA Testing

Written by 
Oscar Orjuela
,
QA Analyst
Accessibility in Focus: The Intersection of Screen Readers, Keyboards, and QA Testing
blog post background
Recent Posts
Getting Started with Single Sign-On
Choosing the Right State Management Tool for Your React Apps
Integrating GitHub Actions and Docker for a Java Project

Ensuring digital products and services are accessible to all users, regardless of their abilities or disabilities, is a critical aspect of modern quality assurance practices. As technology continues to advance, accessibility testing has emerged as a fundamental pillar of software development, emphasizing the importance of inclusivity and user-centered design. Discover how, with the help of screen readers and your keyboard, you can help bridge the accessibility gap and pave the way for a more inclusive digital future.

Table of contents

As software developers and testers, we need to take responsibility for making sure our products are reliable, easy to use, and accessible to everyone. This blog post serves as a guide to help us think about accessibility testing from a Quality Assurance (QA) standpoint. To do this, it's important to become familiar with assistive technologies like screen readers and keyboards, as well as the principles set out in the Web Content Accessibility Guidelines (WCAG). By taking accessibility into consideration as part of our development process, we can create applications that everyone can use.

4 key reasons you should care about accessibility

When we truly understand why our efforts matter, our drive to make things happen increases exponentially. So, let's take a closer look at why accessibility should be a priority in our development and QA work 💡.

Accessibility issues impact us all

Accessibility has a more significant impact on your life and those around you than you might realize. While we often associate accessibility with lasting health conditions, disabilities should be understood as a spectrum, including situational, temporary, or permanent challenges. The inclusive design approach, embraced by companies like Microsoft, acknowledges disabilities as a mismatch between what people need and how products are designed. In other words, this perspective encompasses a wider variety of scenarios and situations than those associated with medical conditions. And, if we create products, we are accountable for fixing those mismatches. 

Image showing how accessibility impacts individuals with permanent, temporary, or situational disabilities. A person holding a baby may face challenges like someone with a broken arm, and a person in a noisy environment might experience hearing difficulties similar to someone with an ear infection.
Inclusive design considers a wider variety of situations than those associated with medical conditions. Source: Inclusive Microsoft Design Guidebook. 

Accumulating accessibility debt is costly

The cost of neglecting accessibility during the initial stages of development can add up quickly, leading to an "accessibility debt," which becomes more challenging and expensive to address at a later stage. According to McKinsey, consumer companies with inaccessible websites are estimated to lose $6.9 billion annually due to frustrated consumers with disabilities turning to competitors. This is an increasingly important issue as the global population of older adults is expected to grow significantly in the coming years. The World Health Organization (WHO) predicts the number of people aged 80 years and older will triple in the next decades. So, we must strive to be part of the solution rather than the problem.

Accessibility regulations will become stricter over time

Accessibility regulations are becoming stricter around the world, with significant implications for organizations that fail to comply. In the US, Section 508 of the Rehabilitation Act is a key example of this, impacting federal agencies, contractors, vendors, educational institutions, and NGOs receiving federal funding. Organizations are required to ensure that their electronic and information technology is accessible to individuals with disabilities, as mandated by Section 508 standards. Non-compliance can lead to legal issues, lawsuits, and a loss of funding and business opportunities. As such, it is increasingly important for organizations to remain up-to-date on the latest accessibility regulations and strive for compliance.

SEO

Enhancing accessibility not only promotes a more inclusive digital experience but also significantly impacts SEO and website usability. The relationship between SEO and accessibility is linked in several key areas, which can be optimized to benefit both: providing video transcriptions, captioning images, adding alt tags and title tags, structuring headers and link anchor text, creating on-site sitemaps, table of contents, and breadcrumbs, and using semantic HTML. These measures not only assist users with disabilities but also improve navigation for search engines, potentially leading to better search rankings.

WCAG essentials

The Web Content Accessibility Guidelines (WCAG) are a set of internationally recognized standards by the World Wide Web Consortium (W3C) to ensure web content is accessible to people with disabilities. While these principles primarily cover websites and web applications, they can be applied to various digital content and software interfaces, providing a framework for inclusive web content. Understanding and implementing WCAG can help QA professionals guarantee that digital products adhere to essential accessibility standards.

The WCAG framework is built on 4 essential principles, according to which all websites and applications must be:

  • Perceivable: Users should be able to identify content and interface elements through their senses. For some, this entails visual perception, while others rely on sound or touch.
  • Operable: Users must be able to effectively use controls, buttons, navigation, and other interactive features. Many users depend on assistive technologies such as voice recognition, keyboards, and screen readers.
  • Understandable: Your content should be comprehensible, facilitating users' understanding of how to navigate your site and use it, understanding where they are at all times. Consistency in presentation, format, and usage patterns is key.
  • Robust: Content must be capable of being reliably interpreted by a diverse range of users, allowing them to choose the technology that best suits their interaction with websites, online documents, multimedia, and other information formats. Users should have the freedom to opt for their preferred technologies for accessing content.

If you are already familiar with these guidelines, note that WCAG 2.2, released in October 2023, introduces fresh criteria that include consistent help, redundant entry, focus visibility, dragging movements, target size, and accessible authentication. 

The impact of keyboard and screen readers in QA processes

Assistive technologies such as screen readers, speech recognition software, and alternative input devices are essential for accessibility QA testing, enabling people with disabilities to better interact with digital interfaces and their environment. Screen readers, in particular, are especially beneficial for blind and low-vision users, as they allow them to convert on-screen information to text-to-speech or braille output. This way, these users can engage more effectively with technology and their environment.

By addressing issues related to blindness, you can tackle a major part of accessibility challenges, given the involvement of keyboard and screen reader usage. This is because roughly 80% of the accessibility issues can be understood with this approach. Therefore, one of the most impactful and effective ways to test accessibility and WCAG compliance is to simulate the experience of individuals who rely on screen readers and keyboards and navigate as they do.

What you can test by combining screen readers and keyboard:  

  • Keyboard accessibility: Conduct thorough evaluations to ensure that all interactive elements, including menus, buttons, and links, can be easily accessed and operated using only the keyboard, without needing a mouse or other pointing device.
  • Tab focusability and tab order: Verify that the tab key navigation follows a logical and intuitive order, allowing users to navigate through interactive elements, such as links and form fields, in a predictable sequence without encountering any unexpected jumps or skips.
  • Keyboard functionality with a screen reader on: Test the compatibility and seamless interaction between keyboard functionalities and screen readers, guaranteeing that users relying on screen readers can effectively navigate and interact with the website's content, features, and interactive elements using keyboard commands.
  • Visual focus indicator: Ensure the presence of a clear and easily identifiable visual indicator that highlights the current focus or active element, allowing users to track their position and navigate through different sections of the webpage with clarity and confidence.
  • Effective focus management (dialogs, form validation, etc.): Validate that focus management is consistently maintained and effectively handled across various interactive components, including dialog boxes, form validation messages, and pop-up windows, ensuring that users can easily identify and navigate through different interactive elements without any disruptions or confusion.

Keyboard traps: Identify and eliminate any potential keyboard traps, ensuring that users can freely navigate through the website without encountering any instances where they become unintentionally stuck or unable to move to other sections, thus providing a seamless and uninterrupted keyboard-based browsing experience.

Keyboard testing 101

Below are some of the basics you need to know for keyboard accessibility testing:

This is a list of some of the considerations you should have in mind when testing keyboard accessibility. To learn more, check out this article

Screen readers overview

In the most recent WebAIM screen reader survey (2021), over 71% of respondents reported using multiple desktop/laptop screen readers, a significant increase from 53% in July 2015 and 68% in 2017. Additionally, 39% of users employ three or more screen readers. 

For this reason, it’s important to familiarize yourself with these assistive technologies and run QA tests with them, just like you would test different web browsers in any website QA test. 

This table highlights the similarities and differences between the most widely used screen readers for desktop, laptop and mobile devices.

Get a glimpse: screen readers in action

Not only do screen readers read aloud, but they also provide visual instructions, which can be especially useful for those with low vision. These instructions give users an extra layer of context when navigating a website or app, allowing them to gain a deeper understanding of what is going on. We can think of screen readers as compasses since they help users explore unknown territories with confidence. If a website is accessible, then navigating it should not be a problem, even if it is completely unfamiliar.

Here, the screen reader lets users understand they are in an “About” menu that is collapsed.

Image of a website page with screen reader information for an "About" menu button.

When screen readers navigate forms, they must offer users an organized view of fields so they can easily understand and complete them. This is why it is important to create accessible forms that are optimized for screen readers. As you test a form, ask yourself: can the user understand what type of field they are in? Can they tell what type of information they are expected to enter and in what format? 

For example, in this application form, the “Country” field clearly tells users they should complete it with text:

Accessible application form with the cursor positioned in a text field that is identified as such.

If forms lack meaningful structure or are improperly coded, screen readers might not convey the relationship between checkboxes and their corresponding options. However, when they are accessible, they give screen readers the information they need to effectively tell users the different values they can select to provide and submit the information.

Accessible application form with screen reader information about a checkbox and its status.

Website buttons must always have proper labeling to help users understand their purpose. As you test buttons with a screen reader, always check that labels inform what the interactive elements are about. Also, make sure that users can understand the type of component they are interacting with and that they can anticipate the component's behavior when actioned.

Screenshot that illustrates the information provided by screen readers when interacting with an accessible button.

How to get started

Washington University offers you two versions of the same website — one accessible and one inaccessible — to practice. This means it’s your turn now: are you ready to check how well you can do without help? 🧐

To start using screen readers or expand your skills, explore this list of resources:

NVDA

JAWS

Narrator

VoiceOver

TalkBack

General resources

Final thoughts

Accessibility must be recognized as an integral component of every product and service, embedded into the very foundation of our design, development and QA practices. We can compare the journey towards inclusivity to building a sandcastle; it can be easily washed away when neglected. Therefore, accessibility can’t be treated as an afterthought but requires a persistent commitment to continuous improvement. 

In the field of QA, prioritizing accessibility involves integrating comprehensive testing procedures that focus on identifying and addressing potential accessibility issues at every stage of the development process. This includes implementing automated and manual tests to ensure compliance with WCAG guidelines, conducting thorough evaluations of keyboard and screen reader functionalities, and fostering a culture of continuous learning and improvement within the QA team. By embracing a proactive approach to accessibility testing and fostering collaborative efforts between QA and development teams, we can elevate accessibility from being merely a checkbox to an essential cornerstone in delivering impactful and inclusive digital experiences.

Taking the initial leap into the world of accessibility may seem daunting, but remember, you are not alone in feeling this way. In her book “Giving a damn about accessibility,” Sheri Byrne-Haber delivers a straightforward message: “Your first attempt at making anything accessible will be awful. Don’t use this as an excuse. Even awful is better than 98% of what other people are doing.” Commitment to accessibility is the one thing you need. Just get started 😉. 

---------------------------------

Are you an accessibility advocate driven by the desire to build inclusive software? We definitely want to hear from you. Check out our open positions!

Oscar Orjuela
Written by
Oscar Orjuela
Oscar Orjuela

Oscar is a seasoned systems engineer with over a decade of experience and a strong commitment to quality assurance practices. His expertise spans the banking, airline, and tech industries, and he has extensive knowledge in using different tools such as Cypress, Azure DevOps, Zephyr, SoapUI, and Postman. For Oscar, good QA is all about defect detection and resolution, but great QA is about developing and delivering software that is reliable, accessible, and provides a great user experience to all.

People having a meeting on a glass room.
Join Our Team
We are looking for developers committed to writing the best code and deploying flawless apps in a small team setting.
view careers
Desktop screens shown as slices from a top angle.
Case Studies
It's not only about results, it's also about how we helped our clients get there and achieve their goals.
view case studies
Phone with an app screen on it.
Our Playbook
Our step-by-step process for designing, developing, and maintaining exceptional custom software solutions.
VIEW OUR playbook
FullStack Labs Icon

Let's Talk!

We’d love to learn more about your project.
Engagements start at $75,000.