Digital Content Accessibility 101: What you need to know about inclusivity guidelines.

Picture of Sarmad Nawaz
Posted by Sarmad Nawaz

In the past, digital accessibility was a “nice-to-have” feature, but the space is changing — fast. These days, smart project owners will design for accessibility and bring existing apps, platforms, and sites up to speed to create digital environments accessible to all, regardless of  physical or cognitive limitations. 

Back in 2021, when we were in the throes of Covid chaos and vaccine confusion, the midwestern pharmacy chain Hy-Vee, with more than 140 locations, found itself in a lengthy dispute when “federal investigators found the company’s online web portal excluded some users with disabilities.” As part of the Dec, 2022 settlement, the chain agreed to update its vaccine registration web portal to conform to the  Web Content Accessibility Guidelines (WCAG), despite Hy-Vee’s assertion that it had not violated the the Americans with Disabilities Act (ADA). 

The Hy-Vee story is not a one-off. Accessibility lawsuits are on the rise — from 2,314 in 2018 to an estimated 4,220 by the end of 2023 (source: Usablenet). It’s a growth industry for lawyers, and while businesses and nonprofits are not legally required to conform to the WCAG, as federal agencies are, they are still vulnerable to complaints and lawsuits — any person with disabilities may file a lawsuit under the ADA.

A business, developer, or platform will best avoid being forced to respond to an ADA complaint, particularly if the Federal Trade Commision (FTC) steps in; once this happens, a company or developer can find themselves mired in legal processes and expensive retrofits. It’s easier to ensure that websites and apps conform to the WCAG and avoid complaints altogether. It’s also the right thing to do – removing barriers to technology contributes to improved quality of life for anyone with accessibility challenges. 

The Need for Accessibility Testing

Accessibility testing is now a critical component of the software development lifecycle (SDLC). Planning for this class of testing from the outset ensures that digital products are inclusive by design. The objective is to validate that digital content conforms to established standards and guidelines, such as the WCAG. As mentioned above, repercussions of neglecting digital accessibility are far-reaching, with potentially substantial impacts. 

Benefits of Accessibility Testing

The advantages of investing in accessibility testing extends beyond benefits to users with disabilities, as it enhances UX for all. Improved usability, increased audience reach, and positive brand perception are a few key benefits. As of May 2023, accessibility is not a Google ranking factor, but websites with accessibility features have better, measurable UX, which is an important ranking factor. 

How Accessibility Testing Works

Accessibility testing involves both automated tools and manual evaluation. Automated tools like Axe assist in identifying common accessibility issues, while manual testing covers nuances that automated tools miss. Following established guidelines and, if possible, testing with users with disabilities are essential.

Below is a broad list of physical, intellectual, and other challenges that benefit from increased digital accessibility. This is meant to be a general, rather than exhaustive, list. 

  • Visual Impairments
    Individuals with visual impairments, including blindness, low vision, and color blindness, often use screen readers or magnification tools to access digital content. Accessibility testing ensures that websites and applications are compatible with screen readers, have sufficient color contrast, and provide alternative text for images.

  • Auditory Impairments
    People with hearing impairments rely on captions or transcripts to access audio content. Accessibility testing verifies the presence and accuracy of captions and transcripts for audio/video elements, ensuring that multimedia content is accessible to all.

  • Motor Impairments
    Motor impairments can affect users' ability to operate a mouse or keyboard. Accessibility testing focuses on keyboard navigation, ensuring that functionalities can be accessed without precise mouse movements. It also involves testing for sufficient clickable areas and allowing extra time for form completion.

  • Cognitive and Learning Disabilities
    Individuals with cognitive disabilities, such as dyslexia or ADHD, may face challenges in processing information. Accessibility testing aims to create clear, consistent content with logical structure while avoiding complex language. Additionally, it ensures that forms and instructions are easy to understand and navigate.

  • Speech Impairments
    For users with speech impairments, accessibility testing ensures that alternative methods for inputting text or commands are available. It also focuses on making communication tools and interfaces adaptable to input methods.

  • Temporary Disabilities

    Temporary disabilities, such as a broken arm or temporary vision loss, also necessitate accessible digital experiences. Accessibility testing ensures that individuals facing temporary impairments can navigate and interact with digital content effectively during their recovery period.

  • Age-Related Disabilities

    As individuals age, they may encounter limitations in vision, hearing, motor skills, or cognitive abilities. Accessibility testing involves designing interfaces that are intuitive and easy to navigate, accommodating the needs of older users as well.

  • Intersectionality and Varied Needs

    It's crucial to recognize that disabilities can intersect, and users may have multiple accessibility needs. Accessibility testing aims to cater to these diverse needs by implementing inclusive design practices that consider various disability types simultaneously.

Accessibility Good Practices

