Media widgets: Improve the image and gallery previews accessibility

[afercia]

Context: in the front-end, the image alt attribute must describe the purpose of the image or must be empty if the image is not a key part of the content and is purely decorative.

Instead, in the admin screens we're in an editing context. As an user, while authoring content, I need to know what the image is, regardless if the image has or has not an alternative text.

The image widget preview already does something to always provide some info about the image. When the image has no alternative text, it uses an aria-describedby attribute pointing to a hidden element that contains info about the image filename:

Pretty smart. Without this, the image wouldn't provide any useful information to assistive technologies and users wouldn't have any clue what the image is about. It can be improved a bit, as the proper way to give an accessible name to an image is by using an aria-label or aria-labelledby attribute, not an aria-describedby attribute.

Instead, the preview of the new gallery widget introduced in WordPress 4.9 always prints out an empty alt attribute alt="" for all the images. Worth reminding images with an empty alt attribute are completely ignored by assistive technologies. When navigating through the preview, the only information provided is the textual content for the "more images" text (it appears only when the gallery contains more than 6 images). Also, each image is within a <dl> element, that doesn't give any useful information to users:

I'd like to propose to use the same pattern used for the Image preview, and provide some extra info for each image in the gallery. Also, as a user I'd like to know how many images are displayed in the preview. Using an unordered list with each image in a <li> element would make assistive technologies announce that automatically.

[afercia]

43137.diff​ is a first pass:

• refactors the previews templates
• when the images have no alternative text, uses an aria-label attribute Current image has no alternative text. The file name is: %s
• makes the gallery preview an unordered list
• when the gallery has more than 6 images, hides the last image to assistive technologies with aria-hidden="true" and expands the "more images" text with an aria-label attribute. Instead of, for example "+3" assistive technologies will announce "Additional images added to this gallery: 3"
• removes an unused describedById variable in the gallery template

[afercia]

Screenshots to illustrate what the patch does. Screen readers are now able to announce the number of items in a gallery preview, the alternative text when present, a meaningful text when the alternative text is not present, and a more useful text instead of just "+2":

to evaluate:

• maybe add some visually hidden text before the previews, e.g. "Image preview" and "Gallery preview"
• is the file name the most useful info to provide? Or maybe the attachment title with fallback to the file name?

[Cheffheid]

I'd probably go with the attachment title first, and filename second. That way, there's at least the option to override the filename should there be a need to do so (because filenames are pretty dreadful more often than not, sadly).

[afercia]

Unfortunately we're running out of time for 5.1. This ticket does have a patch though (probably needs a refresh) so punting to 5.2.

[afercia]

43137.2.diff​ refreshes the patch, also making phpcs happy.

It's very likely the Widgets page will see substantial changes with the Gutenberg phase 2, but I'm going to commit these changes anyway as they establish good practices that should be followed in any new implementation.

[afercia]

In 44767:

Accessibility: Improve the image and gallery widgets preview accessibility.

In an authoring context, the image alt attribute purpose is different from the one for the front end. For example, screen reader users need to know what the selected image is, even when the original alt value is empty.

This change introduces a new pattern for the alt text in an authoring context:

• uses the alt text if not empty
• when there's no alt text, informs users the image has no alternative text and provides a reference to the image filename

Also, makes the gallery media widget preview an unordered list to make screen readers announce the number of images automatically.

Fixes #43137.