Skip to Content Innovation Studio Logo

Web Accessibility Guidelines v1.0 Foundations - Overview

Images

When using images on the web, you must provide an alternate way for users to understand its function and context.

Best Practices

Alt text

Every image needs an alternative text attribute alt. Alt text describes pictorial content in words. The alt attribute greatly helps people using assistive technologies and users of mobile devices with images turned off (to save data, for instance)

  • If the image is a link: The alt text describe where the link goes. For example, a logo that links to your home page should have alt="home page" or alt="Carnegie Museums of Pittsburgh logo - home page".
  • If the image is important to the context of the page: The alt text should contain a concise description of the image that is representative within the context.
    • The description should NOT include the phrase “image of” or “picture of”. Assistive technologies already do this.
    • Don’t put line breaks in alt text. It causes suboptimal effects when read by screen readers.
    • Make sure the description of the image is useful. For example, if the image is your logo your alt should be your company name and not “logo.”
  • If the image is decorative: If the image is purely decorative, or not necessary for understanding the content of the page, use an empty tag (alt="") to instruct a screen reader to skip it. If you do not, a screenreader will read the source tag which sounds awful.
  • If the image is a complex graphic: Each needs to handled based upon its context and use. See our below charts and graphs section and/or our SVG section.

Charts & Graphs

  • Color and size: For users who are not blind, ensure there is sufficient color contrast and text size in the chart/graph.
  • Description: Always include a text descriptions of a complex graphic. This description should relay and summarize the information that is visually displayed.

  • Figure: Use figure and figcaption tags for complex graphs, charts, and other graphics

    1
2
3
4
5
6
        <figure>
      <img src='/macaque.jpg' alt='Monkey in the trees'/>
      <figcaption> A cheeky macaque, Lower Kintaganban River, Borneo. Original by
      <a href ='http://www.flickr.com/photos/rclark/'> Richard Clark </a>
      </figcaption>
    </figure>

  • Tactile versions: If you truly want to be inclusive as well, you could have tactile versions of graphs/charts available at a published location.

Examples

Alt tag: “”

This background, or decorative image is completely skipped by a screen reader because it has an empty alt tag.

Innovation Studio - Home

Possible alt tags: “Innovation Studio - Home”, “Home”, “Innovation Studio Logo”

It is a good idea here, when you have a logo on every page of the site, to state the logo name/brand and where it redirects to on the site if clicked on.

Mobile phone web page of Carnegie Museums of Art and Natural History.

Possible alt tags: “Mobile phone web page of Carnegie Museums of Art and Natural History”, “Mobile web page about Carnegie Museums”

The extent and detail of your alt text comes down to how much information the image is relaying to sighted readers. If the image is integral to the content, the alt text should be equally expressive.

Cat rolled up in a piece of paper

Possible alt tags: “Cat rolled up in a piece of paper”, “Cat burrito”, “Cute cat picture”

Alt tags are also important for sighted readers. If your image path ever changes, your alt tag will still show up on the page, and no loss of information will occur.

Tools & Resources