{"id":3256,"date":"2025-09-25T14:24:42","date_gmt":"2025-09-25T21:24:42","guid":{"rendered":"https:\/\/wsu.edu\/digital-accessibility\/?page_id=3256"},"modified":"2026-04-16T15:51:58","modified_gmt":"2026-04-16T22:51:58","slug":"images-and-accessibility","status":"publish","type":"page","link":"https:\/\/wsu.edu\/digital-accessibility\/core-concepts\/images\/images-and-accessibility\/","title":{"rendered":"Images and Accessibility"},"content":{"rendered":"\n

This web page is intentionally created with accessibility errors to demonstrate the functionality of automatic accessibility checkers for web pages. View this webpage in an accessibility checker (WAVE)<\/a> to display alternative text and help identify accessibility issues.<\/p>\n\n\n\n

Alternative Text<\/h2>\n\n\n\n

Alternative text, also known as alt text, is a textual substitute that provides the equivalent experience for everyone and must represent the image’s content or function.<\/p>\n\n\n\n

Error Types<\/strong>: Errors must<\/strong> be fixed. Alerts should<\/strong> be fixed. These fixes, both errors and alerts, improve the accessibility and usability of the content. Accessibility checkers can provide false positives for an image’s alt text. <\/p>\n\n\n\n

Important<\/strong>: It is important to check alt text manually. Accessibility checkers can only determine if you do or don’t have alt text. It can not tell you the quality of the alt text or if it is equivalent. <\/p>\n\n\n\n

Best Practices<\/strong>: The alt text describes the image’s content or function succinctly. While decorative images don’t need alt text, most other images do need alt text. The alt text is determined by the image and its surrounding content.<\/p>\n\n\n

\r\n \n\n

Alt Text and Equivalent Experience<\/h2>\n\n\n\n

The alt text provides an equivalent substitute, whether you can see the image or not. <\/p>\n\n\n

\r\n \n
\r\n\t\n\n

Image<\/h3>\n\n\n\n
\"A<\/figure>\n\n<\/div>\r\n\n\n
\r\n\t\n\n

Screen Reader<\/h3>\n\n\n\n

A screen reader will read the image as, “Graphic, A crimson WSU Cougar head on a light gray background.”<\/p>\n\n<\/div>\r\n\n\n

\r\n\t\n\n

Missing Image<\/h3>\n\n\n\n

A missing image will have the browser’s broken image icon and the alt text. <\/p>\n\n\n\n

\"A<\/figure>\n\n\n\n

Leave the image block as it is. I know it looks broken, but it isn’t for this demo purpose. <\/p>\n\n<\/div>\r\n\n<\/div>\n <\/section>\n\n\n

\n\n\n
\r\n \n\n

Image’s Function<\/h2>\n\n\n\n

The image’s function determines what to include in the alt text for the image. The alt text should describe the destination or function.<\/p>\n\n\n\n

These examples demonstrate how an accessibility checker identifies a linked image. <\/p>\n\n\n

\r\n \n
\r\n\t\n\n

Destination Alt Text<\/h3>\n\n\n\n
\"Washington<\/a>
Error Type<\/strong>: No Error. The alt text describes the destination.
Important<\/strong>: This is a manual check. An accessibility checker will not<\/em> determine if the alt text is appropriate for the linked image.<\/figcaption><\/figure>\n\n<\/div>\r\n\n\n
\r\n\t\n\n

Content-related Alt Text <\/h3>\n\n\n\n
\"A<\/a>
Error Type<\/strong>: Error. The alt text does not describe the destination.
Important<\/strong>: This is a manual check. An accessibility checker will not<\/em> determine if the alt text is appropriate for the linked image.<\/figcaption><\/figure>\n\n<\/div>\r\n\n\n
\r\n\t\n\n

Empty Alt Text<\/h3>\n\n\n\n
\"\"<\/a>
Error Type<\/strong>: Error. The alt text must describe the destination.
Important<\/strong>: This is an automatic check. An accessibility checker will determine that the alt text is empty.<\/figcaption><\/figure>\n\n<\/div>\r\n\n<\/div>\n\n\n

Important<\/strong>: Accessibility checkers cannot<\/em> tell if the alt text describes the destination or the function. It is always a manual check to see if the alt text provides the correct information.<\/p>\n\n <\/section>\n\n\n

\n\n\n
\r\n \n\n

Context is Everything<\/h2>\n\n\n\n

The surrounding content helps determine what to include and what not to include in the alt text. <\/p>\n\n\n\n

In these examples, you will see how the alt text changes based on the surrounding content. <\/p>\n\n\n

\r\n \n
\r\n\t\n\n

Profile Page<\/h3>\n\n\n\n

Surrounding content: Professor Jane Smith\u2019s profile web page<\/p>\n\n\n\n

\"Jane<\/figure>\n\n<\/div>\r\n\n\n
\r\n\t\n\n

Academic Page<\/h3>\n\n\n\n

Surrounding content: Academic offerings on a department website. A professor is not mentioned on the webpage.<\/p>\n\n\n\n

\"A<\/figure>\n\n<\/div>\r\n\n\n
\r\n\t\n\n

Academic Page with Additional Information<\/h3>\n\n\n\n

Surrounding content: Academic offerings on a department website, including courses. A professor is not mentioned on the webpage.<\/p>\n\n\n\n

\"Professor
Professor Jane Smith teaches Intro to College Life to first-year students. 
<\/figcaption><\/figure>\n\n<\/div>\r\n\n<\/div>\n\n\n

Important<\/strong>: A manual check determines if the alt text provides an equivalent experience. It is always a manual check to see if the alt text provides an equivalent experience. Accessibility checkers cannot tell if the alt text provides too little or too much information. <\/p>\n\n <\/section>\n\n\n

\n\n\n
\r\n \n\n

Suspicious Alt Text<\/h2>\n\n\n\n

Suspicious alt text contains non-essential words like “image of” or an alt text with a space. Or where the alt text matches another nearby image’s alt text. <\/p>\n\n\n

\r\n \n
\r\n\t\n\n
\"<\/figure>\n\n<\/div>\r\n\n\n
\r\n\t\n\n
\"Image<\/figure>\n\n<\/div>\r\n\n\n
\r\n\t\n\n
\"Students<\/figure>\n\n<\/div>\r\n\n\n
\r\n\t\n\n
\"Students<\/figure>\n\n<\/div>\r\n\n<\/div>\n\n\n

Error<\/strong>: Alert<\/p>\n\n\n\n

Best Practice<\/strong>: Alt text should not include \u201cimage of,\u201d \u201cphoto of,\u201d or \u201cgraphic of.\u201d Alt text should be unique to include details that set it apart from other images. <\/p>\n\n <\/section>\n\n\n

\n\n\n
\r\n \n\n

Missing Alt Tag<\/h2>\n\n\n\n

A missing alt tag is not ignored by assistive technology, like a null or empty alt text is. Assistive technologies will read the file name when the alt tag is missing. <\/p>\n\n\n

\r\n \n
\r\n\t\n\n
<\/figure>\n\n<\/div>\r\n\n\n
\r\n\t<\/div>\r\n\n<\/div>\n\n\n

Error Type<\/strong>: Error<\/p>\n\n\n\n

Note<\/strong>: The implementation of the image is such that the alt tag is missing. <\/p>\n\n <\/section>\n\n\n

\n\n\n
\r\n \n\n

Decorative Images<\/h2>\n\n\n\n

Decorative images do not add visual support or content to the surrounding content. If removed, nothing would be missing from the content. Assistive technology<\/a> ignores an empty (or null) alt text. <\/p>\n\n\n

\r\n \n
\r\n\t\n\n
\"\"<\/figure>\n\n<\/div>\r\n\n\n
\r\n\t<\/div>\r\n\n<\/div>\n\n\n

Best Practice<\/strong>: When in doubt about whether an image is decorative or not, add the alt text anyway and provide equivalent information in the alt text, as it supports the surrounding content. See Context is Everything<\/a> for more information.. <\/p>\n\n <\/section>\n\n\n

\n\n\n
\r\n \n\n

Images with Text<\/h2>\n\n\n\n

The text in an image must be included in the alt text.<\/p>\n\n\n\n

The text in an image that is more than 150 characters should be considered a complex image<\/a>. It must be handled differently to include all the text in the image.<\/p>\n\n\n

\r\n \n
\r\n\t\n\n
\"A
A brief description of the image and the text is 97 characters. <\/figcaption><\/figure><\/div>\n\n<\/div>\r\n\n\n
\r\n\t\n\n
\"A
A brief description of this image is 137 characters. Anything more than 150 characters should be considered a complex image where additional details are provided in the caption or another location. <\/figcaption><\/figure><\/div>\n\n<\/div>\r\n\n<\/div>\n\n\n

Error Type<\/strong>: Error<\/p>\n\n\n\n

Best Practice<\/strong>: Include all the text in the image in the alt text. Try to keep the length to below 150 characters. <\/p>\n\n <\/section>\n\n\n

\n\n\n
\r\n \n\n

Complex Images<\/h2>\n\n\n\n

Complex images need more details in the alt text than the suggested 150-character limit. Use the caption, a nearby location, or a link to another location to accommodate the additional details.<\/p>\n\n\n

\r\n \n
\r\n\t\n\n
\"A
Besides people using wheelchairs benefiting from the curb-cut, people using dollies, canes, strollers, bicycles, skateboards, and rolling luggage also benefit from curb-cuts. Source<\/a>.<\/figcaption><\/figure>\n\n<\/div>\r\n\n\n
\r\n\t\n\n
\"A<\/figure>\n\n\n
\r\n

\r\n