[wp-trac] [WordPress Trac] #43137: Media widgets: Improve the image and gallery previews accessibility

[WordPress Trac]

#43137: Media widgets: Improve the image and gallery previews accessibility
---------------------------+-----------------------------
 Reporter:  afercia        |      Owner:
     Type:  defect (bug)   |     Status:  new
 Priority:  normal         |  Milestone:  Awaiting Review
Component:  Widgets        |    Version:  4.9
 Severity:  normal         |   Keywords:  has-screenshots
  Focuses:  accessibility  |
---------------------------+-----------------------------
 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 a 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
 some info about the image file name:

 [[Image(https://cldup.com/uoRHlQWnmn.jpg)]]

 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 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:

 [[Image(https://cldup.com/m07kUdxgho.jpg)]]

 [[Image(https://cldup.com/PYrQBKhoAB.jpg)]]

 [[Image(https://cldup.com/wKboHchwkB.jpg)]]

 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.

--
Ticket URL: <https://core.trac.wordpress.org/ticket/43137>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform