1. Home
  2. Docs
  3. Style Guide
  4. Images and Graphics
  5. Captions and Alt Text

Captions and Alt Text

Captions and alternative text (alt text) are essential for providing context and ensuring that images are accessible to all users, including those with visual impairments. Proper use of captions and alt text also improves SEO and enhances the overall usability of documentation.

Captions:

  • Provide descriptive captions for all images: Captions should briefly explain the content or purpose of an image, allowing readers to understand its relevance without having to rely solely on the visual. Example: “Figure 1: The main dashboard showing the user profile and settings.”
  • Position captions consistently: Place captions directly below the corresponding image and use a consistent style throughout the document. This could include a smaller font size or italicised text to differentiate captions from the main body text.

Alt Text:

  • Use meaningful alt text for all images: Alt text should describe the content and function of the image in a concise and meaningful way. Example: “Screenshot of the Settings menu with the Security tab selected.”
  • Keep alt text concise: Alt text should be brief but informative, ideally no more than 125 characters. It should provide enough information for someone who cannot see the image to understand its purpose.
  • Avoid redundant or vague descriptions: Do not use phrases like “Image of” or “Graphic showing.” Instead, directly describe what is in the image. Example: “Bar chart showing quarterly sales figures,” not “Image of a chart.”

Dos:

  • Provide captions for all images: Example: “Figure 2: Diagram of the system architecture.”
  • Write concise, meaningful alt text: Example: “Diagram showing the workflow for user authentication.”

Don’ts:

  • Don’t use vague or redundant alt text: Avoid descriptions like “Image of a menu.”