Images and Alt Text
Alt text describes an image to those who would be unable to see it.
Importance for Accessibility
Users of assistive technology and users with low internet bandwidth who turn off images will not understand the full context of your page content without alt text descriptions. It is essential that you include alt text for any image that conveys meaning and context to users of your electronic resource.
Alt Text Descriptions
Alt text can be as long as a normal tweet, however, it should not become a short story. Alt text descriptions will be invisible to sighted users, but will be read aloud to users of text to speech software.
- Be clear, concise and descriptive.
- Alt text should be 125 characters or less per image
- Avoid adding phrases that start with "image or picture of..." as this is redundant to the screen reader user.
- Avoid redundancy: Do not copy title or caption text into the alt text field as this will cause redundancy for users of assistive technology.
For a tutorial-based understanding of alt text, the W3C created an alt Decision Tree to help you understand how and when to use alt text.
Complex Images
In some cases, such as when using graph data or other complex imagery, a different type of alternative is required. Please visit our complex images and alternative text page for more information.
Example Alt Text
To give a clear example, we have provided a contrasting example of alt text about the picture in the right column.
Good alt text: Old Main at Texas State University
Bad alt text: Old Main
We hope this gives a concrete example of how descriptive alt text lends more context to an image than simply copying the image title as the alt text tag.
Icons, Linked Images and Caption Text
For each item below, please read the guide and then right-click and inspect the image to view the alt text value for each example.
Icons
Icons require alt text since they often provide brand or logo information to users. If using icons, please enter the exact wording of the logo as the alt text.
Do not add the text "logo" or "icon" when writing your alt text. Inspecting the image below will reveal that the alt text = sale.
Linked Images
Linked images should employ alt text to give users an idea where the link will direct them. As an example, the image in this column is labeled "Home - Digital Accessibility" because if a user activates the image link it will take them to the homepage of this website.
To test this, right click the image and select inspect from the menu. The alt text tag will read "Home - Digital Accessibility".
Caption Text
If your image content includes caption text, you should not copy your caption about the image as an alt text description. Either leave the alt text as the NULL value ("") or enter a separate description for the image.
Inspecting the image below will show it has the NULL alt text value.
If your captioned image is also linking to another page, make sure to include alt text that describes the function of the image.
