Skip to main content

Perceivable

Perceivable content is presented in a way that it can be accessed with more than one sense in order to account for both the needs of people with disabilities and those who are accessing the content in less than optimal environmental conditions. Learners with disabilities can use the accessibility features now built into many computers and mobile devices to adjust the presentation of information to suit their needs. For example, a learner who is blind can use screen reader software to hear the information in web pages and other documents read aloud, as demonstrated in this screen reader demonstration from the University of California at San Francisco. Similarly, a learner who is deaf can turn on the closed captions or access a transcript for a visual representation of the audio in a podcast or video. In each case, the information can be accessed in a way that makes it perceivable with more than one sense.

As capable as screen readers and other assistive technologies have become, they still depend on authors to properly code and format their content. Without features such as text descriptions for images or closed captions and transcripts for videos, content can remain inaccessible to some learners. Other practices, such as ensuring sufficient contrast between the text and its background, can reduce the effort required to perceive the information and make reading a more enjoyable experience.

The following techniques will help you make your content perceivable:

Accessibility

Access for all people, including people with disabilities, to web environments.

View in glossary

Audio

Digital form or representation of a sound which may be used for non-visual access to text and images.

View in glossary

Technology

Equipment or system where principal function is creation, conversion, duplication, control, display, interchange, transmission, reception, or broadcast of data.

View in glossary

The techniques are also summarized in a table with the corresponding Web Content Accessibility Guidelines for your reference.

Technique Benefits Learners Who Are Relevant WCAG Guidelines
Add alternative text to images and other visuals Blind and use a screen reader; on a slow connection with graphics turned off 1.1.1 Non-text Content (A)
Include closed captions for videos or provide a transcript Deaf or hard of hearing; learning English as a second language; accessing videos with poor sound quality or in loud environments 1.2.2 Captions (A)
Provide sufficient contrast between text and its background Have low vision; access content in bright lighting or with the screen brightness turned up 1.4.3 Contrast (Minimum) (A)
Make sure content does not rely on color alone Color-blind; have low vision 1.4.1 Use of Color (A)

Alt Tag (alternative text)

Brief description of a single image designed to be read by a screenreader as an alternative to the image.

View in glossary

Add alternative text to images and other visuals

Screen readers are not able to analyze an image to determine the information the image represents. However, if the image has a text alternative the screen reader can convey the information it contains to the reader.  The alternative text itself should be concise and focus on the information the image conveys, rather than its appearance. If the image is included in a hyperlink, the alternative text should reflect its function by indicating what will happen when the link is selected (the website or file that will open). For more guidance on how to write descriptive alternative text, review the following resources:

The way you add alternative text to an image will vary with the authoring tool:

A smiling student named Bailey uses speech to text to dictate a written assignment.

Closed caption videos or provide a transcript

Closed captions will make your instructional videos accessible to learners who are deaf or hard of hearing and thus cannot hear the audio. They may also help with understanding for other learners, including those learning English as a second language and those with limited literacy. Finally, they can make the content accessible even when the speakers don’t work or when the ambient sound is too loud or you need to be quiet (such as while studying at the library). Closed captions also help make your content easier to find on the Web, as search engines can index them for improved discoverability of your video content. This short video from the W3C summarizes the many benefits of including captions in your videos.

While sites such as YouTube can now automatically add captions to videos, the quality of the automatic captions varies greatly. Furthermore, the automatically created captions tend to lack features such as speaker identification that are required for clarity. The Described and Captioned Media Program provides a guide to Quality Captioning that addresses these and other requirements for delivering quality captions.

For additional information on how to add captions to your videos, review the following resources:

Accessible Educational Materials (AEM)

Print- and technology-based educational materials designed to be usable across the widest range of individual variability.

View in glossary

The importance of transcripts

Some learners may have sign language as their first language, and this can impact their ability to process the information in captioned videos. Transcripts can help these learners receive the same information in a format that may be easier for them to understand, and they also provide access for learners who are both deaf and blind. Finally, starting with a transcript will help you get a headstart with captioning your videos. YouTube can take the text from a transcript and add the required timings to convert it into captions.

Provide sufficient contrast between the text and its background

Text with low contrast may result in learners having to strain to read the content. With good contrast, they can instead focus their energies on gaining a better understanding of the information. This short video from the W3C explains the importance of good color contrast.

The minimum recommended contrast ratio for text under the Web Content Accessibility Guidelines (WCAG)  is 4.5 to 1. Larger text, such as a heading, can have a lower contrast ratio of 3 to 1 if it meets the size requirements under WCAG: 14 points (about 19 pixels) or larger if the text is bold, or 18 points (typically 24 pixels) if it is regular text. A number of free color contrast checkers are available to help you select color combinations that meet the minimum color contrast ratios:

Some tools like the Colour Contrast Analyser include a color picker you can use to select the color values you want to compare, or you can use the free Colorzilla extension for Google Chrome or Firefox to select colors on web pages.

Two line charts displayed in grayscale. One uses color alone and the other adds shapes to make the trend lines easier to distinguish with color removed.

Make sure content does not rely on color alone

Color is an important asset in design and it helps add aesthetic appeal. However, learners do not always perceive color in the same way. Some learners may have difficulty seeing certain colors due to color-blindness or low vision. To account for these challenges, you should consider adding another visual cue to make information distinguishable without the need to perceive color. This additional cue could be an icon or a label to accompany color coding. Penn State University has created a page with several good examples of using color coding with additional cues.

Color is often used as the only means for differentiating items in more complex visuals such as charts and graphs.  Differences in line style or the addition of shading, shapes or text labels can improve the accessibility of these visuals. One quick way to check that you are not relying on color alone is to turn on the grayscale display mode that is available on many operating systems as you inspect your visuals.

When creating your charts and graphs, use the formatting tools in your authoring application to add text labels or change the style: