Figure

A figure is an image with a caption.

Only use images if there’s a real user need.

Use a figure component when:

• you need to display an image with a caption that adds context, explanation, or meaning
• the image is referenced in the page content (‘See Figure 2’)
• the caption provides important information not present in the image alone
• are showing screenshots of systems, which need annotation
• provide visual examples that support the main text

The caption should add information that helps all users understand the image’s relevance and meaning.

Use a plain image, without a caption, when:

• the image is decorative
• the image is part of design or iconography, not content
• the image does not require further explanation or referencing, like a logo

Make sure any information contained in an image can be understood by someone who cannot see it.

Write captions that add value beyond what’s visible in the image:

• explain what the image shows and why it’s relevant to the content
• provide context that helps users understand the image’s significance
• include data sources for charts and graphs
• avoid simply repeating what’s obvious from the image itself

Structure your alt text and captions to work together:

• use alt text to describe what the image shows
• use captions to explain why it matters or what users should understand from it
• for complex images, provide detailed descriptions in the caption or link to separate explanations

For charts, diagrams, and complex images, consider whether the same information could be presented more accessibly as a table or structured text.

You might want to put the diagram’s alternative text in a details component after the figure.

A lightbox is a figure with a link to ‘View larger version’ of the image.

Selecting the link opens the image in a modal, allowing users to view it at a larger size.

Use a lightbox when:

• images contain fine detail that’s hard to see (detailed diagrams, complex charts, technical drawings)
• users need to examine specific parts of an image closely (annotated screenshots, process flows)
• the image quality or legibility significantly improves at larger sizes
• users might want to zoom in on particular sections