Creating accessible online content
(Download this guide as a PDF)
Creating accessible online content means that everyone can interpret our websites in a consistent way, regardless of how they access the content.
Whether they use web browsers, or assistive technology such as screen readers or voice commands, we want everyone who visits the University of Reading online to have an informative, inclusive experience.
We follow Web Content Accessibility Guidelines (WCAG) 2.1 to the AA standard. These globally recognised guidelines were developed by W3C, the organisation that standardises the internet.
The WCAG 2.1 guidelines are a legislated requirement in the UK. They also improve search engine optimisation and create a better overall experience for all visitors to our websites.
If you create or edit content on any of our webpages, please use the resources available in this guide to ensure the pages are WCAG 2.1 compliant.
If you’re working with a third-party supplier on a website for the University, please ensure that the supplier understands and follows WCAG 2.1 principles.
On this page
Accessibility checklist for content creators
- Page structure
- Page functionality
- Audio and video
Accessibility checklist for content creators
Accessible content improves the user experience for all of our website visitors, and relies heavily on clear copy.
- Write in clear, plain English.
- Keep sentences short – no more than 25 words.
- Use simple language and avoid jargon.
- Use sub-headings and bullet points to break up text.
- If you use a language other than English on the page, identify it using the lang attribute – for example, <blockquote lang=”es”> for Spanish.
Avoid writing in all-caps text, except in headlines.
2. Page structure
The information on your page should have a clear hierarchy. This helps assistive technologies and search engines, as well as readability.
- Give your page a descriptive, informative and unique page title.
- Order your content by importance, with the most important information appearing first.
- Use sub-headings to convey structure and meaning. Each sub-heading should be informative and unique on the page.
- Use your content management system’s HTML heading functionality. For example, H1 should always be used for the page heading, H2 should be used for sub-section headings, and H3 should be used for headings that come under the sub-sections.
- Make sure your content order is logical and intuitive. For example, the H1 header should always come before H2 headers, and so on.
- Don’t include instructions based on shape, size or visual location. For example, avoid directions such as “Click the square icon to continue” or “Instructions are in the right-hand column”.
- Do not use the H1 heading for anything other than the page heading. It should only appear once on any page.
3. Page functionality
If you have interactive or special functionality on your page, it’s important that the functionality is as accessible as possible.
- Provide clear instructions for using the interactive content.
- If your page has a time limit, there should be an option to turn off, adjust, or extend the time limit. This is not a requirement for real-time events, such as auctions, where a time limit is absolutely required.
- If your page has flashing content, it should not flash more than three times per second. This is not required if the flashing content is small, the flashes are of low contrast and do not contain too much red.
- If your page has functionality that’s triggered by moving a device (such as shaking or panning a mobile device) or by user movement (such as waving to a camera), users should have the option to disable the functionality, with equivalent functionality provided through standard controls like buttons.
- Don’t use colour as the only means of conveying information. For example, don’t use green to indicate something is correct, or red to indicate something is incorrect, unless you also include an icon or context in the copy.
Accessible links are specific and will make sense even when read out of context.
- Make sure your link text is clear and meaningful. For example, write “Visit the Department of Film, Theatre & Television website” instead of “Visit the department website here”.
- Keep your link text specific and short – no more than 100 characters.
- Don’t use a URL as the link text. For example, write “Visit the University of Reading website” rather than “Visit the website: http://www.reading.ac.uk/.”
Images are inaccessible to people who can’t see them, so it’s important that we always provide alternatives for image-based content.
- Write alternative text (alt text) for all photos and graphics on the page. The text should accurately describe the image.
- Keep alt text short – no more than 100 characters.
- If an image is decorative, or contains content already conveyed in text, it should be given null alt text (alt=””).
- If your image is a link, make sure you describe the link destination in the alt text.
- If you have any complex images, such as a table or graph, provide an alternative way to access the information either on the page, or on a separate, linked page.
- When adding images to the page, make sure any frames or iframes are appropriately titled.
Alternative text, or alt text, tells users about the contents of an image. For example, a person using a screen reader would hear the alt text description of an image rather than seeing the image visually. Alt text should be added in the appropriate field when you upload your image to the content management system.
Images should not be text-based. Copy should only be added to the page as a text element.
Be wary of putting text over images. Contrast can be an issue, and busy images can create a difficult user experience for people with dyslexia or visual impairments.
Audio and video
As with images, audio and video is inaccessible to people who can’t see or hear them, so it’s important that we always provide alternatives for multimedia content.
- Provide captions and audio descriptions for videos on the page.
- Provide text transcripts for audio recordings on the page.
- All embedded multimedia should be identified with accessible text.
- When adding multimedia to the page, make sure any frames or iframes are appropriately titled.
Add video or audio recordings to the page through YouTube so that a transcript can automatically be made available.
Siteimprove extension for Chrome – an accessibility checker that can evaluate any web page for accessibility issues.
WAVE Evaluation Tool for Chrome – an accessibility checker that can evaluate any web page for WCAG 2.1 accessibility issues.
Accessibility colour contrast checker – use to enter the HEX values of two colours to see if they comply with AA accessibility standards.
Create accessible PDFs – use this guide from Siteimprove to ensure any PDF you create and upload online is as accessible as possible.
LexDis Digital Accessibility Toolkit – visit this site to find a number of useful guides, such as understanding the regulations, performing quick accessibility checks, and cheat sheets on many other topics.
W3C’s Resources for Content Writers webpage – read this guidance created specifically for content writers.