Skip to content

Revisit figcaption styles #4241

Open
@kfranqueiro

Description

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

Screenshot of Figure 4 from Understanding Non-text Contrast as it exists today, with fully-bolded figcaption text, full width, and extremely low-contrast bottom border

Example of updated styles, including "Figure N" in a preceding paragraph within the figcaption, non-bolded figcaption content, limiting the caption width, and choosing a slightly darker WAI theme color for the bottom border

Metadata

Metadata

Labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions