Alternative text, sometimes referred to as alt text or alt tags, provides a textual alternative to non-text content in web pages.
The key principle is that computers and screen readers cannot analyze an image and determine what the image presents. As developers, text must be provided to the user which presents the content and function of the images within your web content.1
Example of Alt Text
Look at the content of the image.
- Does it provide additional information that is not in the surrounding text?
- If the image was missing, would a person who is sighted lose any needed information?
If no, the sighted person would not lose any information if the image were removed. In this case, the image is merely a visual representation of the surrounding text. The null alt text would be sufficient.
If yes, the sighted person may lose some information if the image were removed. Minimal alt text, like "Cycle Chart of Cameron University" would be sufficient.
When an equivalent alternative for a complex image, such as a chart, graph, or map cannot be limited to a succinct alt attribute AND is not presented within the content of the page (such as an adjacent data table), then the alternative should be provided elsewhere. This is typically done by linking to a separate web page that provides the longer description. The link can be adjacent to the image or the image itself could be linked to the long description page. The alternative text for the image should still describe the general content of the image.2
1 "Alternative Text," Web AIM: web accessibility in mind. WebAIM, Aug 2013 Web. 22 April 2015. https://webaim.org/techniques/alttext/
2"Alt Text," Accessible Course Materials. Tulsa Community College, 2014. 27 April 2015. https://www.sites.google.com/site/accessiblecoursematerials/images/alt-text