By testing according to the Web Content Accessibility Guidelines (WCAG) 2.1, the Bureau of Internet Accessibility tests for the experiences of a variety of disabilities. In this five-part series, we’re going to introduce how we test websites and apps to identify the accessibility barriers people with certain disability types may come across.
Part 1: Accessibility testing for people with visual disabilities
Visual disabilities range from slight vision loss to total blindness. They also include color blindness, heightened sensitivity to bright colors, and other variations in color and brightness perception, either independently or in connection to visual acuity.
When we test for accessibility impacts on people with visual disabilities, here is what we look for:
Adequate, equivalent text alternatives for images, controls, and other non-text content
Images can be a great way to get meaning or emotion across quickly, but when they don’t have accessible alt text, the information is unavailable to people who can’t see it. Screen readers and other assistive technologies can’t naturally read the text or purpose of graphics, so they require an accurate text alternative to understand and communicate non-text content.
No loss of information or function when text, images, or pages are resized
WCAG success criterion 1.4.4 Resize Text requires that content can be zoomed to 200% without the use of assistive technology (like a screen magnifier) and without the loss of content or functionality. Performing this testing and correcting any issues that occur when content is enlarged (or on a smaller screen size, like a mobile device) can be important for everyone but critical for people with low vision, low-contrast vision, or other visual impairments. Additionally, resizing content shouldn’t interfere with other accessibility requirements or the functionality of assistive technology.
Read: Give Yourself an Accessibility Test: Zoom Your Page to 200%
Sufficient orientation cues (visual and programmatically determined), structure, and navigation
There is a lot to consider when it comes to orientation, structure, and navigation. For display orientation, referred to commonly as portrait and landscape views, it's important that content is not restricted to a single view unless it has to be for some essential reason — this guideline is more typically considered as critical for people with certain mobility disabilities who may not be able to rotate a device or may have their device mounted in a fixed orientation, but it is also something to consider for people whose vision allows them to view something more easily in a wider display, for example.
It's also critical that users aren't expected to rely solely on the physical orientation or location of content or a control. For example, asking website visitors to select the red button in the lower left corner is not adequate — information as to where a user currently is and instructions for performing any task need to be available in the code in order to be perceived and communicated by assistive technology.
Structural and navigational elements are so important for all users to understand the way content breaks down, the relationships between pieces of information, and to get from one place to another. Visually, elements like headings and lists provide the information someone needs to more easily interpret content (they can also be very important design considerations for people with a number of cognitive disabilities or other impairments: Read: How to Create Accessible Content and Designs for People with Dyslexia).
For these elements to provide structural knowledge to everyone, however, they can't only be achieved visually — they must be programatically determined to be available to assistive technology. This means that when testing, something can't just look like a heading, for example, but must be an actual heading in the code.
Text or audio alternatives, or an audio description, for all video content
As video usage continues to grow, so does the importance of video accessibility. All pre-recorded videos should have a text transcript and captions, and when appropriate, audio descriptions. These tools help make videos and their content accessible to people with disabilities. Transcripts should include all spoken words in the video, but also any text that appears on-screen and important actions, gestures, or changes of scene. Audio descriptions are separate audio tracks containing narration that describes the action, characters, and scenes of a video.
Predictable and consistent navigation mechanisms and controls
Presenting navigation mechanisms in a consistent and expected way helps people become oriented with how to use a website and move around it. For example, a design that includes a hyperlinked logo in the same place on every page should make sure it always points to the same destination. Or, maybe there is a standard masthead of navigational elements — they should be consistently positioned and labelled for your users. WCAG states that any navigational mechanisms repeated on multiple pages should be positioned in the same order.
Sufficient color contrast ratios between foreground content and its background
Color contrast refers to the difference in light between text (or any information) and its background. By using sufficiently-contrasting colors, a website's content is stark enough for most people to distinguish. For most text, a minimum contrast ratio of 4.5:1 is required. Check out these resources for more information about color contrast requirements and how to test:
- The Basics and Importance of Color Contrast for Web Accessibility
- The a11y® Color Contrast Accessibility Validator
Ability to customize color combinations is not prevented by websites or other tools or user agents
People with different visual acuity and visual perception may need or prefer to adjust content in a way that suits them and makes it more-easily readable. This includes the ability to change things like the color and contrast of the content presented, either through built-in standard tools like high-contrast mode on a computer or mobile device, or through more advanced technology. Therefore, its important that there is nothing about a website or app, or the tools or user agents it pulls in or presents, that interferes with that ability.
Read: Why Is It Important for Accessibility to Use Actual Text Instead of Images of Text?
Full keyboard navigation and operation, including visual focus indication
Many people can't or don't use a mouse and instead navigate with a keyboard, keyboard emulator, or other input device. This can be along with or independent of assistive technology like screen readers. That's why keyboard accessibility is foundational to digital accessibility.
- All elements and controlled that can be operated with a mouse must also be reachable and functional using only a keyboard.
- A keyboard user must also have a sufficiently-visible indicator to show them which element is currently receiving focus.
Achieving these checkpoints is critical to achieving digital accessibility.
Read: Give Yourself an Accessibility Test: Don't Use a Mouse | Web Design and Accessibility: Basics Every New Designer Should Know
Our four-point hybrid testing
We believe our four-point hybrid testing provides the best path to achieving, maintaining, and proving digital compliance. Our comprehensive testing combines the best of human and artificial intelligence. Learn more about our testing methodology.
Talk to us for help making your digital presence accessible
Contact us to learn all the ways we can put our testing and support strategies to work for you. Or, get started with a free and confidential website accessibility scan.
