Guidance for web copy editors

Follow these basic considerations to help you meet accessibility requirements and make your web content more inclusive for all users.

Write text alternatives for images

The alt text should be concise: no more than a sentence or two.
Where you enter the alt text will depend on the CMS you are using (T4, WordPress, Campus Solutions etc.).
Think about whether the image informative, functional or decorative.
If the image is giving extra information to the user, put that same information into the alt tag so that it's available to people who aren't able to see the image. An example: "University students and tutors undertaking research in a pharmacy lab."
If the image is decorative, include the alt tag but leave it empty. The screen reader will then just skip it. (Note that standard T4 templates do not currently allow for the alt text to be left empty).
If the image is functional, then the alt text should describe the function. For example, the image might be used to provide a link to another web page. In this case, the alt text might be: "More information about …".
Don’t start your alt text with "The image shows …". The screen reader will automatically announce that it is an image.
Don’t use images of text. They can't be read by screen readers and won’t adapt to the user's preferred text settings (font size, colour contrasts). If you use text in a banner image, say, make sure the alt text provides the same information.

Infographics, graphs and charts often convey a lot of information. You may not be able to describe this in a concise alt text.
Use alternative means such as a caption or accompanying text to explain this information. Refer to the caption or text in the alt text.
If necessary, add a link to a different page with a longer description.
If using charts, include a link to the table of data.
In the case of infographics that contain a lot of text, provide a transcript.
Make sure you use colours that provide the best contrast.
If your graph has several different graph lines, don’t rely on colour to distinguish them. For example, use different symbols (squares, circles) to plot the points on the graph, so that people who are colour blind can still tell the lines apart.

For audio-only content, such as podcasts, provide a transcript. For audiovisual content, such as marketing videos, provide subtitles. Transcripts and subtitles should also include references to all other sounds present (music, sound effects, etc) and non-spoken information that helps understand the overall content, for example "Two students are talking with their tutor in front of the Chemistry building", and so on.
YouTube and the University portal provide automatic subtitles. These are a good starting point but will need to be edited before publishing.
See guidance for adding subtitles and other alternative media to video and audio.

Organise your content into sections with good headings. Avoid turning your web page into a 'wall of text'.
Headings must be organised logically. People using screen readers will navigate the page and find the information they want using the headers, and these must describe the topic and purpose of each section.
Make sure your headings are set up properly using the built-in heading levels in your CMS. Remember to use H1 only once (for the main header) and follow with H2 for subsections which each can have nested subsections using H3, H4, etc.

If you want to emphasise some text, use bold instead of italic or underline and don’t use heading styles (H1, H2, etc) to highlight important content.
Use the built-in list feature in your CMS when you want to create a list. Don’t use hyphens, for example, to suggest the items are part of a list.
Don't use tables to create the layout of your page or to position content on the page. Only use tables for showing data.
Use a clear sans-serif font, if you have the choice.
Use left-justified text instead of fully-justified text.
Avoid using ALL CAPS.
A font size of 16 point or equivalent is recommended in general, if you have the choice.

Don't use generic links like 'Click here' or 'Read more'. If a user is using a screen reader and calls up a list of the links on the page, these generic link titles will be of no use to them. An example of how to hyperlink text correctly would be: "Read more about accessibility guidelines"
The link and the link text alone should tell the user everything they need to know about where the link is taking them.
Make sure the link text is unique on your web page and that it makes sense by itself, without the user having to read the text around it.
You don't necessarily need to say that the link will open in a new tab or window.

Keep your text simple.
Aim to use shorter sentences and simpler words with fewer syllables.
Be direct and use the active voice (‘We received your letter ...’ ) instead of the passive voice (‘Your letter was received …’).
Avoid jargon and abstract ideas.
Define any terminology and explain concepts.
Use images to break up the text.
Avoid writing instructions that rely on sensory information (shape, size, colour, location, sound). The user may not have access to this, or the page may look different to them. For example, don’t write things like: ‘Please pick one of the options on the right…’, ‘Click on the red square…’, ‘See the box below …’.
Aim for a reading age of 'lower secondary education', where possible, to make content available to a wider audience (this equates to 11-13 years old in the UK). An exception to this is where you are writing technical or academic text.
- You can measure reading level using Microsoft Word Readability Statistics, the Hemingway Editor, WebFX Readable, or the WordPress add-on Yoast.
- For more information see the WCAG guidance on reading level.