"Information and user interface components must be presentable to users in ways they can perceive." - WCAG2.1

Text Alternatives

"Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols, or simpler language." - WCAG2.1

Non-text Content

By definition, non-text content is any content that is not a sequence of characters or where that sequence is not expressing something in human language. Examples of this content are images, emojis, inputs, videos, etc. To make the content perceivable, the content should be described.

If non-text content can be described with a short description without losing the meaning, then use one of the following techniques:

• provide a text description using the aria-label property

<div role="navigation" aria-label="Primary">
 <ul>
   <!-- ... -->
 </ul>
</div>

• provide a text description using aria-labelledby when a description is visible elsewhere in the document

<div id="navigation_id">Main navigation</div>


<div role="navigation" aria-labelledby="navigation_id">
 <ul>
   <!-- ... -->
 </ul>
</div>

• provide a text description using alt for images
  • Note that there's no need to place image, picture or similar wording in alt attribute as assistive technologies already know that this is an image.

<img src="path/to/yellow/cat/image.jpg" alt="Yellow cat" />

• use a text alternative on one item within a group of images that describes all items in the group

<!-- Assuming this is a group of images showing the same sofa from different angles -->
<div class="images">
 <img src="" alt="The new Kauch sofa" />
 <img src="" alt="" />
 <img src="" alt="" />
 <img src="" alt="" />
</div>

If non-text content is not possible to describe using a short description but rather requires a longer description (e.g., one or more sentences), then this description can be placed somewhere on the page and referenced using an aria-describedby property. The idea is if the non-text content is removed from the page, that page loses no information or function.

Labels need to describe the purpose of the form control, while the description can explain further the content. E.g., in the case of an image of a cat, the label could be "domestic cat" while the description could be "gray cat sitting on a black sofa next to a lamp".

In deciding what should be in the text alternatives, the following questions are helpful.

• Why is this non-text content here?
• What information is it presenting?
• What purpose does it fulfill?
• If I could not use the non-text content, what words would I use to convey the same function and/or information?

Questions copied from Providing long description for non-text content that serves the same purpose and presents the same information

E.g., to describe a painting.

<img src="ladymacbeth.jpg" alt="Lady MacBeth" aria-describedby="p1" />
<p id="p1">
 This painting dates back to 1730 and is oil on canvas. It was created by Jean-Guy Millome, and
 represents ...
</p>

If non-text content is a control or accepts user input, then the content can be described using one of the following techniques:

• use the label element if you need to describe a form control

<label for="firstname">First name:</label> <input type="text" name="firstname" id="firstname" />

• use aria-labelledby when you want to connect already visible description(s) to the content

<input name="search-input" aria-labelledby="search-button" />
<button id="search-button" type="submit">Search</button>

• use aria-labelledby when you want to describe a control or a user input using multiple text nodes

<label id="l1" for="f3">Notify me</label>
<select name="amt" id="f3" aria-labelledby="l1 f3 l2">
 <option value="1">1</option>
 <option value="2">2</option>
</select>
<span id="l2" tabindex="-1">days in advance</span>

• use the aria-label property when you need to label a control or a user input where the default accessible name is missing or does not accurately describe its contents

<button aria-label="Close" onclick="">
 <!-- close icon -->
</button>

• provide link text that describes the purpose of a link
  • link texts like click here are not accessible

<!-- bad -->
<a href="#">Click here</a> to find out more about birds.


<!-- good -->
<a href="#">Find out more about birds</a>

If the non-text content is a CAPTCHA then an alternative modality should be served, e.g., image CAPTCHA and audio CAPTCHA.

Lastly, if the non-text content should be ignored by assistive technology, either use CSS to include the image or set alt property to null.

<style type="text/css">
 body {
   background: #ffe url('/images/home-bg.jpg') repeat;
 }
</style>

<img src="squiggle.gif" width="20" height="20" alt="" />

