Alternate text is provided to a website visitor when an image is not visually perceivable. There are numerous reasons a visitor may not see an images on a Web page. Possibly they are using an assistive technology to read the website, called a screen reader, or they have turned images off in order to browse faster on a slow connection or mobile device.
Google and other search engines rank pages higher in search results that have alternate text. Contextually relevant alternate text that uses keywords will improve search result relevance.
How to Write Alternate Text
We sometimes recommend imagining describing the image to someone over the phone, but it’s not always so easy. Your alternate text should perform the same function as the image. Think of it as an equivalent. It might be helpful to ask yourself, “if I couldn’t use the image here, what would I write instead?” Many images are chosen for emotional value. Your alternate text should be written to provide the same emotional impact. Don’t be afraid to be creative.
- If the image has text in it, your alternate text should have the same text. Remember, if the image is not visible then the text on the image is not visible.
- If the image is a link the alternate text should describe the function of the link, not the image itself. For example a back arrow should say “Return to previous page” not “Arrow”. Frequently, the best alt text is the title of the linked page or description of the content.
- Do not include “link to” since screen readers will announce that the image is a “link graphic” before reading the alt text.
- The file name, image byte size, created date, or other unimportant data are not appropriate alt text.
- Avoid using the word “image” to describe your image. Screen readers will announce that the image is a graphic before reading the alt text.
- “Logo” is also not helpful. Use the words/letters in the graphic or other messaging related to the brand.
- Try not to be redundant with other text on the page. An image next to a Title should not have the same alternate text as the Title.
- Images in PDF and Word documents should also contain alternate text. You should be able to add alternate text to your documents using the context menu.
- Because the browser could perceive them as code and break the site, do not use these characters in your alternate text: # % & ‘ ^ ` ~ + ; = ) ( \ / : * “ < > | [ ] Definitely don’t use quotation marks.
- It may be difficult not to be redundant with text on the page. Redundancy is not the worst issue but should be avoided.
- You should have a site-wide strategy that defines your editorial character for copywriting of your alternate text.
The Web team and public relations staff are happy to discuss further if you have any questions.
Complex images can be very challenging. A good place to start is on the WebAIM Accessible Images page. The DIAGRAM (Digital Image and Graphic Resources for Accessible Materials) Center has many guidelines, including their Accessible Image Sample Book.