Unit 11: Intro to Photoshop
Unit 12: Design Accessibility
Unit 13: Product Design Thinking
Unit 14: User Experience Design
Unit 16: Introduction to Design Portfolios
Unit 17: Portfolio Development
Unit 18: Personal Branding
Unit 19: Case Studies
Unit 20: Portfolio Website Design
Unit 21: Career Coaching
2 of 2

Accessibility in Images

Images are inherently inaccessible to people who are unable to see them. This lesson covers how to make images accessible depending on the purpose and complexity of the image.

Techniques

For each image in your web page or digital document, determine which of the following categories best describes your image:

  1. The image conveys simple information (e.g., a photograph, icon, or logo)
  2. The image conveys complex information (e.g., a chart or graph)
  3. The image is purely decorative, not informative

Images that Convey Simple Information

Images that convey simple information must be described with alternative text, or “alt text.” Alt text is a short 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.

Adding Alt Text in HTML

Remind developers to add alt text to the <img> element using the alt attribute in HTML.

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.

Images that Convey Complex Information

Complex images, such as graphs, charts, or diagrams, may contain too much information to be effectively described using alt text. Instead, these images must be described with a long description. Long description is a more detailed description that provides 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. A long description can include any structure necessary to communicate the content of the image, including headings, lists, and data tables.

Images that are Purely Decorative

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="").
  • If using the HTML <img> element, add the following attribute: role="presentation.”

These are the jobs of a developer and designers don’t have to worry about that, but it is beneficial for designers to understand what is needed.

Scroll to Top