For accessibility standards, images are classified as either functional or decorative. Functional images serve a purpose, such as showing a person, place, or thing that’s relevant to a story. Decorative images are more like eye candy, and are not critical to understanding the story like a fancy horizontal rule.
If you’re adding a functional image to a story, text about its content and purpose is required. You can make a call about the best way to meet this requirement, but here are some guidelines:
- We recommend including a caption and credit on every functional image.
- For networks that don’t use captions regularly, alt text is required for every functional image.
Images and screen readers
Blind folks and people with low vision make use of assistive technology to read the web. When a screen reader or talking browser comes to an image, it reads the following elements in this order:
- Alternative text (aka alt text)
- Caption
- Credit
If none of these fields are filled out in Chorus, people who use screen readers won’t know there’s an image at all. If there’s no alt text or caption, they’ll only hear the credit and have no idea what’s in the image or how it relates to the story.
Write good alt text
You can add alt text in Chorus whenever you’re adding or editing images. Alt text serves several purposes:
- It allows people using screen readers to understand the content and function of the image.
- It displays in place of the image if the image doesn’t load.
- It provides semantic meaning about the image, which can be read by search engines (along with the file name and any caption text).
- It is sent to Twitter if you include it for social images. We’re working on enabling this for Facebook as well.
Let’s work with this photo from Eater:
Describe all of the elements in the image to explain what’s happening in it. Try to capture the mood or significance of the image.
As noted in the caption, we can see Johnny Rosas and Denisse Lina Chavez, two chefs at Antojitos El Atoradero. But what else can we see? To really capture the feeling and contents of the image, we should note how they’re looking at each other, what’s on the table (enchiladas and Mexican Diet Coke for example!), how the decor feels, and what they’re wearing if their clothes are relevant, too. Johnny’s New York Yankees hat, facial hair, and kitchen scrubs say a lot about his personal style.
Be careful not to censor what’s in the image. This can happen when you avoid mentioning age, ethnicity, gender, or sexuality. When mentioning these attributes, always prioritize what is known over guessing. If you know someone identifies as female or Latina or black, then mention those things, but otherwise mention visual facts (e.g., gray-haired, young child, dark-skinned, scantily clad).
Don’t paste the caption into the alt text field as screen readers will read both. Instead of duplicating the caption, go further in the alt text field and tell a story within the story about the image. Be specific about people, places, and things so people using screen readers understand what’s not being said in the story or caption fields.
Ultimately, the story you decide to tell in alt text is up to your judgment and you’ll want the alt text to flow nicely with the larger story. Here’s a suggestion of what we could include for the Eater example:
Chefs Denisse Lina Chavez and Johnny Rosas smile at each other while sharing a meal of Mexican food and glass-bottled sodas
Include full names of anyone in the image. This helps audiences identify who is featured in lead art or story images—and it also improves search rankings. If you’re writing about a team, for example, you might call out the defensive tackle from the lead image: “Christian Wilkins, number 42 on Clemson’s football team, wears a white travel uniform while charging with football in hand.” If the story is about one person, it’s fine to use their first or last name as you would in a story after the first mention.
Don’t say “image of” or “graphic of” since the browser will announce that it’s an image. You can mention that it’s a portrait or illustration, for example, if that’s important to the story.
If you’re grouping images with a single caption, each image needs its own alt text. In the original story, this Eater photo is paired with another image and both need alt text since they’re not decorative.
If you’re adding images to an HTML block, an alt attribute is required. The alt attribute can be blank if the image is purely decorative:
<img alt="">
If the image is functional and set within a link, alt text must be included.
Avoid using images of text
Visual elements help your story sing, but when it comes to headings, pull quotes, and sidebars, it’s best to use text. Embedding these important elements in images can leave people using screen readers confused and unable to make sense of the story.
If you need to include a screenshot of text, such as a deleted tweet, transcribe the text in the alt text field.
Similarly, screenshots of tables or spreadsheets might be indecipherable to audiences, depending on their abilities or device type. We recommend using the built-in table tool in Chorus instead.
Ensure brand images have sufficient contrast
If you’re adding logos, icons, or group images to your site, make sure they meet color contrast standards.