Whenever you find yourself typing on a keyboard, you need to be thinking about digital accessibility. You might be writing an email to a student or colleague, posting something on social media or producing a document – digital accessibility is important in all of these scenarios.
Many of the rules and best practices around digital accessibility apply to all of these scenarios. Read on to find out more.
General principles
Structure is essential for those using assisted technologies such as screen readers, who rely on properly formatted headings to navigate documents. By structure, we mean specifying what is a heading (and how important that heading is within your text) and what is normal paragraph text (ie underneath your headings). Adding this structure creates a map or navigation menu of headings and sub-headings for those using screen readers to follow – it's their way of scanning a page for the information they're looking for without having to read the whole thing.
- Break up your text into sections – Have one main heading (Heading 1) and then as many levels of sub headings (Heading 2, Heading 3, Heading 4 etc) you require. The lower the number, the more important the heading. Ie the main heading will be Heading 1. Headings can be added in word processing software such as Microsoft Word, in content management systems and in many email programmes.
- Do not use bold text in place of heading and paragraphy styles – screen readers won't recognise bold text as a heading.
- Use bullet points and numbered lists to break up large chunks of text where possible.
- Add a table of contents and summaries to longer documents to allow screen reader users to get an idea of what information is being provided without havign to read it in its entirety.
You can read more about how to add a structure to a document in our guidance for producing accessible documents.
It is important that all digital content is accessible to those with visual impairments or colour blindness.
Follow these rules to ensure your colour combinations are accessible.
- Avoid green/red, blue/purple and light green/yellow.
- Make sure colour is not the only method of conveying meaning, eg by saying "Click the red button" or "Read the information in the blue box". Always ensure that colour isn't the only way of conveying meaning. For example, a line graph using a combination of lines comprised of dots, dashes, squares etc, and don’t rely on colour, will ensure those with colour vision deficiencies can still interpret the information in the graph, particularly when the graph relies on a key.
- Always ensure sufficient contrast between text and background colour in your document. To do this, simply use one of the accessible colour combinations provided as part of our colour palette – this will also ensure your colours are on brand. The Microsoft Office Accessibility Checker will also list any accessibility issues in your documents, including insufficient colour contrast, and if there are any other colour combinations you need to test you can use WebAIM's Contrast Checker.
Whenever you add an image in a digital context (this could be to a document, email, social media post or web page) you will be given the option to add image alternative (alt) text. Similar to link text, which describes the link on your page, image alt text describes an image for those who can’t see it. Your image alt text should be an accurate description of what is depicted in the image and should adhere to the following rules:
- Do not include “Photo of” or “Image of” – the screen reader will identify that it is an image automatically.
- Avoid using images that feature text – where it is necessary to do this, eg for a graph or a diagram, ensure you include comprehensive image alt text and, if necessary, also include a text interpretation of the diagram on the page.
- If an image is purely for decorative purposes, eg a coloured banner, you can mark it as decorative. Microsoft Word provides a tick box for this but in other digital scenrios, eg when adding an image to a web page, leave the alt text field empty.
- The alt text of functional images or icons, eg an arrow that takes you to the next page, should be the function of that image, ie "Next" or "Back".
- The alt text of a logo, for example a the top of document, can be the brand name so, in our case, London Metropolitan University.
Links are often read by screen readers in isolation of the text around them. This is to help visually impaired people access the information they’re interested in as quickly as possible – the equivalent to a sighted user scanning a web page or document for any links they may find useful. When including links in a document, web page or email, there are a number of rules you need to follow to ensure your links are accessible:
- Never paste a whole url, or even a shortenend url, digitally – you must always use link text instead. No one accessing anything online needs to know the specific url of a page – they just want to be taken to the relevant information.
- Make sure the text that is linked is an accurate description of what information the link leads to. For example, read the University’s latest strategy. If you wish, you can also link the whole phrase “read the University’s latest strategy” so that is acts as a call to action.
- Avoid linking phrases such as “click here” or “this link” as these give no indication of the information you will find at this link when read in isolation.
- Links must use a colour that has at least a 4.5:1 contrast with the background colour of your document and also a 3:1 contrast between the link text colour and your standard font colour. We recommend you use the same link text colour as we use on our website, which has the hex code #415dec. Please note, your link text also needs to have another differentiating factor in addition to colour, eg bold or underlined text.
Sharing links on social media platforms is slightly different. When pasting a link into a social media post, the platform will often generate a preview of the page being linked to and therefore link text isn't required in these scenarios.