Improve the alt text description

[afercia]

Originally, the alt text description was:

Describe the purpose of the image. Leave empty if the image is not a key part of the content.

then it was changed in #11052 / #8391 to:

Alternative text describes your image to people who can’t see it. Add a short description with its key details.

The previous description was crafted after feedback from the accessibility team, see #1509, and it's also what the accessibility team recommends to use in core, see for example the patch proposed in https://core.trac.wordpress.org/ticket/41612

I understand the intent was to clarify and improve, but the new text is not appropriate and based on some common misconception. It should be reverted.

Alternative text describes your image

This is wrong, and it's a common misconception: the alternative text must describe the purpose the image has in its specific context. In some cases it's the image content. In other cases, for example linked images, it's equivalent to the link text and needs to describe the link. In other cases, the image is purely decorative and needs an empty alt attribute.

For more details, see the "alt Decision Tree" W3C tutorial: https://www.w3.org/WAI/tutorials/images/decision-tree/

to people who can’t see it

This is inaccurate and vaguely unfair. A proper alt text helps all users (for example when the image can't be downloaded). Helps SEO. Helps any software that reads the markup, including but not limited to assistive technologies. Also, I wouldn't expect from a software that aims to be inclusive, made by an inclusive community, to mention only one disability as the only good reason to have good alt text.

Add a short description with its key details.

Also not correct. In 90% of the cases, images are purely decorative and need to have an empty alt attribute alt="". This way, assistive technologies will ignore the image instead of reading redundant, not relevant, alt text for purely decorative images. The part of the original text that was removed:

Leave empty if the image is not a key part of the content.

is paramount for a correct usage of the alt text.

[afercia]

HTML 5.2 recommendation:

4.7.5.1. Requirements for providing text to act as an alternative for images

Note: The alt attribute on images is a very important accessibility attribute. Authoring useful alt attribute content requires the author to carefully consider the context in which the image appears and the function that image may have in that context.

4.7.5.1.1. Examples of scenarios where users benefit from text alternatives for images

• They have a very slow connection and are browsing with images disabled.
• They have a vision impairment and use text to speech software.
• They have a cognitive impairment and use text to speech software.
• They are using a text-only browser.
• They are listening to the page being read out by a voice Web browser.
• They have images disabled to save on download costs.
• They have problems loading images or the source of an image is wrong.

4.7.5.1.2. General guidelines

Except where otherwise specified, the alt attribute must be specified and its value must not be empty; the value must be an appropriate functional replacement for the image.

To determine an appropriate text alternative it is important to think about why an image is being included in a page. What is its purpose?

4.7.5.1.8. A graphical representation of some of the surrounding text

In many cases, the image is actually just supplementary, and its presence merely reinforces the surrounding text. In these cases, the alt attribute must be present but its value must be the empty string.

4.7.5.1.9. A purely decorative image that doesn’t add any information

Mark up purely decorative images so they can be ignored by assistive technology by using an empty alt attribute (alt="").

etc.

[afercia]

Discussed during today's accessibility meeting on Slack.

It's not a description of the image; that's directly antithetical to the idea of the alt text.

[sarahmonster]

Some additional context: "to people who can’t see it" wasn't intended to imply that ALT text is only useful to those who have vision impairments. All the use cases listed in 4.7.5.1.1 referenced above fall under the category of "the user can't see the image"—a user who has turned off images to save data can't see the image; when the source of an image is wrong the user can't see the image, etc. I do think it's worth mentioning how ALT text is used in order to provide context to users.

A challenge here is to provide a prompt that encourages users—the majority of whom are unlikely to have a full understanding of how ALT text is used or the context of use—to create content that's as accessible as possible for their visitors.

My concern in making the change was that the original wording would encourage users to create ALT text that might negatively affect content accessibility. Sounds as though I got it wrong! This would be a good opportunity to revise this text so it gives clear directions.

Based on the [original] description alone, I'm going to try to figure out how I should apply ALT text to my images.

Describe the purpose of the image. Leave empty if the image is not a key part of the content.

How does one determine what is a key part of the content, and what isn't?

Let's say I write a post about my new kitten, and I use a photograph of said kitten in my post. That photograph shouldn't have ALT text at all.

Let's say I write a post about economic inequality, and I use a chart that shows the spread of incomes increasing over the last 20 years. My ALT text here should be "Showing inequality increasing over time".

Is that understanding/application correct? I'm trying to leverage my ignorance/original misunderstanding here so that we can better educate all our users (as well as myself!) to use this feature correctly, so that we can help users create more accessible content. 🙂

[joedolson]

There isn't a way we can give people a complete understanding of how alternate text works in a brief piece of text. However, indicating that it's a description of the image can lead to very bad outcomes; since the appearance of the image is sometimes very distinct from the purpose of the image. But it's not always the case - sometimes a description is reasonable.

In your examples, omitting alt on your kitten is a reasonable choice - it's not the only viable choice, but it's reasonable.

In the latter example, that might be viable alt text for the image...but it's not accessible unless the data in the chart is also communicated clearly in the text of the post. Charts are a particularly difficult example, because they are very data heavy, but alt texts need to be relatively short.

I do think that "to people who can't see it" is a challenging phrase. Both arguments are good, in my mind: the phrase can imply that it's specifically for people who are blind, but it is also an accurate representation: this text should communicate the purpose of the image when anybody - person, device, bot, etc., does not "see" the image.

I think that "Describe the purpose of the image" is good; but also communicating that many image can have this omitted. We need a better way, perhaps, to communicate "key part of the content".

Here's what I would describe as types of images that are "key":

• Charts, graphs, data representations
• Any image that is linked
• Any image used in a button
• Any image that is required to understand the content around it.

But honestly, I have not been able to come up with a good way to summarize this.

Is it reasonable to add a modal pop-up where people can learn more? I think that the text visible by default should stay short and communicative; but more detail should really be available somehow.

[afercia]

Worth reminding the related core ticket https://core.trac.wordpress.org/ticket/41612 is blocked, pending a decision on the more appropriate text.

I'd tend to think the text should be as short as possible and linked to some in-depth explanation. @audrasjb proposed to copy the alt decision tree tutorial somewhere in the handbook. The advantage is that, to my understanding, the handbook will be translatable soon.

How about:

Describe [link]the purpose of the image[/link]. Leave empty if the image is purely decorative.

[joedolson]

I'm fine with this text; it seems sufficiently clear, with additional context available if needed, while also being concise.

[afercia]

Update: https://core.trac.wordpress.org/ticket/41612 has just been committed into core, with the text

Describe [link]the purpose of the image[/link]. Leave empty if the image is purely decorative.

and the link pointing to https://www.w3.org/WAI/tutorials/images/decision-tree/

[marcobax]

Can this link be disabled? I keep on clicking it because it's right below the input field.