1.1.1 - Non-text content
The intent of this success criterion is to make information conveyed by non-text content accessible through the use of a text alternative. Text alternatives are a primary way for making information accessible because they can be rendered through any sensory modality (i.e. visual, auditory or tactile) to match the needs of the user. Providing text alternatives allows the information to be rendered in a variety of ways by a variety of user agents.
Ways to meet the criterion
Alt attribute a.k.a. “Alt text”
Make sure that you use text alternatives when needed to identify the purpose of non-text content and identify items that otherwise rely only on sensory information (i.e. seeing and hearing) to be understood. Do not confuse alt attribute with a tooltip. They are a primary way for making information accessible by matching the needs of a user.
The alternate text allows:
- a blind individual to have the text read aloud through synthesized speech
- a deaf individual to have the text displayed so that he or she can read it i.e. audio transcript
Ensure an alt attribute is:
- accurate and equivalent in presenting the same content/function of the image
- succinct, ideally 100 characters or less
- NOT redundant or provide the same information as page text
- NOT use the phrases "image of...", “picture of…” or "graphic of..." to describe the image
Provide an alt attribute:
- for all image elements unless they are decorative (alt=”” for decorative images)
- to present same information i.e. picture shows how a knot is tied
- describe how to tie the knot
- NOT what the picture looks like
- for an accepted name or a descriptive name i.e. Mayor Jyoti Gondek
- that serves the same purpose i.e. image shows a magnifying glass
- add alt="search"
- NOT alt=“magnifying glass”
Link images
Images that are the ONLY thing within a link must ALWAYS have an alternative text as well as:
- image map hot-spots
- image buttons
Longdesc
Do NOT use longdesc attribute as that is no longer supported by browsers. For non-text content that requires longer explanations provide information:
- near the content i.e. explaining significance of chart values
- on another web page by providing a link at the top of the description