Find more technics to satisfy the text alternatives here

Time-based Media

Provide alternatives for time-based media. - WCAG2.1

Audio-only and Video-only (Prerecorded)

In an audio-only presentation, information is a dialogue and/or sounds (both natural and artificial). To present the same information in an accessible form, it is required to create a document that presents the same information, usually in the form of a transcript. Read the full technique: "Providing an alternative for time-based media for audio-only content"

In a video-only presentation, information is presented in multiple ways, such as animation, text, graphics, actions, and expressions of people, animals, etc. To present the same information in an accessible form, it is required to provide an alternative presentation. To do so, there are two options:

1. create a document that presents the same information
2. create an audio file that presents the same information

The document and audio should contain the following:

• a long (audio) description of the content
• include all of the important information
• descriptions of scenery
• descriptions of actions
• descriptions of expressions

that are part of the presentation.

Read the full techniques: "Providing an alternative for time-based media for video-only content" and "Providing audio that describes the important video content and describing it as such"

Captions

Note: Captions should not be confused with subtitles. Subtitles provide text with dialogue only and do not include important sounds.

The objective of the success criteria is to provide an alternative way for dialog in audiovisual material. That way, people who have trouble with hearing, or are deaf, can perceive dialogue and important sounds visually. To accomplish that, we use either open or closed captions.

With open captions, all of the dialogue and important sounds are embedded (captions are always visible) as text in the video track. This means that additional tooling for captions isn't needed for captions to work.

On the other hand, closed captions do not require all users to watch the captions. Instead of embedding, a user agent can display the captions on the user request, which most of the user agents support - track support.

HTML5 track element enables us to implement one or more caption tracks per video element. More details on using the track element to provide captions can be found in the official WCAG techniques document.

<video controls src="video.mp4">
 <track kind="captions" srclang="en" src="video_en.vtt" />
</video>

Audio Description or Media Alternative (Prerecorded)

This Success Criterion intends to provide access to visual information in a synchronized media presentation. This mainly targets people who are blind or visually impaired access as they won’t be able to see the synchronized media, e.g., video. To accomplish that, Success Criterion offers two solutions:

• provide an audio description of a video;
• provide a text alternative for the synchronized media.

The audio description extends the original audio with information about the visual part. This is the most critical in long pauses in dialog; audio description then provides information about actions, characters, scenes, and on-screen text.

The following techniques describe how to accomplish the success criterion by provid[c][d]ing an audio description:

• Providing a second, user-selectable audio track that includes audio descriptions
• Providing a version of a movie with audio descriptions
• Providing a movie with extended audio descriptions

The second approach, a synchronized media in text form, describes all that is going on, following the content-running description. The alternative reads like something like a screenplay or a book. Unlike audio descriptions, it covers more than pauses; it covers actions and expressions of actors, visual context, etc.

The following techniques describe how to accomplish the success criterion by provid[e][f]ing a media alternative:

• Using a static text alternative to describe a talking-head video
• Placing a link to the alternative for time-based media immediately next to the non-text content

Adaptable

Create content that can be presented differently (for example, a simpler layout) without losing information or structure. - WCAG2.1

Info and Relationships

This Success Criterion intends to keep the information and relationship unchanged if the presentation format changes. For example, the presentation format changes can change if a user is using a screen reader.

Sighted users perceive information, structure, and relationships through various visual cues such as:

• headings are often in a larger, bold font
• a bullet precedes list items
• different background colors may be used to indicate that several items are related to each other
• etc.

For this information and relationships to be perceivable to all users, it is important to make them programmatically determinable, or available in text.

There are many ways to accomplish this success criterion, so we’ve extracted the most used ones. A full list can be found on WCAG 2.1 quick ref.[g]

Landmark roles, or just landmarks, identify the sections of a page and enable the user to navigate easily. There are 7 landmark roles:

