Images used in documents, interactive learning objects, websites, blogs, etc. all require alternate text to ensure that all students can gain meaning from the image or graphic. For students who are blind or have visual disabilities, this alternate text is crucial so that screen readers can identify and describe the image accurately. For others, the additional text may help to ensure that the meaning of the image and its relationship to the content is clear. Accessible content is a requirement of Quality Matters and aligns with WCAG 2.0 web accessibility standards.
Depending on the type of image and its relationship to the content, the nature of the alternate text may vary.
Imagine you have an image that needs alternate text. Let’s explore the process you will take (in two minutes or less) to make the image usable for all! Try using Text Alternatives for Images: A Decision Tree to help you analyze the alternative text needs for your image.
Consider the nature of the image.
The image is purely decorative in that it does not convey any information or is being used simply as a visually pleasing element or spacer.
The image conveys new information of varying levels of complexity including a link, short snippet, or an image conveying a significant amount of information. Images that repeat information should be treated the same as a decorative image.
Construct the correct alternate text.
Create a null attribute indicating to a screen reader to ignore the image. To set the alternate text, go to the image properties and enter alt=”” in to the space for alternate text. If using coding, enter the null attribute into the coding <img src=”image.gif”alt=””>.
Image Conveying a Link
Include in the alternate text the label for the link (just as you would any hyperlink in your document) as: alt=”label for link”. This should be descriptive and not the URL itself.
Image Conveying a Snippet of Information
Include in the alternate text a very brief description that can be used as a supplement to the caption, if a caption is provided, as alt=”short text alternative”. The alternate text should not be identical to the caption but should be presented in a way that makes sense when read along with the caption.
Image Conveying a Significant Amount of Information
Often graphs, charts, or tables convey complex information that requires a long description. In most cases, this is best done by explaining the graph in text form elsewhere on the page or on a separate hyperlinked page altogether. This can be done by including a hyperlink below the image that says “text version of [insert label]”. In either case, alternate text is still needed to tell the learner where the alternate text can be found. For a long text description included elsewhere on the page include alternate text as alt=”[Image label] – text version below”. For a long description included on a separate web page include alternate text as longdesc=”[Image label]-text.html”.
Set the alternate text.
Provide the alternative text, as described above, by either accessing the image’s properties or by altering the HTML code. When you hover over the image or test accessing it using a screen reader the alternate text should provide a description and relationship to the surrounding content.
The above information is simplified for ease of use but for more information explore:
WAC’s Guidelines for Describing Graphics (https://carmenwiki.osu.edu/display/10292/Describing+Graphics)