Current staff

Image captions and alt text

  1. Home
  2. Information and services
  3. Information technology
  4. Web and intranet sites
  5. Web writing guide
  6. Images for the web

Captions and alt text provide information about an image to users and search engines.

Captions

You can use captions to provide extra contextual information about an image, or to credit to the owner of an image. Captions can only be added to images inserted through the WYSIWYG editor.

To insert an image with a caption:

  1. Select the 'Insert Image' icon in the WYSIWYG editor.
  2. Add your image and tick the 'Captioned image' box.
  3. The image will display in the WYSIWYG editor with the text 'Caption' below it. Replace this text with your caption.

Aligning captioned images

To align a captioned image to the left or right of the page, click the align left or align right button at the top of the WYSIWYG editor.

To align a captioned image to the centre of the page, click the 'Source' button in the WYSIWYG editor and change the class of the <figure> tag to: <figure class="image align-center">

Alt text

Alt text, or alternative text, is a written description of an image. It's often used by users who are visually impaired and appears in place of images if a user has them turned off, or if an image fails to load.

Alt text also helps search engines better recognise your images – contributing to your website's SEO.

Because alt text is required for disabled accessibility, you'll need to include it for all images within the content of your page.

To add alt text when uploading an image:

  1. Select the 'Insert Image' icon in the WYSIWYG editor
  2. Add your image.
  3. Enter alt text into the 'Alternative text' field and click 'OK'.

Writing good alt text

There's a few things to keep in mind when writing alt text:

  • Be succinct and provide a vivid summary of the image.
  • If your image also has a caption, include 'Caption below' in your alt text.
  • Don't use the phrase 'Image of...' to describe your image. Screen readers are programmed to identify images and automatically say 'image' before reading alt text.