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 (alt text) is text associated with a digital image which conveys the same essential information as the image. 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
- A concise, descriptive phrase is usually best.
- It’s important to make the alt text relevant to the image, but not overly complicated. 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.
- All images, form image buttons, and image map hot spots should have appropriate, equivalent alternative text.
- Images that do not convey content, are decorative, or contain content that is already conveyed in text are given null alt text (alt="") or implemented as CSS backgrounds.
- Equivalent alternatives to complex images should be provided in context or on a separate page (linked and/or referenced via the longdesc attribute).
Note: Don’t use the phrases “image of” or “photo of” within the alt text. The screen reader will read this as “image of ‘image of authentication process.’”
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.
Images and Content Management Systems
When using a Content Management System (CMS), like Cascade, to update websites, addition of alt text is oftentimes enforced; you may not be able to add the image without adding alt text. For any other CMS or WordPress sites, you may need to take care to add alt text, as it may not be a requirement of the application. For instance, within WordPress, alt text may still be required, but it may not be strictly enforced to move forward to the next step. Alt text should be established at the time you upload an image and should be relevant to context of the content.
Image sizing
When using images on websites, make sure the image size is similar to the actual size you’d like it on the webpage. Adjustments can be made in Adobe Photoshop or other photo editing application before uploading the file. Large file sizes slow down webpage loading and can be disproportionately large.