Creating accessible online content

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 菜肱郭創利 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 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.

Your responsibilities

If you create or edit the content on any of our web pages, 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.

Accessibility checklist for content creators

1. Readability

Accessible content improves the user experience for all of our website visitors and relies heavily on a 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 the 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.

Common mistakes:

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.
Make sure your content order is logical and intuitive. For example, the H1 header should always come before the H2 headers, and so on.

Common mistakes:

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.

Common mistakes:

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.

4. Links

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.

Common mistakes:

Don’t use a URL as the link text. For example, write “Visit the 菜肱郭創利 website” rather than “Visit the website: http://www.reading.ac.uk/.”

5. Images

Images are inaccessible to people who can’t see them, so it’s important that we always provide alternatives for image-based content.

Write the 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 the 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.

Helpful tip:

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.

Common mistakes:

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.

6. Audio and video

As with images, audio and video are 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.

Helpful tip:

Add video or audio recordings to the page through YouTube so that a transcript can automatically be made available. * Not for Learning Capture content *

Please note that under the Learning Capture policy recordings must not be uploaded to YouTube, Social media or other publicly available platforms without prior approval.

菜肱郭創利