Ever wonder why you’re required to add alternative text to images like photos, tables, and graphs? It’s part of a set of criteria called Web Content Accessibility Guidelines (WCAG), which ensure that digital resources can be accessed by everyone. These guidelines are used for websites, applications, documents, and other similar resources.
What is alternative text?
Alternative text, also known as “alt text,” allows those who are blind or have poor vision as well as those with cognitive disabilities to understand what images represent. These images can be photographs, tables, and graphs, to name a few. By using a screen reader, those individuals can have alternative text associated with images read aloud to them. When you don’t provide alt text, the screen reader only reads the word “image,” which doesn’t provide meaning or an equitable experience for the user.
Alt text can be a benefit for everyone, especially when there is poor connectivity. When web page images don’t load, the alt text is available where the image would be.
Best practices for alternative text
Precise writing of alt text is important. Think about a concise phrase which could replace the image, keeping in context with the message. For example, this picture of a dog may mean something different to the dog’s owner than to a veterinary student learning about healthy dogs.
How to add alternative text
Tips on adding alt text within websites can be found in W3C’s Informative Images tutorial. Every application varies, so check user guides. Regardless of the application, when you see a field for alt text, make sure you include information consistent with the meaning and context of the image you added.
Some images may be decorative and not convey any valuable meaning. In those cases, consult your application to see how to deal with decorative images. For websites, proper code is needed. Consult W3C’s Decorative Images tutorial for more information.
For additional tutorials on alt text for websites including functional images, images of text, and more, see W3C’s Images tutorials.