WCAG Master Guide: Distinguishable Content

As you browse the web, you may not think twice about whether you will be able to see and hear important content, but this is the reality for a number of online users.

The Website Content Accessibility Guidelines (WCAG) include several standards for distinguishable content that need to be considered during your accessibility journey. 

What is Distinguishable Content?

According to WCAG, any content on your site or mobile app needs to be easy to distinguish. Contrast is only one part of this and we’ve covered this topic in-depth in this Master Guide chapter.

Over and above contrast, the visual representation of your content, audio controls, images of text, and hover functionality all form part of this important WCAG standard. 

The idea is for any user to be able to clearly understand what they are hearing and seeing on your site by giving them more control over your site’s appearance and functionality with the help of assistive technology. 

WCAG Distinguishable Content Success Criteria

Here are the success criteria you would need to meet for distinguishable content in order to achieve Level A or higher.

Audio Control

If your website automatically plays audio for longer than 3 seconds, a user should have the ability to pause or stop it. They should also be able to control the volume of the audio. These options should all be independent, allowing a user to decide what they want to do. 

Website visitors who rely on screen readers will not be able to hear what their software is relaying to them if there are other sounds playing that cannot be stopped or paused. This is made even more difficult if someone needs to use the same controls to adjust the volume of your site and their software’s output. 

There is also an additional audio requirement for website owners who are aiming for Level AAA compliance.

Any pre-recorded audio-only content that contains primarily speech in the foreground, is not an audio CAPTCHA, and is not intended to be musical expression such as singing or rapping, needs to meet the following requirements:

• The audio cannot have background sounds
• Any background sounds can be turned off
• Any background sounds are at least 20 decibels lower than the foreground speech content. This is only applicable if background sounds are only occasional.

Visual Presentation of Content

How your content is presented will also determine how distinguishable it is. Here are some requirements to adhere to for Level AA compliance.

Reflow

Content that loses information or functionality when a user attempts to adjust it on their screens will result in non-compliance. Visitors also shouldn’t have to scroll in two dimensions unless it’s required for usage or meaning. Maps and games would be an example of this. 

If this is the case, vertical scrolling content should have a width of 320 CSS pixels, while horizontal scrolling content should have a height of 256 CSS pixels.

Text Spacing

Any content that was implemented using markup languages that support these text style properties, should not lose meaning or functionality when the following adjustments are made:

• Line height changed to at least 1.5 times the font size;
• Paragraph spacing adjusted to at least 2 times the font size;
• Letter spacing changed to at least 0.12 times the font size;
• Word spacing adjusted to at least 0.16 times the font size.

Content Hover on Focus

Should any extra content be triggered by hovering a mouse pointer or keyboard focusing on an element, the following requirements need to be met:

Dismissible. Users should have the ability to dismiss any additional content without having to move their mouse pointer or keyboard focus. 

Hoverable. If additional content can be triggered with a pointer, a user should be able to move the pointer again without the content disappearing. 

Persistent. Additional content should remain visible until the hover or focus trigger is removed. 

These requirements are usually applicable to elements such as pop-ups, custom tooltips, and sub-menus. Some visitors may not mean to trigger an interaction or will have no idea why content has appeared. Pop-ups can also interfere with someone’s ability to complete a task, making your site inaccessible. 

Text Resizing

Website visitors should be able to resize text by up to 200 percent without needing to use assistive technology. Text resizing should not affect your content or the functionality of your site. These requirements won’t apply to captions or images of text though. 

Images of Text

The only time that images of text should be used is if it can be customized according to a user’s requirements or if that particular presentation is essential to the content. 

Text Blocks

This particular WCAG requirement is only applicable to website owners who want to achieve Level AAA compliance, which isn’t always necessary.

For the visual presentation of text blocks, you need to:

• Give visitors the ability to adjust foreground and background colors.
• Ensure text is not justified.
• Line spacing is at least a space-and-a-half within paragraphs, and paragraph spacing is at least 1.5 times larger than the line spacing.
• Text can be resized without assistive technology up to 200 percent in a way that does not require the user to scroll horizontally to read a line of text on a full-screen.

Distinguishable Content Best Practices

Distinguishable content is key to WCAG compliance. Here are a few best practices to keep in mind: 

Present your content in more predictable ways. Simplifying your menus and limiting the number of pop-ups on your site will make the user experience more predictable and accessible.

Opt for responsive designs. A responsive website is one that’s accessible across any device without your site losing meaning or functionality. 

Consider an accessibility overlay. Website overlays provide your visitors with some power over your site’s functionality, allowing them to adjust elements like contrast, line height, and font sizes. However, choose your overlay carefully to avoid slowing down your site. It should also be noted that an overlay is not a quick accessibility fix. In-depth remediation will still be required. 

Frequently Asked Questions