All About Alt Text (alternative text)

Anyone who has attempted or even considered making their digital offerings accessible has heard or seen the term “alt text”. There is some confusion about exactly what the term encompasses, but it’s such an important accessibility feature that everyone should have a general understanding of it.

Alt text (alternative text) is a word or phrase that can be inserted as an attribute in an HTML (Hypertext Markup Language) document to tell website or digital document viewers the nature or contents of an image. The alt text appears in a blank box that would normally contain the image. Alt text is also useful for the general user when an image link is not available for any reason.

There is a lot of information available about using alt text, and one of the best sources is Google. The following tips to improve the user’s experience of alt text are taken from Google’s Image Publishing Guidelines:

To boost your content’s visibility in Google Images, focus on the user by providing a great user experience: make pages primarily for users, not for search engines. Here are some tips:

• Provide good context: Make sure that your visual content is relevant to the topic of the page. We suggest that you display images only where they add original value to the page. We particularly discourage pages where neither the images nor the text are original content.

• Optimize placement: Whenever possible, place images near relevant text. When it makes sense, consider placing the most important image near the top of the page.

• Don’t embed important text inside images: Avoid embedding text in images, especially important text elements like page headings and menu items, because not all users can access them (and page translation tools won’t work on images). To ensure maximum accessibility of your content, keep text in HTML, and provide alt text for images.

• Create informative and high-quality sites: Good content on your webpage is just as important as visual content for Google Images – it provides context and makes the result more actionable. Page content may be used to generate a text snippet for the image, and Google considers the page content quality when ranking images.

• Create device-friendly sites: Users search Google Images more from mobile than on desktop. For this reason, you must design your site for all device types and sizes. Use the mobile-friendly testing tool to test how well your pages work on mobile devices, and get feedback on what needs to be fixed.

• Create a good URL structure for your images: Google uses the URL path as well as the file name to help it understand your images. Consider organizing your image content so that URLs are constructed logically.

It’s really important to ensure that the content tells viewers as much as possible about the image while at the same time using as few words as possible. This is important because as images get physically smaller, too many words can take up too much space to fit inside the image rectangle (which is the same size as the image would be if it were visible).

When an image contains words that are important to understanding the meaning of the text, the alt text should include those words. This will allow the alt text to play the same function on the page as the image itself. Describing the image is not as important as conveying the precise meaning of the image.

In order to be compliant with W3C Accessibility Guidelines, and for code to be considered W3C-valid, it is important to include both image alt text and image title text in the image for important images on the page.

Alt text is also a good place to place relevant keywords to improve your website’s search engine optimization (SEO), but it is not okay to do “keyword stuffing”, which is the practice of inserting a large number of keywords into Web content. According to Google, the practice is not only unethical but also does not work.

Images in articles and documents encourage people to read them, and using alt text allows everyone to have a full experience. Well-chosen images and descriptors reinforce the message, and make content inclusive. It’s a win-win for everyone.