Below are overall good practices to follow when accessibility testing.

  • Understand Accessibility Guidelines

    Get familiar with international standards like WCAG and the Voluntary Product Accessibility Template (VPAT) to grasp the principles and success criteria for accessible design. Understanding violation codes are key to a robust accessibility test strategy.

  • Automated Tools & Manual Testing

    A combination of manual and automated testing will cover the widest range of issues. While automated tools help identify common issues, manual testing is needed for a comprehensive evaluation. In addition, it is crucial to gauge actual user experience and verify as-is behavior of the applications. For automated tests, explore tools and automation frameworks to provide more robust automation implementations.

  • Keyboard Accessibility

    Keyboard navigation verification addresses all events performed through the respective keys. The flow of the application through keys is a critical part of an enhanced user experience. An accessibility tester must ensure that all functionalities, including tab navigation, focus indicators, and keyboard shortcuts, can be operated with a keyboard only. Consideration for key combinations in Windows and iOS systems should be kept in mind.

  • Semantic HTML

    Accessibility testing for semantic HTML involves ensuring that HTML elements are used appropriately to provide structure and meaning to content. An accessibility tester needs to ensure that appropriate tags (like <header>, <nav>, <main>, <footer>) are used to enhance screen reader comprehension. Using the respective screen readers (such as NVDA or VoiceOver) are helpful tools to evaluate these semantic HTML elements.

  • Alt Text for Images

    Verification of alt text for images is a crucial part of accessibility testing, as it ensures that users with visual impairments can understand the content of images through screen readers or other assistive technologies. This alt text should convey the purpose and content of the image to assistive technology users. So it is crucial that every <img> tag includes an alt attribute.

  • Color Contrast and Visual Design

    The correct color contrast and visual design verification ensures that content remains legible and perceivable for users with visual impairments.The WGAC guideline specifies minimum contrast ratios between text and background to ensure readability for different text sizes. Automated tools like WebAIM's Contrast Checker, Color Contrast Analyzer, or browser extensions can be used to analyze color contrast ratios. These tools allow you to input color combinations and determine if they meet the required contrast ratios.

    Check that color contrasts are not only in default states but also in various interactive states (hover, focus, active) to ensure that the contrast remains sufficient and readable under varied conditions.

  • Accessible Forms and Controls

    Accessibility of forms and controls are fundamental components of web interaction. Validation of the form fields for labels, input field descriptions, and appropriate Accessible Rich Internet Application (ARIA) roles to assist users in form completion is critical. By conducting thorough testing based on these criteria, you will ensure that forms and controls on your website or application are accessible, providing a seamless experience for users, including those relying on assistive technologies.

  • Ensure that all form elements (text inputs, radio buttons, checkboxes, dropdowns) can be accessed using only the keyboard. Test tab navigation through form fields, verifying a logical and sequential order.

  • Verify that each form control has a corresponding and descriptive <label> element associated with it. Labels should be programmatically linked to their inputs using the “for” attribute or by nesting the input within the label.

  • Ensure appropriate type attributes are used for various inputs (e.g., type="text", type="email", type="password") to assistive technologies in understanding the expected input format.

  • Verify proper use of HTML5 input types, such as email, tel, url, etc., for better validation and user assistance.

  • Ensure that error messages are descriptive, associated with the relevant form fields, and programmatically linked through ARIA attributes for screen reader users.

  • Verify that users receive feedback upon form submission, indicating success or error. Use ARIA roles and live regions to provide dynamic feedback to screen reader users without relying solely on visual cues.

  • Test dropdown menus and ensure they can be opened, navigated, and selected using only the keyboard.

  • Confirm that dropdown menus have associated labels and that selected options are clearly indicated.

  • Assess the usability and accessibility of date pickers, ensuring they are operable via keyboard and screen readers. Consider providing alternative text or descriptions for calendar controls.

  • Verify that form elements in disabled or read-only states are clearly indicated and not focusable, preventing users from interacting with them.


    Multimedia Accessibility

    Multimedia accessibility verification ensures that audio and video content is perceivable and understandable by all. Keep the following points in mind while performing accessibility testing for multimedia features:

  • Verify that videos have synchronized captions and subtitles for spoken content, including dialogue, sound effects, and speaker identification.

  • Check for transcript availability alongside videos, providing a text-based alternative to audio content.

  • For videos with visual content not conveyed through dialogue or sound, ensure the availability of audio descriptions narrating the essential visual elements needed for context.

  • Confirm that multimedia players and controls can be operated using keyboard navigation only.

  • Test that users can easily pause, stop, or control the playback of multimedia content, and ensure that controls are accessible and clearly labeled.

  • Check for the availability of alternative formats for multimedia content, especially for users who may have difficulty accessing certain formats (e.g., providing a transcript alongside a video).

  • Verify the availability and functionality of volume controls. Ensure that users can adjust volume levels or mute audio as needed.

  • Check for options to provide audio-only versions of video content or visa versa to cater to different user preferences or needs.

  • Test multimedia elements with screen readers to ensure that relevant information, including captions or audio descriptions, is conveyed effectively.

  • Ensure that visual cues, or indicators for multimedia content (such as play, pause, or volume icons), are programmatically accessible to assistive technologies.

Verify Responsive Design

Verification of responsive design ensures content is accessible across different devices and screen sizes allowing users to access content seamlessly regardless of their device.

Document Findings

Any issues found during accessibility testing must be well documented, and clear recommendations or steps for improvement should be provided. Be sure to include guidance for implementing accessibility features. Provide the violation code details for the identified issues to help key stakeholders and teams identify problems based on the violation code in the project management being used.

Conclusion

Accessibility testing is the cornerstone of inclusive digital design and UX. It's not just about meeting regulatory standards; it's about ensuring that anyone who wishes can access and engage with digital content. The tech communities have one eye on where the WCAG and regulatory guidelines and requirements. We don’t know exactly where they are headed — but it’s safe to err on the side of caution.

By prioritizing accessibility testing, organizations can create a more inclusive online environment, positively impacting users' lives and positioning themselves as champions of inclusivity and equality. Let's build a digital world where accessibility is not an afterthought, but an inherent part of every design decision, not only for the sake of self-interest or better SEO, but to contribute to the benefit of all users.