search

Automattic / wp-calypso

The JavaScript and API powered WordPress.com
https://developer.wordpress.com
GNU General Public License v2.0
12.42k stars 1.99k forks source link

Media: Label Images with Alt Text for Screen Readers #41510

Open donalirl opened 4 years ago

donalirl commented 4 years ago

Steps to reproduce

  1. Open the Calypso Media library using a screen reader
  2. Swipe left to right to navigate through images

What I expected

I expected the images to be labeled with the Alt text so that a visually-impaired user can identify what the images are.

What happened instead

Images are labeled as the file name, which is usually something like IMG042820 and therefore not clear.

Browser / OS version

Chrome (latest), Windows 10 Chrome (latest) on android Safari (latest) on iPhone

Screenshot / Video

Screen recording: https://d.pr/v/uLGDvM

(my file names in this example are things like brisbane.png)

Context / Source

p4vt7e-6n-p2

journey #empathy #livesharing #accessibility #painpoint #user-report

obenland commented 4 years ago

It looks like it's currently using the image's alt value with title as a fallback: https://github.com/Automattic/wp-calypso/blob/4537033c6794449ce0a10b69d72daf5fa658d553/client/my-sites/media-library/list-item-image.jsx#L96

What would be a more appropriate fallback when an image doesn't have alt information associated with it?

donalirl commented 4 years ago

What would be a more appropriate fallback when an image doesn't have alt information associated with it?

Title does seem like the most appropriate fallback when an alt text is not set.

Just to clarify, the images I am selecting in that screencast above do have an alt text associated with them, but they are not being called out by the screen reader. The file name is being read out by the screen reader, not the title or the alt text which are both set for the images.

youbrokesomething commented 1 year ago

The original recording isn't available anymore, however, I did notice that thumbnails of images in Media are reporting alt-labels that have a short description or title. If you open an image and edit the alt text, that alt text does not make it to the media thumbnail images.

youbrokesomething commented 1 year ago

If we're picking up any alt text when the image is uploaded, that may be getting represented in the alt-label, but it's not included as alt text in either the thumbnail in Media or in the alt text field when you edit the image.