WordPress.org

Make WordPress Core

Opened 15 months ago

Closed 7 months ago

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

Description

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 15 months ago.
Add aria-describedby support to gallery output
27402.2.patch (2.4 KB) - added by joedolson 15 months ago.
Sets aria-describedby directly to img
27402.3.patch (2.8 KB) - added by DrewAPicture 13 months ago.
standards
27402.4.patch (2.7 KB) - added by rianrietveld 8 months ago.
Refresh of 27402.4.patch
27402.5.patch (729 bytes) - added by bradyvercher 7 months ago.

Download all attachments as: .zip

Change History (27)

@joedolson15 months ago

Add aria-describedby support to gallery output

comment:1 @DrewAPicture15 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 @joedolson15 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 @joedolson15 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.

@joedolson15 months ago

Sets aria-describedby directly to img

comment:4 @joedolson15 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 @joedolson14 months ago

  • Keywords has-patch added

comment:6 @nacin14 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.

@DrewAPicture13 months ago

standards

comment:7 @DrewAPicture13 months ago

  • Keywords 2nd-opinion removed

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

comment:8 @wonderboymusic9 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 @ircbot9 months ago

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

comment:10 @ircbot9 months ago

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

@rianrietveld8 months ago

Refresh of 27402.4.patch

comment:11 @rianrietveld8 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 8 months ago by rianrietveld (previous) (diff)

comment:12 @rianrietveld8 months ago

  • Keywords needs-testing added

comment:13 @ircbot8 months ago

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

comment:14 @bramd8 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 @arush8 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 @arush8 months ago

Tested with VoiceOver and it works.

comment:17 @arush8 months ago

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

comment:18 @rianrietveld8 months ago

  • Keywords needs-testing removed

comment:19 @DrewAPicture8 months ago

  • Keywords commit added

comment:20 @wonderboymusic8 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 @bradyvercher7 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.

@bradyvercher7 months ago

comment:22 @wonderboymusic7 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.