Image Accessibility Guidance

[desrosj]

When selecting background and text colors for a text block, a warning is displayed if the colors selected do not meet the minimum color contrast threshold for good accessibility.

Some similar notices or warnings could be very helpful for images.

Example: in Trac #34636, the decision was made that trying to generate fallback values for an image's alt attribute was doing more harm than good. If someone uploaded an image from Facebook, for example, something similar to 13692958_640441422776307_2762172099609496084_o would be used. IMG_2009 is another potential fallback alt value if uploaded from a phone. Both are not helpful from an accessibility standpoint.

Some checks that first come to mind.

• If the alt attribute closely matches the file name.
• If the alt attribute is one long word (like the Facebook example above).
• If the alt attribute matches a common image naming pattern (IMG_#### or DSC_####).

An example of a notice that could be displayed:

Your alt attribute is very close to the image's file name. In most cases, this is not a helpful way to utilize the alt attribute.

Very rough idea right now, but wanted to make sure I made an issue for it. I would love to hear from some contributors better versed in a11y if they think this would be useful, and if the proper usage of the attribute could be properly conveyed in a small notice like this.

[karmatosed]

I wouldn't be against adding notices, I have a little concern if we add too many, but this is just a few. @afercia what is your opinion on this?

[afercia]

I think the alt attribute is no longer populated automatically with a fallback, unless I'm missing something. So, if I upload an image with a file name 8344227004_256e6e8949_o.jpg, then 8344227004_256e6e8949_o is used for the attachment title but the alt value stays empty.

As @desrosj pointed out, this is a good thing. Worth also considering that in a great number of cases, images are purely decorative so they should really have an empty alt attribute alt="".

I'm not sure if there are still cases where the alt attribute gets populated with the file name. Maybe we should also consider the case where users could inadvertently copy and paste the file name in the alt text field? In these cases, helping users to produce accessible content would be great. Some sort of check could be useful. I'd say at least a check for IMG_#### or DSC_#### should be simple enough to implement.

[afercia]

Discussed during today's accessibility bug-scrub, this would be a nice to have, As for the headings hierarchy and the colors check, checking the alt attribute would be a huge improvement for content authoring. Adding the label needs-dev

[afercia]

Also, a link to https://www.w3.org/WAI/tutorials/images/decision-tree/ could be beneficial.

[Edit:] Update: this was added in #14668.

[joedolson]

Another check that could be added is that the alt attribute must be non-empty if the image is linked and no other content is within the link.

[paaljoachim]

Can we get an update on this issue @joedolson Joe?
Thank you!

[joedolson]

This is still an area that needs work; there are a lot of opportunities for the image block interface to encourage usage of alt attributes or warn of problems that should be explored.

[paaljoachim]

Thanks Joe!
I went ahead and added the issue to the Overview/tracking issue.

[joedolson]

I think an important step for moving this forward is to identify exactly what tests it's reasonable for us to perform. We want to do a good job of avoiding giving false positives, as that can just become an irritation for users.

I'm going to start a list here of possible tests, to get this started:

• Image has a file name pattern (e.g., IMG_### DSC_###, as mentioned above.)
• Image is linked, but has an empty alt attribute
• Image has text, but has an empty alt attribute (this would require image analysis; may be beyond current scope.)
• Image contains only the word 'image', 'picture', 'graphic', or similar
• Image has a caption and an alt attribute, and the two values are the same
• Image has an alt attribute greater than x length. (Very long alt attributes may mean that this text needs to be visible. There is no technical limit here, so this is more of a usability warning. Specific length would require some discussion, but the limit should be at least 140 characters, and probably higher.)

[carolinan]

Thank you for putting together this list.

I would be interested in hearing what should be displayed as warnings in the UI; and what should be prevented by WordPress, using code solutions.

Image has a caption and an alt attribute, and the two values are the same

What is the best solution here, for the alt to be removed, and the caption used for the image through aria-describedby?

Image is linked, but has an empty alt attribute

A good next step would be to compare how the different image related blocks handle this, because they do not handle it the same way.

Edit: Also it might be best to solve this with, or after, the update of the link controls.