Accessible Web Images

What Is an Accessible Image?

All images on a web page should be related to and enhance the content.  The addition of alternative text or "alt" text gives a user who is blind or visually impaired access to information about an image.

Why Have Accessible Images?

Accessible images allow users who use assistive technologies equal access to information provided by an image.

Best Practices for Accessible Images

  • Add images if they are relevant to the content on the webpage.
  • The insertion point within a webpage where an image can be added should reside before or after a full sentence, not in the middle.
  • Do not place images in headings.
  • Write, concise, descriptive phrases or sentences for the alt text.
    • For example, "image28356" or "picture" will never be helpful alt text; however, "students meeting to plan Dillo Day" could be good alt text for a picture on the Office of Student Engagement web site.
  • Images should add to the content but should not be the content.
    • For example, don't use an image of a flyer in place of stating the flyer's essential information on the page.
  • Images with instructional text should include similar information in the alt text.
  • Images used as buttons to forms (e.g., "submit") should indicate in the alt text that they are forms.

Example of Images and Alt Text

An Instructional Image and Its Alternative Text

The web audience can read the text in this image, and assistive technology users can read the instructions provided in the alt text.

in an emergency dial 9-1-1-alcohol resources cascade image screen shot

A Button Image and Its Alternative Text

In the example below:

  • The web audience could click on the "HELP" button to complete the SAIT computer support form.
  • Assistive technology users would listen to the alt text, which would state "SAIT computer support form," and know that to complete the SAIT computer support form, they would have to click on the image.
  • By following these guidelines, the web page makes all web audiences aware of a variety of options for requesting computer assistance.

student affairs information technology main page to show use of accessible image of a button http://www.northwestern.edu/studentaffairs/sait/index.html

Resources

Cascade Instructions for Images

Adding an image and alt text to web pages via Cascade