• banner - a region that contains the prime heading or internal title of a page
• complementary - any section of the document that supports the main content yet is separate and meaningful on its own
• contentinfo - a region that contains information about the parent document, such as copyrights and links to privacy statements
• form - a region of the document that represents a collection of form-associated elements, some of which can represent editable values that can be submitted to a server for processing
• main - main content in a document
• navigation - a collection of links suitable for use when navigating the document or related documents
• search - the search tool of a Web document

To use landmarks, you can either set the applicable ARIA role explicitly or use an HTML element with the ARIA landmark as its implicit role.

<!-- Explicitly setting ARIA role -->
<div role="banner">A banner image and introductory title</div>
<!-- Implicitly setting ARIA role through semantics -->
<nav>...</nav>
<!-- Overriding the implicit ARIA role of the form element -->
<form role="search">...</form>

In case the page contains multiple landmarks of the same type, they should be labeled with aria-labelledby or aria-label.

Use semantic elements to mark up the structure of the Web content, as it provides information about the meaning behind your structural elements. In other words, use elements according to their meaning - not because of how they appear. Using semantically suitable elements will ensure the document’s structure is available to all users. Find more about using semantic elements to mark up structure and check out HTML5 semantics definition

Find more techniques in WCAG2.1 Quick Ref.

Meaningful Sequence

This Success Criterion intends to preserve the reading order of content when using different types of presentations, such as screen readers.

A sequence is meaningful if the order of content in the sequence cannot be changed without affecting its meaning. For example, if CSS is used to position a navigation bar, the main story on a page, and a side story, then the visual presentation of the sections does not need to match the programmatically determined order. This is because the meaning of the page does not depend on the order of the sections.

Find more techniques in WCAG2.1 Quick Ref.

Sensory Characteristics

This Success Criterion intends to ensure that all users, regardless of the user agent used, can perceive information without relying on one specific characteristic, e.g., shape or color.

For example, the next button on an online multi-page survey could be a right-pointing arrow. The arrow should be clearly labeled with e.g. "Next" and have a description that this button leads you to the next part of this survey. With this, a user can see, read (or hear) how to proceed.

Read more about Providing textual identification of items that rely only on sensory information to be understood.

Distinguishable

Make it easier for users to see and hear content including separating foreground from background. - WCAG2.1

Use of Color

Even though color is an important factor in a page's design, it is more important that all users (especially users with color deficiencies) can perceive information. The use of color becomes an issue when only color is used to convey the information. For example, a link in the text is only distinguished by a different color. To include all users, the link could be underlined as well. Another example would be form fields where fields in error state only have a color cue, such as a red border. To include all users, the error message could be shown or a suitable icon.

To avoid the importance of the color, the following techniques are provided by WCAG.

• the simplest solution would be to represent the same information using a text
  • Ensuring that information conveyed by color differences is also available in text
  • Including a text cue for colored form control labels
• provide at least a 3:1 contrast ratio to provide a better visual clue when only color is used for identification
  • Using a contrast ratio of 3:1 with surrounding text and providing additional visual cues on focus for links or controls where color alone is used to identify them
  • Relative luminance is used to express the contrast ratio.
• Use color and a pattern if color is used within an image to convey information
  • Using color and pattern
  • Ensuring that information conveyed by color differences is also available in text

Audio Control

This Success Criterion intends to enable screen reader users to mute the page audio on demand. The issue is that, nowadays, screen readers are software-based, which means that the same volume control is used for the page and the screen reader. Therefore, the user must be able to turn off the background sound - providing a control near the beginning of the Web page that turns off sounds that play automatically.

Playing a sound that turns off automatically within three seconds says that if there is any sound that is played automatically when visiting a page, that sound should stop within three seconds. In case the page needs an automatic sound on-page visit, a good practice can be to announce that in the first three seconds and require an action from a user to continue. For example, a Web page opens with instructions on how to get started: "To begin, press the enter key" - Playing sounds only on user request.