Support using captions with labels and legends as headings

[hannalaakso]

What

A user requested that we make labels and legends as page headings support the use of captions.

Here's an example from their service where the page heading is a legend and also has a caption:

If we decide to do this, we should:

1. Make sure that having label/legend with a caption above and a hint below makes sense visually because hints and captions look quite similar.
2. Test this with assistive technologies. With legends as headings it's not clear whether the caption should be inside the legend, fieldset or form group.

Why

This seems like a fairly common use case and at the moment it can't be achieved with the macro. You can still do this using the HTML version of the pattern.

If we don't want to support the use case we could consider adding documentation to explain that.

Who needs to know about this

Devs, Chris

[timpaul]

In triage we agreed to add an example showing this to the 'Question page' pattern: https://design-system.service.gov.uk/patterns/question-pages/

(With the caption in a span outside the heading)

[timpaul]

This came up again in support today

[selfthinker]

Just to make you aware of an accessibility issue we found for a product that was using captions in legends, when the caption is part of the legend it makes it overly long and make the important bit come last.

Legends are read out to screen reader users whenever they encounter a form control within that fieldset. When a legend is overly long, it gets more time-consuming to understand it. When the question isn't front-loaded, it gets more difficult to understand it.

My suggestion would be to move the caption outside of the legend. It annoyingly moves the heading and the caption further apart in the code but it fixes this issue. Although that should only be done if the caption is not important for understanding the question (which is the case in the examples that I've seen).

[edwardhorsford]

Whenever I've had this, I've set the caption outside the legend - for the same reasons as @selfthinker illustrates - you don't want i tread with the radios or checkboxes.