Success Criterion 1.1.1 Non-text Content Level A

How to Meet this Success Criterion

In order to meet this success criterion, all non-text content needs to have a text alternative.

All Images, Animations, Audio and Video content need to have a descriptive text equivalent.

Please Note: Exceptions for this rule are controls (covered in guideline 4.1), time based media (covered in guideline 1.2), non-text content in online tests, sensory non-text content, captcha, and decorative images.

HTML and Design Examples for SC 1.1.1 Non-text Content

The HTML and Design examples covered here include images, logos, icons, decorative images, image maps, animation, and audio.

We will be adding new examples for captcha and video in the near future. In the meanwhile we hope the examples provided here will help explain some of the nuances of this success criterion.

Sign up to get notified and we will email you when we add new examples.

Example: Standard Image

Portrait of young woman

A standard image of a beautiful young woman. The short text alternative describes the image.

    
<img src="/images/1_1_1/young-woman.jpg" alt="Portrait of young woman">

Please Note: additional information is not needed to describe this image, since the photo is a generic stock photo and doesn't depict a known person.

Example: Image of Known Person

Portrait of Albert Einstein

An image of a known person. The short text alternative tells the name of the person.

    
<img src="/images/1_1_1/abert-einstein-head.jpg" alt="Portrait of Albert Einstein">

Please Note: additional information can be used as part of the alt text as shown below:
alt="Portrait of Albert Einstein, a German-American physicist, Princeton New Jersey, 1947"

Example: Image of Known Site

Eiffel Tower

An image of a known site. The short text alternative depicts the name of the site.

    
<img src="/images/1_1_1/eiffel-tower.jpg" alt="Eiffel Tower">

Please Note: additional information can be used as part of the alt text as shown below:
alt="The Eiffel Tower Paris France during Sunset"

Example: Image with Text

books, chalk, ABC written on blackboard

An image with text in it which cannot be done with HTML alone becomes an exemption of success criterion 1.4.5 Images of Text.

In this example we see an image which has the letters "ABC" written on the blackboard. The text alternative describes the image contents and the text inside the image.

    
<img src="/images/1_1_1/abc-books-chalk.jpg" alt="books, chalk, ABC written on blackboard">

Example: Linked Image

White Blue and Purple Asics Running Shoes

A linked image a running shoe which brings to the user to another page with more information of the shoe. The text alternative describes the product shown on the link's landing page.

    
<img src="/images/1_1_1/asics-running-shoe.jpg" alt="White Blue and Purple Asics Running Shoes">

Example: Linked Image with text next to it

Gray Mercedez Benz Amg

An image and adjacent text both link to the same destination page. Both elements should use one link and the image alt tag can be left empty since the text inside the the <a> tag services as the text alternative for the image.

    
<a href="mercedez-benz-amg-gray.html"><img src="/images/1_1_1/mercedez-benz-amg-gray.jpg" alt="">Gray Mercedez Benz Amg</a>

Example: Linked Logo

Accessible Website Training Home

A linked logo brings to the user to the homepage of a website. The short text alternative describes the logo text and appends the link destination term "Home".

    
<a href="/"><img src="/images/1_1_1/awt-logo.jpg" alt="Accessible Website Training Home"></a>

Example: Linked Logo with "Home" text next to it

Accessible Website TrainingHome

A linked logo brings to the user to the homepage of a website. Since the keyword "Home" is part of the HTML link text, the text alternative only needs to include the logo text.

    
<a href="/"><img src="/images/1_1_1/awt-logo.jpg" alt="Accessible Website Training">Home</a>

Example: Linked Logo with full logo text and "Home" keyword next to it

Accessible Website Training Home 

    
<a href="/"><img src="/images/1_1_1/awt-logo.jpg" alt="">Accessible Website Training Home</a>

Example: Linked Icon

Print this page

A linked icon by itself. The short text alternative describes the function of the linked icon.

    
<a href="javascript:print()"><img src="/images/1_1_1/print-icon.png" alt="Print this page" class="icon"></a>

Example: Linked Image Map

1 Bedroom apartment floor plan. Select a room for more details. Bedroom Bath Living Room Kitchen

A linked image map of an apartment floor plan gives the user the ability to click each room and navigate to a custom page with details on that room.

The text alternative of the image describes the overall image map.

Each area tag inside the image map has its own alt text describing the link destination of the clickable area of the image map.

Each image inside the image map has its own alt text describing the link destination of the clickable area of the image map.

    
<img src="/images/1_1_1/1-bedroom-floor-plan.png" usemap="#image-map" alt="1 Bedroom apartment floor plan. Select a room for more details.">
<map name="image-map">
    <area target="_blank" alt="Bedroom" title="Bedroom" href="1_1_1/bedroom.php" coords="347,209,3,1" shape="rect">
    <area target="_blank" alt="Bath" title="Bath" href="1_1_1/bath.php" coords="602,209,350,2" shape="rect">
    <area target="_blank" alt="Living Room" title="Living Room" href="1_1_1/living-room.php" coords="347,435,5,210" shape="rect">
    <area target="_blank" alt="Kitchen" title="Kitchen" href="1_1_1/kitchen.php" coords="602,436,349,209" shape="rect">
</map>

Example: Decorative Image

A decorative image of a separator line used to separate content on a web page. The text alternative is left blank.

    
<img src="/images/1_1_1/separator-line.jpg" alt="">

Example: Grouped Images

