Overview
Captions provide necessary image, chart, and table descriptions for screen readers. Every image, except layout images and a hero banner, should have caption text below it.
Design
Bighorn area of Rocky Mountains – Anonymous.
Usage guidelines
Accessibility
See Typography for accessibility guidelines.
Layout
Caption text uses a top padding of 8 pixels. It sits below the image and aligns to the left edge.
Size and positioning
Font size is 14 pixels with a line height of 20 pixels.
Alignment is to the left, directly below the component it is referencing. No background or padding.
Caption text has a top padding of 8 pixels. It sits below the image, aligning it to the edge.
Content guidelines
Caption writing impacts accessibility and search engine optimization results. In some cases a chart converts to an image. Captions can then be used to describe what is in the chart because screen readers do not read text embedded in an image. See About cannabis for an example.
Use captions on all tables and graphs. Typically a caption starts with the word 'Figure' or 'Table' and the associated number in the caption in boldface.
Use the following to help develop a caption:
- describe the image – think of the who, what, where, and when
- use active verb form in present tense
- keep it simple and to the point – maximum 150 characters with spaces
- cite the source of the photo after the description
- use ‘Anonymous’ as the source if the photo is not available
Formatting
- Avoid line breaks.
- Do not use emojis or special characters.