Revisit figcaption styles

[kfranqueiro]

Figcaptions are currently displayed in bold text, due to styles defined WAI-website-wide in /WAI/assets/css/style.css.

This can perhaps be overwhelming for captions that run particularly long, and also limits options to emphasize content within those captions, as pointed out in #4055 (comment).

On the other hand, the existing bold styles do make it easy to distinguish figcaptions from ordinary paragraphs of text within the body.

Some thoughts that came up in discussion on the backlog TF call on 2025-02-21:

• Make only the leading "Figure N" part of the caption bold
  • Currently these are added by the build system to Understanding docs as separate paragraphs before the content, but not Techniques
  • One technique (G211) has them written in-line within the content
  • If we want to consistently settle on the former, we should remove the few inline instances and consistently apply this across Techniques and Understanding
• Consider options to ensure long figcaptions are still distinguishable from subsequent content:
  • Increase contrast of the divider line below the figure
  • Use a leading-side border or margin to group the figure and its caption
  • Add styles to figure + figcaption to make the caption match the width of the image? (This may be possible with CSS inline-grid + figcaption width trickery)
    • We would probably want to set a min-width, since some figures are not very wide (e.g. Figure 4 in Non-text Contrast)

WIP exploring options on my fork

Example before and (proposed) after:

[alastc]

I liked Patrick's suggestion of having a line/block to the left of both the image and the caption. So long as it isn't confused with blockquotes? If there's a page of WAI components somewhere it would be useful to see how it fits in with other styles.

[patrickhlauke]

I liked Patrick's suggestion of having a line/block to the left of both the image and the caption

I can work on a speculative PR for this

[kfranqueiro]

I liked Patrick's suggestion of having a line/block to the left of both the image and the caption. So long as it isn't confused with blockquotes? If there's a page of WAI components somewhere it would be useful to see how it fits in with other styles.

WAI's blockquote styles only ever include a leading border in instances where there is also a large quote mark in front of it: https://wai-website-theme.netlify.app/components/blockquotes/

[fstrr]

Could we see a few different designs on the same page with the contents of the figure element being different sizes? Maybe make a copy of 1.4.11 and come up with some different designs?

[kfranqueiro]

Possibly worth noting: the WAI design components site has a page on figures, but its only examples use figure class="shrink-wrap", which interestingly features some of the ideas presented above. However, it does not ensure a reasonable minimum width for very narrow images.

[patrickhlauke]

had a little play with what I had in mind here https://codepen.io/patrickhlauke/pen/ogNwdGG

• reset so it's not bold
• make the "Figure..." part bold
• margin top/bottom for figure itself to separate it some more from preceding/following text
• left padding on the caption
• left border on the caption
• just to try it, reduced font size by a shade

I think it looks good even without constraining the width, to be honest ... makes it less "messy" when a page includes different figures of varying width.

[bruce-usab]

Mentioned on backlog call 3/7.

[bruce-usab]

had a little play with what I had in mind...

Thanks! I like all the choices you made. The figure caption text is easy to read, and the visual cues help associate text with figures but distinct from body text. I agree that there does not seem to be benefit from constraining the line width.