Accessible Images - WCAG 2.0 Ref 1.1.1

Images that convey simple information must be described with alternative text, or “alt text”. Alt text is a short, sweet description of the content of the image, added in such a way that is typically invisible to people who can see the image but is exposed to people who are using assistive technologies such as screen readers or Braille displays. Browsers also display alt text visibly if an image fails to load.

The description should convey the content and functionality of the image as concisely as possible to provide access to the content of the image without burdening users with superfluous details.

• Informative Images

  Images that represent concepts, information, or emotions, and are typically graphics, photos, and illustrations. The text alternative should be a short description conveying the essential information presented by the image.

  Informative Images Example

  <img src="blossoms.png" alt="Cherry trees in bloom on the Capitol Mall campus"/>

• Functional Images

  The text alternative of an image used as a link or as a button should describe the functionality of the link or button rather than the details of the image. Examples of such an image is a printer icon to represent the print function.

  Functional Images Example

  <a href='test.html'><img src="testbtn.png" alt="Open the test documentation to view examples."/></a>

• Images of Text

  Readable text is sometimes presented within an image. If the image is not a logo, avoid text in images. However, if images of text are used, the text alternative must contain the same words as in the image.

  Images of Text Example

  <img src="childnutritionicon.png" alt="Child Nutrition Program"/>

Do NOT Use Title Attribute in HTML

In HTML, avoid using the title attribute in the <img> element. See Title Texts Suck at the Axess Lab website.

Adding Alt Text in Word Processing Programs or Rich Text Editors

Word processing applications such as Microsoft Word and Google Docs; as well as online rich text editors such as those used for adding content to Canvas, WordPress, or Drupal; all include support for alt text on images. When adding an image to a web page or document, simply look for a tab or field labeled “Alt text” or equivalent, and enter a short description into the field. If you are not prompted for alt text when adding the image, right click on the image after it’s been added and select “Image Properties” or equivalent, then look around in the image properties dialog for an “Alt text” prompt.

Updated 9/19/2019 - Complex images on web pages, such as graphs, charts, or diagrams, may contain too much information to be effectively described using text in an ALT attribute. Instead, these images must be described with a longer description to provide equivalent access to the information the image. The question to ask is: Given the current context, what information is this image intended to communicate? That same information must be provided to people who are unable to see the image. This longer description can include any structure necessary to communicate the content of the image, including headings, lists, and data tables.

See the following facts that lead to our Best Practice solutions...

• longdesc is in HTML4, but not HTML5 – it is now obsolete and they say to just use a regular link;
• accessibility rules say to use HTML5 remedies first, then ARIA... which implies that the HTML5 figure with figcaption tags are the first option, followed by one of the ARIA options;
• screen reader test results (as of April 2019): aria-labelledby with IMG tag didn’t error but reported 9 screen reader problems, aria-describedby with IMG tag errored and reported 34 screen reader problems

Best Practice for Complex Images

One of the main directives of accessibility is to offer solutions that are the same for all, so therefore it is best practice to display your complex image details on the same page as the image. We are directed to use HTML5 techniques over ARIA techniques when possible so the figure and figcaption tags should be your first option. If the page already contains the text, ARIA is fine to use via an aria-labelledby. See the following examples of both methods...

1. Method 1 (preferred): HTML5 with figure and figcaption

   The most simple and correct solution is to associate a caption to the image with a FIGURE and FIGCAPTION tags.

   <figure>
     <img src="cip.png" class="img-responsive center" alt="Flowchart" />
     <figcaption>
         School and district continuous improvement process. Set the direction/vision. assess needs. create strategic plan. implement strategic plan. monitor and adjust.
     </figcaption>
   </figure>

   

2. Method 2: ARIA-LABELLEDBY

   If the text already exists somewhere on the screen, you should label an ID attribute in a tag that completely wraps the text (like P or DIV).

     <img src="figure1.png" alt="Oregon State Board of Education Poster" aria-labelledby="myAriaDetails">
     <div id="myAriaDetails">
       <h2>Oregon State Board of Education</h2>
       <h3>Mission</h3>
       <p>The mission is to...</p>
       <h3>Vision</h3>
       <p>The vision is to...</p>
       <h3>Values</h3>
       <p>The values are to...</p>
     </div>
   

    

3. Method 3: External Link to Complex Image Details

   It is preferred to list your complex details on the same page as the image with either Method 1 or 2, but if those methods don't work you can link to details on an external location.

   Link to Complex Image Details Example

   <a href='compleximagedetails.html'><img src="complexchartdetails.png" alt="Open chart details."/></a>

Complex Image References

• Best Practices via Mozilla
• figure Tag at W3 Schools
• W3C Details
• WebAim Details

If an image is purely decorative, and does not covey meaning, there are several methods for telling screen readers to ignore the image:

• Avoid using the HTML <img> element for decorative images; instead present the image as a background-image using cascading style sheets (CSS).
• If using the HTML <img> element, add an empty alt attribute (alt=""), like <img src="myimage.jpg" alt=""/>.
• If using the HTML <img> element, add the following ARIA attribute: role="presentation", like <img role="presentation" src="myimage.jpg" alt=""/>.

As of 12/24/2019 - by default, when you insert an image via the CMS - the image name (like myImage123.jpg) is inserted as the ALT Text (like ALT="myImage123.jpg")... which is an accessibility violation. Replace the default image name with valid ALT Text. If the image is decorative, simply clear the field which will result in ALT="". Do NOT put "" in the field... as that would result in ALT="""".