Ratings: 3 of 5 hearts

A group of heart images depicting a rating. The text alternative describes the ratings.

    
<p>Ratings: 
    <img src="/images/1_1_1/full-heart.jpg" alt="3 of 5 hearts">
    <img src="/images/1_1_1/full-heart.jpg" alt="">
    <img src="/images/1_1_1/full-heart.jpg" alt="">
    <img src="/images/1_1_1/empty-heart.jpg" alt="">
    <img src="/images/1_1_1/empty-heart.jpg" alt="">
</p>

Please Note: the alt text is set on the first image of the group only, all other alt tags are left empty.

Example: Complex Image

Bar chart showing products sold by team and year: Team USA sold 24 products in 2016 and 89 products in 2017, Team Europe sold 36 products in 2016 and 24 products in 2017, Team Asia sold 12 products in 2016 and 37 in 2017

A complex image of bar chart. The text alternative describes the image in detail.

    
<img src="/images/1_1_1/bar-chart.gif" alt="Bar chart showing products sold by team and year: Team USA sold 24 products in 2016 and 89 products in 2017, Team Europe sold 36 products in 2016 and 24 products in 2017, Team Asia sold 12 products in 2016 and 37 in 2017">

Example: Same Image - 2 Different Pages

A linked image of a sound mixer is used on two different pages of a website. The text alternative is different matching the content of the linked target page.

Example: Page 1 Target Content is "Mixing Live Sound"

Mixing Live Sound 
 
<a href="1_1_1/mixing-live-sound.php">
    <img src="/images/1_1_1/audio-mixing-board.jpg" alt="Mixing Live Sound">
</a>

Example: Page 2 Target Content is "Recording Services"

Recording Services 
   
<a href="1_1_1/recording-services.php">
    <img src="/images/1_1_1/audio-mixing-board.jpg" alt="Recording Services">
</a>

Example: Animation

Animation of an engine turbine motor, for more information read the tutorial on engine turbine motors

The animated image of an engine is part of a tutorial describing how the engine works. There is no audio with the animation. All you need to add is a text alternative on the image which includes a brief description of it and mentions additional information is included in the tutorial text.

    
<img src="/images/1_1_1/engine-turbine.gif" alt="Animation of an engine turbine motor, for more information read the tutorial on engine turbine motors">

Example: Audio Recording of a Speech

Farewell to Baseball Speech by Lou Gehrig
Transcript of the speech

A link of a recording of a speech with the title of the speech used as the link text.

Following the link you will need to also add a link to the transcript of the speech. You don't have to repeat the title in the transcript link since it directly follows the recording link.


<a href="/audio/1_1_1/FarewelltoBaseball-1939.mp3">Farewell to Baseball Speech by Lou Gehrig</a>
<a href="1_1_1/lou-gehrig-speech-transcript.php">Transcript of the speech</a>

Example: Audio Recording of a Speech using HTML5 <audio> tag

Farewell to Baseball Speech by Lou Gehrig

Transcript of the speech

An HTML audio widget of a recording of a speech with the title of the speech in the label for the audio tag.

Following the HTML tag you will need to also add a link to the transcript of the speech. You don't have to repeat the title in the transcript link since it directly follows the audio tag.


<h4 id="farewellToBaseBallAudio"> Farewell to Baseball Speech by Lou Gehrig</h4>       
<audio aria-label="farewellToBaseBallAudio" controls> 
<source src="/audio/1_1_1/FarewelltoBaseball-1939.mp3" type="audio/mp3">
<source src="/audio/1_1_1/FarewelltoBaseball-1939.ogg" type="audio/ogg">
    <p>Your browser doesn't support HTML5 audio. Here is a <a href="/audio/1_1_1/FarewelltoBaseball-1939.mp3">link to the audio</a> instead.</p>
</audio> 
<a href="info/lou-gehrig-speech-transcript.php">Transcript of the speech</a>

Example: Winning and Losing Sound

You win, move up to the next level.

A winning sound is heard in an online game. The sound is paired with a text description explaining what the sound means, which is shown to the user whenever the sound is heard.

  
<audio controls> 
    <source src="/audio/1_1_1/pass-wave.mp3" type="audio/mp3"> 
    <source src="/audio/1_1_1/pass-wave.ogg" type="audio/ogg">
    Your browser does not support the audio element.
</audio>  
<img src="/images/1_1_1/smile-face.png" alt=""> 
<span> You win, move up to the next level.</span>

You lose, try again.

A losing sound is heard in an online game. The sound is paired with a text description explaining what the sound means, which is shown to the user whenever the sound is heard.


<audio controls>
    <source src="/audio/1_1_1/fail-wave.mp3" type="audio/mp3">
    <source src="/audio/1_1_1/fail-wave.ogg" type="audio/ogg">
    Your browser does not support the audio element.
</audio>
<img src="/images/1_1_1/frown-face.png" alt="">
<span>You lose, try again.</span>

Please Note: the smiling/frowning face icons are not a requirement for this rule, but a visual cue for the required text and a usability enhancement.

When using sound or image cues of any kind you will need to explain their function before the user first encounters them. The alt tag on the smiling and frowning face icons can be left blank since they are followed immediately by text describing their meaning.

Another reason for having both, images and text together, is to ensure the user notices when they appear on the screen. This is especially helpful if the user does not have sound or is hearing impaired.

Additional Resources for SC 1.1.1 Non-text Content

Latest Blog Posts