Make WordPress Core

#27402 closed defect (bug) (fixed)

Add aria-describedby to image gallery output

Reported by: joedolson Owned by: wonderboymusic
Milestone: 4.1 Priority: normal
Severity: normal Version: 3.9
Component: Gallery Keywords: has-patch 4.0-early commit
Focuses: accessibility Cc:


With the addition of figcaption and figure support to gallery output, there's limited support for assistive technology to programmatically associate images with their descriptions. Adding aria-describedby to the output would improve cross-browser support as well as adding a programmatic relationship when figcaption/figure is not being used.

See: #26697

Attachments (5)

27402.patch (741 bytes) - added by joedolson 18 months ago.
Add aria-describedby support to gallery output
27402.2.patch (2.4 KB) - added by joedolson 18 months ago.
Sets aria-describedby directly to img
27402.3.patch (2.8 KB) - added by DrewAPicture 16 months ago.
27402.4.patch (2.7 KB) - added by rianrietveld 11 months ago.
Refresh of 27402.4.patch
27402.5.patch (729 bytes) - added by bradyvercher 10 months ago.

Download all attachments as: .zip

Change History (27)

@joedolson18 months ago

Add aria-describedby support to gallery output

comment:1 @DrewAPicture18 months ago

  • Keywords 2nd-opinion added
  • Milestone changed from Awaiting Review to 3.9

Seems like this would be a logical pairing with the HTML5 stuff added in #26697.

Looking at 27402.patch, should we not also add the attribute to the $captiontag/figcaption section a few lines down?

comment:2 @joedolson18 months ago

Yes; there are problems with this patch. I didn't look carefully enough at what the variables actually represented. I'll take another stab at it. Rally, the $selector-$id ID pair should be moved off $icontag and onto $captiontag.

Will upload update patch shortly.

comment:3 @joedolson18 months ago

Actually, I'm going to need to pass the aria-describedby parameter into the <img> element, otherwise, this won't work properly in screen readers. Will revise and update.

@joedolson18 months ago

Sets aria-describedby directly to img

comment:4 @joedolson18 months ago

Patch updated. In order to make this work, I had to be able to pass an $attr array through wp_get_attachment_link into wp_get_attachment_image. Tested and works; hopefully I updated the docs appropriately, as well.

comment:5 @joedolson17 months ago

  • Keywords has-patch added

comment:6 @nacin17 months ago

  • Keywords 4.0-early added
  • Milestone changed from 3.9 to Future Release

I did some reading on this. I think it's a good change, but it came in a bit late for 3.9. (It also doesn't factor into the HTML5 caption stuff, as in it isn't critical to be paired with it.) Let's get this thoroughly tested and ship it in 4.0.

@DrewAPicture16 months ago


comment:7 @DrewAPicture16 months ago

  • Keywords 2nd-opinion removed

27402.3.patch adds some coding standards stuff and clarifies the parameter description for $attr.

comment:8 @wonderboymusic12 months ago

  • Milestone changed from Future Release to 4.1

$image_output = wp_get_attachment_link( $id, $size, false, false, false, $attr ); .... good times.

comment:9 @ircbot12 months ago

This ticket was mentioned in IRC in #wordpress-ui by _Redd. View the logs.

comment:10 @ircbot11 months ago

This ticket was mentioned in IRC in #wordpress-ui by _Redd. View the logs.

@rianrietveld11 months ago

Refresh of 27402.4.patch

comment:11 @rianrietveld11 months ago

Added a refresh of 27402.3.patch (meaning version 3.patch in stead of 4.patch as I mentioned in the description with the patch)

Last edited 11 months ago by rianrietveld (previous) (diff)

comment:12 @rianrietveld11 months ago

  • Keywords needs-testing added

comment:13 @ircbot11 months ago

This ticket was mentioned in IRC in #wordpress-ui by RianRietveld. View the logs.

comment:14 @bramd11 months ago

  • Keywords needs-testing removed

Tested with NVDA + Firefox, works fine. However, be aware most users will read the page line by line (e.g. in virtual mode) en miss the semantic relation.
We can't fix that and just have to wait until fig and figcaption improves in user agents and assistive tech.

comment:15 @arush11 months ago

  • Keywords needs-testing added

Expected behavior by screen reader users is that links are accessible in the tab order while captions are generally read using the arrow keys. Browsers are not passing the figcaption info correctly to the DOM yet, so this info isn't getting passed to screen readers. Nonetheless this is the correct way to use the standard and browsers/screen readers will catch up so I recommend this patch be passes.

comment:16 @arush11 months ago

Tested with VoiceOver and it works.

comment:17 @arush11 months ago

Tested with Jaws, see comment above concerning screen reader expected behavior

comment:18 @rianrietveld11 months ago

  • Keywords needs-testing removed

comment:19 @DrewAPicture11 months ago

  • Keywords commit added

comment:20 @wonderboymusic11 months ago

  • Owner set to wonderboymusic
  • Resolution set to fixed
  • Status changed from new to closed

In 29914:

Add a 6th (!) attribute to wp_get_attachment_link() to allow aria-describedby to be added to gallery output.

Props joedolson, DrewAPicture, rianrietveld.
Fixes #27402.

comment:21 @bradyvercher10 months ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

Galleries that have photos with captions and link to the media files are throwing errors. It looks like the attributes array needs to be passed to wp_get_attachment_link() as the 6th(!) parameter rather than the 5th.

@bradyvercher10 months ago

comment:22 @wonderboymusic10 months ago

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

In 30161:

In gallery_shortcode(), when the link attribute is equal to file, make sure to pass $attr as the 6th (!) argument, not 5th, to wp_get_attachment_link().

Props bradyvercher.
Fixes #27402.

Note: See TracTickets for help on using tickets.