|
You are a top-notch editor! Your pages are organized, your content is clear, and you select the best image to complement your text. You may have even taken our accessibility courses and know the importance of describing images for your audience. But do you really know what alt text is? You input that supplemental information into the alt text field in the block editor, and expect it to appear in a tooltip when you hover over an image. Sorry to tell you, friend, but that is not the purpose, nor the function, of alt text.
An image’s alt text provides information to users with screen readers on what the image contains. Alt text is also the written text that appears in place of an image on a page or in an email when the image fails to load. Neglecting to include alt text does a major disservice to all end users, but harms those that use assistive technologies most of all.
Good alt text should:
-
Be precise and succinct in conveying the emotion, purpose, and impact of the image.
-
Be no more than approximately 125 characters, following the recommendation above.
-
Contain appropriate grammar and punctuation, including a period at the end of the text.
-
Not include “Photo of” or “Image of” as the end user already knows that it is an image.
Captions
So, with this in mind, what is the best way to handle the scenario above? The answer is captions! Captions are featured below an image and give you space to add that supplemental information. Please note that you should still be including alt text so that all users understand the visual content of the image in addition to having the supplemental material in your caption.
The difference between alt text and captions is context. The alt text should appropriately describe the content of the image, while the caption should explain more about the purpose of the image. For example, you want to insert a photo of Jack the Bulldog on one of your landing pages. The alt text could be, “Jack the Bulldog sits on Healy Lawn, surrounded by trees with Healy Hall in the background.” while the caption could be, “Hoya saxa! Jack welcomes you back to campus for the fall semester.”
Tooltips
If you are still wondering how to get that hover effect for a “more information” feature, also known as tooltip, it is not something we actively support. A more accessible choice would be to include context about the image in your text or add a caption. It is also judicious to consider the following: If the information is important enough for a tooltip, isn't it important enough to always be visible?
Sometimes we get fixated on the way that we want something to work when we need to take a step back and think about whether our approach makes sense. If your needs go beyond the capabilities of a certain block, ask yourself if there is a better way to present the information. While on the topic of presenting information, please avoid putting text in images! Screen readers cannot read what is in your image. If you do have an image with text, you will need to include all of that information in your alt text. If the image is of a flier or some other promotional material, link to a section or page that contains all of that information.
Resources
There are further resources available at the bottom of our Accessible Images page. If you have other questions about web accessibility topics, we encourage you to look over our Website Accessibility website. We also offer web accessibility training.
You can talk through accessibility-related questions with Kevin Andrews, electronic and information technology accessibility coordinator, on Zoom every Tuesday from 2–3 p.m. Please use this link to schedule an accessibility office hours appointment.
|
