Add aria-describedby to image gallery output

[joedolson]

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

Add aria-describedby support to gallery output

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?

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.

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.

Sets aria-describedby directly to img

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.

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.

standards

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

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

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

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

Refresh of 27402.4.patch

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)

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

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.

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.

Tested with VoiceOver and it works.

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

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.