Add role="group" to <figure> to meet WCAG requirements

I'm not sure about this. This is for Groups of Images. I don't think we have a way to display "Multiple images conveying a single piece of information" in Core. We can create figures & captions, but in general you don't use ARIA if the HTML5 already conveys the semantic meaning.

The example that you provided is about a different use case than we can satisfy in Core. Now, in a contributed module (such as a gallery) then this probably would be useful. Collections are sometimes intended to be viewed as groups with a single meaning.

Pulling from the example. We can only do this:

	<figure role="group" aria-labelledby="fig11">
		<img src="castle-etching.jpg"
			alt="The castle has one tower, and a tall wall around it.">
		<figcaption id="fig11">Charcoal on  wood. Anonymous, circa 1423.</figcaption>
	</figure>

In which case because we can't semantically group the set of figures (as they have done in the example) it isn't appropriate to use role="group"

We can mark this for consideration in D9 when hopefully we get this type of functionality through FAPI to control images.

Ok, that makes sense.. It would be great to be part of RGAA for sure.

I just went to test it though. Figured the easiest way to test it would be in the WYSIWYG as there's a nice caption checkbox which should allow me to just upload an image, enter an alt text and put in a caption.

Sadly the caption wasn't sticking. I'm not sure if this is related to the patch or a new issue but thought I'd check with you for the best way to test this.

This isn't a problem introduced with the patch. It's still an issue that's difficult to test at the moment.

Clear documentation on how to test this would be great.

I uploaded the caption button from CKEditor.

It's now being worked on #2540850: (regression) EditorImageDialog alignment & captioning are not working so hopefully this gets fixed soon.

Looks good to me. I've done the manual testing to demonstrate the role="group" has been added to the <figure>

I'm just running the bots against it again just to make sure, but am happy to mark this RTBC.

Committed and pushed to 8.0.x. Thanks!

Once we add role="group", I think we're also expected to have an aria-label or aria-labelledby to add a label to the element.

#22 is correct. To meet WCAG accessibility standards, elements with role="group" need to have an aria-labelledby attribute with a value that matches the id of the figcaption element in the case of a caption, or an aria-label attribute if there is no caption.

Has anyone made any progress on the point that #22 & #23 bring up? Some accessibility checkers flag this as an error, Siteimprove for example.

I am also interested in figuring out how an accessible label should be added to a media element, if it's going to include role="group." Ideally it would be aria-labelledby, but what will that reference--the figcaption, or a heading? Maybe it's just an aria-label someone can add when uploading media?

It doesn't seem like template overrides allow access to title or configuration label variables, so currently accessible naming is a bit tough.

Any progress or home-brewed patches for the issue brought up by #22? We have on our captioned images, but no aria-label and Site Improve hates this and is penalizing us for every captioned image on the site. As a research-oriented site with lots of in-line images, this is...not good.

@mepperly I created a child ticket for this issue, since the issue is no longer specifically about adding a role, but now about adding a name to that role: <figure> elements with a role of group need an accessible label.

The only thing I did this without realizing that there's potential to remove the role="group" by default from in the first place (that issue is linked in the child ticket). Interested to see the take on that...