Last modified on Fri 17 Mar 2023

"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:

<div role="navigation" aria-label="Primary">
   <!-- ... -->
<div id="navigation_id">Main navigation</div>

<div role="navigation" aria-labelledby="navigation_id">
   <!-- ... -->
<img src="path/to/yellow/cat/image.jpg" alt="Yellow cat" />
<!-- 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="" />

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 ...

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

<label for="firstname">First name:</label> <input type="text" name="firstname" id="firstname" />
<input name="search-input" aria-labelledby="search-button" />
<button id="search-button" type="submit">Search</button>
<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>
<span id="l2" tabindex="-1">days in advance</span>
<button aria-label="Close" onclick="">
 <!-- close icon -->
<!-- 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;
<img src="squiggle.gif" width="20" height="20" alt="" />

WordPress Blocks and components from the Eightshift Development Kit provide attributes and options for setting alt text, labels and aria-labels where applicable.

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:

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"


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" />


The video block from Eightshift Development Kit supports captions and other video text tracks out of the box.

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:

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:

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:


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:

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:

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 -->
<!-- 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.

WordPress The Eightshift Development Kit starter theme provides good semantics out of the box. Feel free to reference it!

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.


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.

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.