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.
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.
Null Alt Text
If the image you are displaying on your page is for decoration or visual interest only, an alt text description would not be needed. If alt text is not needed, you should use null (empty) alt text, which is two quotation marks ("") in the alt text field.
For raw HTML, this is how you construct the null alt text:
For the text and image content type, leave the alt text field empty.
The rich text editor will require you to enter alt text for every image and you should not try to make them decorative.
It is important that null alt text still be entered for an image, as this tells screen readers and other assistive technologies to skip over the image and not announce its presence. This has a similar effect to a fully sighted individual easily skipping over a decorative image to go straight to the informational content of the page.
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 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 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".
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.
Alt Text and Gato
Below are a few example of how to use alt text in our web content manager, Gato. There are other content types in Gato that have alt text fields and their functionality is the same. You must add alt text before you can save your content.
Text and Image
When using the Text and Image content type, you can add descriptions in the alt text field on the image card component.
While the alt text field is marked as being required, you may save an image without entering alt text while using Text and Image. This allows you the freedom to decide if your image is decorative or not, but you must remember to add alt text if the image is linked.
Regardless, you should add alt text to the image you intend to display on your website should it be more than decorative imagery.
When uploading or editing an image, you can add alt text in the "Alternative Text" field, located in the Image Properties function of the Rich Editor. The Alternative Text field is required and you will be unable to save the image until you have added alt text.
Making Images Accessible. Retrieved from https://www.washington.edu/accessibility/checklist/images/
Henry, S.L., McGee, L. (n.d.). Accessibility. Retrieved from https://www.w3.org/standards/webdesign/accessibility
Alternative Text for Images. Retrieved from http://accessibility.oregonstate.edu//alttext