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)
Make text readable and legible Have low vision, learning or cognitive disabilities 1.4.8 Visual Presentation (AAA)

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:  

Make the text readable and legible

Readability refers to the way words and blocks of text are arranged on the page, including the spacing between lines of text and how text is aligned.  Legibility refers to how well individual characters can be distinguished from each other, including the selected fonts and any styling applied to them. Improving the readability and legibility of your content can reduce the effort required for readers to process and understand information.    

Preferences for both readability and legibility vary across readers, but over time some best practices have been identified.

For readability, these include:

  • Left align blocks of text. Full justification removes the ragged right edge for a neater appearance, but it creates uneven spacing between the words. The result is distracting  “rivers of whitespace” that run down the page where extra spacing has been added. Full justification can also result in some words being spaced too closely together, making it more difficult to distinguish individual words.
  • Provide extra spacing between lines of text to avoid the crowding some readers may experience, where the lines appear to blend with each other. The recommended best practice is to use line spacing of at least a space and a half (1.5X).  
  • Limit the width and length of blocks of text. For width, the recommendation is to keep it to no more than  80 characters. A shorter line length will make it easier for the reader to continue on the next line. Similarly, long blocks of text can tire out some readers who take longer to read and need frequent breaks. Consider breaking up long paragraphs, and using lists and headings to make the content easier to scan.

For legibility, best practices include:

  • Limit the number of different fonts and styles used in a single document. This will result in a simpler presentation that will be easier to process for learners with cognitive challenges.
  • Use sans-serif fonts for body text. Sans-serif fonts, such as Arial or Verdana, lack any  ornamentation at the end of their strokes. The lack of ornamentation increases the space between the letters and makes the text easier to read, especially at smaller sizes.
  • Avoid using italics or all caps for emphasis. With italics, the letters can appear to run into each other for some readers, making the text harder to read. Bold is a better choice for highlighting (but remember that screen readers do not announce changes in styling by default). With all caps, it is more difficult to recognize the words because all the letters are the same height. It can also come across as a form of “shouting.”
  • Use a good baseline text size. While the text size is often a customizable user preference, it is a good idea to start with a good baseline size. The American Printing House for the Blind recommends 12pt as the smallest text size to use (with 18pt as the starting point for large print).

For additional information about legibility and readability, visit:

Individuals with Disabilities Education Act (IDEA)

Federal law governing rights of children with disabilities to receive free and appropriate public education in least restrictive environment.

View in glossary

American Printing House for the Blind (APH)

Largest non-profit organization creating products and services for people who are visually impaired.

View in glossary