How to add 'Alt text' to images in Citizen Space

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 to this 'Alternative Text' field.

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'.

Additional resources

• The W3C have an alt text decision tree (opens in new tab) 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 (opens in new tab) with examples.
• The Bureau of Internet Accessibility's 8 common alt text mistakes and how to fix them (opens in new tab).
• The Big Hack's guide on how to write better alt text (opens in new tab) with examples.
• AbilityNet has a good article with further details on image types (open in new tab).
• Axess Lab has a self-proclaimed ultimate guide on alt text (opens in new tab) with good examples.

You can read also read this article if you would like more information about how to create accessible online activities.