WCAG Master Guide: Adaptable Content

Not everyone perceives content in the same way, particularly when they have a disability. Where one person may be able to listen to someone speaking on video, another would rely on captions to understand the content.

For this reason, the Website Content Accessibility Guidelines (WCAG) states that your online content needs to be adaptable. This ensures it is perceivable to all. 

What is Adaptable Content?

Creating adaptable content means making your content available to website visitors in various formats. For example, audio content can be presented in a simpler visual layout while still conveying the same message. 

Adaptable content can easily be determined by assistive technology. Content needs to be structured in such a way that no matter how a disabled user chooses to interact with it, they can fully perceive it.

The success criteria for adaptable content relates to:

• The way parts of a web page are organized in relation to each other.
• The way a collection of web pages is organized.
• How content is rendered. 

WCAG Adaptable Content Success Criteria

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

Info & Relationships

Any information contained in content and the relationships between them should be preserved even when the presentation format changes. This applies to content that needs to be read by assistive technology such as a screen reader, or if a user applies their own style sheet to a web page. The overall meaning of your content should remain. 

Keep in mind that website visitors with visual or hearing disabilities rely on various cues to engage with and perceive content. Examples of cues include:

• Paragraphs separated by blank lines.
• Headers that indicate important information or the start of a new section on a page.
• A change in voice pitch to indicate new information or a quote in a video. 

You can preserve the meaning of your content and how it’s perceived by focusing on how someone may access it. 

By accessing your content using different modalities, you can easily determine whether your content is both adaptable and perceivable to all users. Along with testing your content, you will also need to make some judgment calls. Can a relationship be programmatically determined or does it need to be presented in text? 

Color is the only value that does not need to be programmatically determined because colors are linked to hexadecimal values. This means a screen reader would read out a hexadecimal value, which wouldn’t make sense to a user. 

Meaningful Sequence

Even when content needs to be displayed in a different format, the reading order needs to be preserved. Without applying a meaningful sequence to your content, assistive technology might read it out in the wrong order, confusing your website visitors.

In terms of HTML, elements such as tables and ordered lists are considered meaningful sequences. However, an unordered list is not. When it comes to elements like your navigation, the order wouldn’t necessarily affect the meaning of your content.

A particular linear order is only required on a page when it affects the meaning of your content and there’s no one correct order either. It all depends on the type of content you have on your site.

It’s important to evaluate all of the content on your site to determine whether the sequences you are using would impact perceivability based on how a user accesses it. 

Sensory Characteristics

You cannot solely rely on sensory characteristics such as shape, color, orientation, and sound to help a user perceive your content. 

Many online users are unable to perceive shape or position due to the assistive technology they rely on. For this reason, it’s important to always provide additional information to clarify instructions on a page. 

For example, using a green arrow to indicate the next page of a survey means someone would need to be able to perceive shapes and colors to know what steps to take next.

However, adding text-based instructions at the bottom of each page next to the arrow will ensure that assistive technology can better guide a user on the next steps. 

Orientation

Content should never be limited to one type of orientation such as portrait or landscape unless that orientation is essential.

Some users who access your website are using a device that’s mounted in a fixed position, which means they cannot change the orientation. Your website should automatically pick up on a user’s preferred orientation and display your content accordingly. 

The only exception is if a particular content piece can only be correctly perceived in a particular orientation. 

Identify Input Purposes

This particular success criterion is related to collecting user data with the help of forms. To meet this requirement, you would need to clearly explain what information is required for each field in a form. You should also indicate whether the information is optional or required. 

Your form labels and instructions need to be clear. Simply labeling a form as “Email” does not explain whether you require a user’s email or that of someone else. 

It’s also recommended that you make use of the autocomplete attribute technique where possible. This allows browsers to autocomplete certain fields based on stored user input. This speeds up and simplifies the form completion process. 

Identify Purpose

The purpose of user interface components, including icons and regions need to be highlighted. The goal is to make content easier to operate and navigate.  

We often use icons and symbols to use the web. However, these elements might not be as clear and obvious to some people. For this reason, it’s important to outline the meaning of these components. 

Website owners need to programmatically associate the purpose of icons, buttons, links, and fields so that they can be determined by assistive technology. This can be achieved through semantics or metadata. 

Adaptable Content Best Practices

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

Test your content before it goes live. Before you take any website updates or new content live, test it using different modalities. Can your content still be perceived with the help of different types of assistive technology?

Clearly explain content relationships. The simpler and more obvious your content relationships are, the better. For example, if you’re highlighting required form fields with a red asterisk, make sure you’re providing a text explanation at the top of the form. For a form that has a checkbox, ensure this can be programmatically determined to ensure a user understands what to do. 

Consider all devices and orientations. The meaning and perceivability of your content shouldn’t change depending on the device. Regularly test your content using different devices and at various orientations. 

Don’t overcomplicate form fields. Keep your forms simple by not combining fields. For example, don’t ask a user to add both their name and email to the same field. 

Frequently Asked Questions