Making WordPress.org

Opened 2 years ago

Closed 2 years ago

Last modified 13 months ago

#5985 closed enhancement (fixed)

Accessibility: Use caption in ALT text for single photos

Reported by: alexstine's profile alexstine Owned by: coffee2code's profile coffee2code
Milestone: Priority: normal
Component: Photo Directory Keywords: has-patch needs-testing
Cc:

Description

Is it possible to use the image caption as image ALT text? If you view a single image like this one:

https://wordpress.org/photos/photo/44161bb082/#main

Google Chrome tries to announce to screen readers what the image appears to be but the caption gives a better description. Temporarily, should use the caption for ALT text until ALT text can be provided on upload.

I tried to track down the theme to make a patch, but it seems it is not open sourced: https://meta.svn.wordpress.org/sites/trunk/wordpress.org/public_html/wp-content/themes/pub/

Attachments (3)

this is the alt text that screen readers find.png (1.2 MB) - added by courane01 2 years ago.
Twitter link preview of the alt text for a Photo submission
5985.diff.1 (1.3 KB) - added by alexstine 2 years ago.
Adds alt attribute based off caption with fallback text if one does not exist.
5985.diff (1.1 KB) - added by alexstine 2 years ago.
Adds aria-label and empty alt.

Download all attachments as: .zip

Change History (15)

This ticket was mentioned in Slack in #accessibility by alexstine. View the logs.


2 years ago

#2 @alexstine
2 years ago

  • Summary changed from Use caption in ALT text for single photos to Accessibility: Use caption in ALT text for single photos

@courane01
2 years ago

Twitter link preview of the alt text for a Photo submission

@alexstine
2 years ago

Adds alt attribute based off caption with fallback text if one does not exist.

#3 @alexstine
2 years ago

  • Keywords has-patch needs-testing added; needs-patch removed

Added a patch which should hopefully solve this.

This ticket was mentioned in Slack in #meta by alexstine. View the logs.


2 years ago

#5 @coffee2code
2 years ago

Thanks for bringing this up @alexstine, and for the patch!

As you surmised, there is indeed the intent to include an explicit ALT text field for photos, separate from what is currently labeled "Description". Once implemented, description will be treated solely as a caption.

At the moment, the description pulls double duty. In grid views, it is used as ALT text. In the single photo view (which is the view in question for this ticket), it is displayed as a figcaption associated with the image.

In an ideal world, ALT and caption are both defined and both different, with the former being a functional description of the photo subject matter. But since we don't have both, I haven't been sure which is the best approach.

According to this article, having the ALT and figcaption being the same seems like the text will be announced twice by screenreaders? Then again, a figcaption while ALT is an empty string means there's no context to the caption for screenreaders.

The patch adds the ALT text and retains use of the same text for the caption (the latter necessary for those seeing the page). Is that the best accessibility approach given the current situation?

#6 @coffee2code
2 years ago

And to clarify the image attached by @courane01, the "20661e8d52" being pointed to is the post title. The text "Cowans Gap State Park spillway in autumn" is the description/caption. A photo in the single view does not currently specify the ALT attribute since the text is already shown as a figcaption.

#7 @alexstine
2 years ago

@coffee2code It may actually be better to omit the defined ALT text all together and just have an empty alt attribute. An empty alt attribute will prevent screen readers from reading the string of letters/numbers for the title which clearly doesn't make sense to blind users. Then if a caption exists, users can get an idea of the image from that.

Thoughts?

Long term, I would like to see an ALT text field get added.

Thanks.

#8 @coffee2code
2 years ago

We don't currently define ALT attribute on the photo img tag at all on single photo pages at present.

Currently:

<img class="single-photo" src="{url}" srcset="{srcsets}">

To clarify, the string of letters/numbers (the "20661e8d52" in the attached photo) is the title of the single page containing the photo. Its appearance in the Twitter link preview is undoubtedly because that text is explicitly configured as the og:title of the page, and I'm not sure that it relates to the presence (or not) of the ALT attribute for the img tag. (May suggest a different concern though, worth a separate ticket.)

So I'm not clear which is the current best approach given the current situation and until we properly allow for an ALT input field:

  1. Leave things as-is (no ALT attribute at all)
  2. Add an ALT attribute but make it an empty string (alt="")
  3. Something else? (text appears in figcaption as done presently, but also duplicated in ALT?)

#9 @alexstine
2 years ago

@coffee2code What I am trying to say is without alt attribute, the title of the page is read when you Tab to the image link so adding alt text would be the thing to do here. My problem in this context with empty alt is then you would just hear link. I have come up with a solution, let me know what you think of this patch.

Thanks.

@alexstine
2 years ago

Adds aria-label and empty alt.

#10 @coffee2code
2 years ago

  • Owner set to coffee2code
  • Status changed from new to accepted

@alexstine Thanks for the context! I wasn't aware the page title is read when tabbing to the image link. The patch looks good and will be landing momentarily.

#11 @coffee2code
2 years ago

  • Resolution set to fixed
  • Status changed from accepted to closed

In 11604:

Photo Directory: Improve single photo view image accessibility.

Specifies aria-label attribute on outer a and empty alt on img itself. An interim improvement until proper alt text gets associated to photos.

Props alexstine.
Fixes #5985.

This ticket was mentioned in Slack in #meta by tellyworth. View the logs.


13 months ago

Note: See TracTickets for help on using tickets.