This guide is intended to complement the information in the guide "Adding Images". See that guide for general instructions on adding images to surveys.
What is alt text?
Alt text or alternative text is a short description of an image. It can be accessed by users who rely on screen readers or braille output.
It can also help with search engine optimisation (SEO). Some browsers display alt text as a tool tip when the user hovers over an image.
Add alt text to an existing image using the WYSIWIG editor
-
- To add alt text to an image in a page description, start by clicking Edit Page in Design of your survey.
- To add alt text to an image in question text, start by clicking Edit Question for a question with an image,
- To add alt text to an image in an answer option, click the Edit (Pen and paper) icon for the answer option, then click Enable Editor.
- Mouse over the image you wish to add alt text to.
- Choose one of these methods to edit the image properties:
- Double-clicking
- Right click and go to properties
- Use the Alternative Text field to add a short description of the image.
- Click OK to Save your changes
Tips for writing alt text
- If the image includes text, e.g. a logo, the alt text should include the same text as the image.
- Be succinct – a short phrase or sentence is enough.
- Make the first words the most pertinent to aid anyone who is speed listening.
- Avoid starting with “Image of” – the screen reader will announce the content is an image, so it's not neccesary.
- If it’s helpful for the user to know what type of image it is then include this information at the end of the phrase.
- End with a full stop – the screen reader will pause.
Image links
Always describe the destination of the link.
Web Content Accessibility Guidelines WCAG 2.1 compliance
1.1.1 Non-text Content Level A
2.4.4 Link Purpose (In Context) Level A – for image links
Resources
Informative Images WAI tutorial
GDS content design: Images