Please note: while the written guidance in this article should be up to date, the screenshots may not be. Please bear with us. We’re carrying out work to update all the screenshots in the Knowledge Base for Citizen Space 7 and (hopefully) to automate the process for future. Thank you for your patience!
Alternative text should be added to every image you add to Citizen Space.
It is an essential element of web accessibility: it can be read by screen readers giving people with visual or cognitive impairments a description and function of the image you’ve chosen.
How to add alt text
When you select the 'Insert image' icon to add an image to Citizen Space you’ll see an ‘Alternative text’ box underneath the image url.
Add the description of your image here:
The description should:
- be brief (around 15 words)
- be accurate
- present the content and/or function of the image
- not duplicate information provided about the image, e.g. if the image title is already included in the text
- not include the words ‘image of’ ‘picture of’, etc. It is usually apparent to the user that it is an image.
When you’re happy with your alternative text, select 'OK'.
- The W3C have an alt text decision tree tutorial with more detailed guidance based on the type of image you are using (decorative, functional or informative)
- WebAIM also have a helpful alt text guidance article with examples
- The Bureau of Internet Accessibility's 8 common alt text mistakes and how to fix them
- The Big Hack's guide on how to write better alt text with examples
- AbilityNet has a good article with further details on image types
- Axess Lab has a self-proclaimed ultimate guide on alt text, with good examples
You can read also read this article if you would like more information about how to create accessible online activities.