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.
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.
