Development & Testing for Diverse Abilities: Visual

This blog series, Development & Testing for Diverse Abilities, will explore the needs of users with auditory, cognitive, visual, and mobility impairments and equip you with the knowledge and tools to create digital experiences that are more accessible and enjoyable for all. Each post will focus on a specific disability, highlighting website development best practices and suggestions for testing for compliance.

This is the fourth and final post in the series. You'll find the third post here Development & Testing for Diverse Abilities: Mobility.

Visual

Web users with visual impairments often adjust how websites appear to suit their needs better. Many rely on assistive technologies to convert web content into formats they can perceive, like text-to-speech, customizing text size, color, font choice, spacing, or reading text using a screen reader or refreshable Braille.

What Can Developers Do?

For websites to work well with assistive technologies and different browsing methods, developers need to separate how things look (presentation) from how they are coded (structure). A clear structure, written in proper code, allows web browsers and assistive tools to interpret the information and present it in ways that work best for everyone.

Use Proper Contrast

- Normal-size body text and images of text must have a contrast ratio of at least 4.5:1. Large-scale text and images of large-scale text must have a contrast ratio of at least 3:1. Large-scale text is defined as 14 points (typically 18.66px) and bold or larger, or 18 points (typically 24px) or larger.
- In addition, links should be underlined by default and must have at least 3:1 contrast with the surrounding body text. A non-color indicator (typically underline) on mouse hover and keyboard focus is also required.

Don't rely solely on color to convey meaning

- People with color vision deficiency (CVD) may struggle to tell the difference between some colors. The most frequent type is red-green color blindness, where reds and greens appear similar.
- Tools like Color Safe can help you create a color palette for your designs that will be more accessible to more people.

Text

- Fonts - Make sure to use accessible fonts. To ensure you use accessible fonts, compare your website's font(s) to those fonts included in this chart from Penn State. This article also includes a detailed explanation of what makes some fonts more accessible than others.
- Color - See "Use Proper Contrast" above.
- Spacing - Remember that users may override the spacing you have set on your webpage by using their own stylesheet, bookmarklet, or extension. If your pages are not built to allow for this, text can be cut off or overlap in a heading, making it unreadable. See W3C's Technique C36: Allowing for text spacing override for details on how to develop your website to allow for space overrides.
- Resizing - Make sure you can double the size of your text without assistive technology and without losing functionality or readability.
- Reflow - Reflow refers to the orientation of your webpage - portrait or landscape. For example, when your cell phone is vertically positioned, your content is in portrait orientation. When you turn your cell phone to the horizontal position, your content is now in landscape orientation. Ensure your text reflows within the viewport and does not require 2-dimensional scrolling.

ALT text - Alternative text or ALT text is used primarily by screen reader and refreshable Braille users to interpret non-text content like images or graphs. For information on writing good ALT text, see the blog post "There's No Alternative to Good ALT Text."
Explicit and descriptive link labels - Descriptive text is the text that can be seen, perceived, and understood by website users while conveying the purpose and destination of the link. For more on constructing good descriptive, discernible link text, see the blog post "The Crucial Role of Discernible Text in Links."
Keyboard accessible—It is critical for people with visual disabilities to ensure that your website can be navigated using only a keyboard. Navigating a website with only a keyboard means the user does not require hand-eye coordination. Any element on a page that requires interaction should be keyboard accessible. Some components, like links and buttons, are natively focusable.
Audio descriptions - Audio descriptions are audio-narrated descriptions of the critical elements in television / movie programming. For example, "She enters a room with purple walls and clutter all over the floor, and walks a few steps, not noticing the backpack in front of her."
~ Perkins School for the Blind

What Can Website Managers Do?

Website managers play a critical role in managing and testing website accessibility and keeping current with accessibility standards.

This section will describe testing best practices to help managers proactively maintain visual accessibility on their websites to ensure everyone has a smooth user experience.

Use Proper Contrast - Many automated testing solutions, like DubBot, can test your website for proper contrast between text and background and link colors. Several extensions and tools are available for testing on the fly, as well as tools available via a website. WebAIM offers its Contrast Checker and Link Contrast Checker.
Don’t rely solely on color to convey meaning - This is a manual review. Look over your website for any elements, especially charts, graphs, and online quizzes or tests that may use color only to convey information. For some what-to-do and not-to-do examples, check out Princeton’s article titled "Avoid Using Color Alone."
Text
- Fonts: To ensure you have accessible font styles, conduct a manual review of your website's font settings and compare them with the list of accessible fonts included in this chart from Penn State.
- Color - An automated solution, like DubBot, will test for proper contrast between your text, links, and background. See "Use Proper Contrast" above for more information and other testing tools.
- Spacing - To test for spacing override capabilities, set the zoom to 100%. Using a tool such as the Text Spacing Bookmarklet or a user-style browser plugin, apply different spacing metrics (height, letter, word spacing, etc.) and check that your text is not truncated or overlapping other content.
- Resizing - Resizing testing is easy. Set the zoom to 200% and check that your content is still functional and readable.
- Reflow - For reflow testing, use a cell phone or tablet to hold the device vertically and check that your content does not require 2-dimensional scrolling for viewing. Do the same with the device in the horizontal position.
ALT text - Automated solutions, like DubBot, can test for the presence of ALT text. However, to test correctly, you will also need to visually inspect the quality and correctness of your ALT text. You want to ensure that the text is not just the image filename and that it is descriptive and not repetitive of the surrounding text.

Explicit and descriptive link labels - Using an automated scanning tool like DubBot will enable you to expose links on your website that lack discernible text. Manual testing, specifically screen reader software, can assess how links are announced by screen reading software. For example, a link <a href="chocolatepierecipe.html">Pie Recipe</a> can be improved by adding the word chocolate <a href="chocolatepierecipe.html">Chocolate Pie Recipe</a>

Keyboard accessible - Testing keyboard-only navigation of your website is always manual. You will want to ensure that focus indicators are present and have proper contrast with the text and background. Also, make sure the navigation order is logical and follows the intuitive flow of the page. For a complete list of interactions to consider during testing, see the chart in "Keyboard Accessibility" from WebAIM.

Audio Descriptions - First, determine if your video contains visual elements that are essential to the context and require audio descriptions. Ensure the audio descriptions adequately describe all important visual content and that the recording is clear and audible.

By prioritizing visual accessibility throughout development and testing, you create an inclusive and usable website for everyone. And it can also improve SEO and user engagement.

By following these steps and utilizing the available resources, you can create a user experience that's clear, functional, and empowers everyone to navigate your web presence with ease.

WCAG Success Criteria for Visual Disabilities

Resources

This is the fourth and final post in the series. You'll find the third post here Development & Testing for Diverse Abilities: Mobility.