Your daily frequent11y newsletter, brought to you by @ChrisBAshton:

WebAIM guidance on Alternative Text

• This guidance was given a fresh update in October 2021, so I’m reading it anew.
• “Although technology is getting better at recognizing what an image depicts, algorithms alone cannot understand what an image means within the context of the overall page. A maple leaf might represent Canada, or it might just illustrate the leaf of a tree.”
• There are several examples of good vs bad alt text, and clarifications around when an empty alt text is appropriate. But I knew that already, so have cherry-picked some of the more interesting content in the points that follow.
• Other than the alt attribute, “alternative text can be presented within visible body text near the image” or even “on a separate page, linked from either the image or a text link adjacent to the image” (but only “when the text equivalent cannot be presented succinctly”). Note that the longdesc attribute is deprecated and should not be used.
• A trip down memory lane: image maps. The main image associated with the <map> must have an alt attribute that describes the content within the image, but is not otherwise presented with each image map hot spot. For example, a State of New York map that has an <area> for each county might have alt="Counties of New York", whereas its hot spots would each have an alt attribute containing the name of the county. If the main image does not convey content (just a container for the hot spots), then alt="" is appropriate.
• Finally, a note on <figure> and <figcaption>. The <img> within the <figure> must have non-empty alt attribute, which should not just be a repeat of the <figcaption> contents. I was surprised by this, so I read the linked How do you figure? blog post by Scott O’Hara. Some highlights from that post:
  • “One of the biggest misunderstandings of using a figcaption is that it’s used in place of image alternative text”.
  • “A figcaption is meant to provide a caption or summary to a figure, conveying additional information that may not be directly apparent from reviewing the figure itself. If an image is given an empty alt, then the figcaption is in effect describing nothing. And that doesn’t make much sense, does it?”
  • Moreover, using an empty alt="" on the image causes serious screen reader issues. It’s essentially the same as an <img alt="" /> anywhere else in the page; in other words, it’s treated as decorative, and ignored by the screen reader. So an empty alt="" will mean your entire <figure> gets skipped over.

Prefer longer newsletters? You can subscribe to week11y, fortnight11y or even month11y updates! Every newsletter gets the same content; it is your choice to have short, regular emails or longer, less frequent ones. Curated with ♥ by developer @ChrisBAshton.