When using images on the web, you must provide an alternate way for users to understand its function and context.
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="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.
figcaptiontags for complex graphs, charts, and other graphics
- Example: from HTML5 Doctor:
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.
Alt tag: “”
This background, or decorative image is completely skipped by a screen reader because it has an empty alt tag.
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.
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.
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
- Image Alt Text Vs. Image Title: What’s the Difference?
- Three common accessibility pitfalls for developers: text alternatives
- Short note on use of alt=“” and the title attribute
- A Guide to Making Documents Accessible to People Who are Blind or Visually Impaired
- When should alt text be blank?
- Alternative Text Best Practices from WebAIM