Creating accessible web pages

Follow the instructions on this page to create accessible web pages that are compliant with WCAG 2.1

Before you start

To create accesible web content most of the work has been done for you. The digital team are creating the components library.

This will be a set of common web components designed to meet WCAG 2.1 accessibility guidelines. If you stick to using these components, changing nothing apart from the content, then you will have no more extra work to make your page accessible.

The current components library is mostly compliant, there are a few areas which we are still developing.

How to improve accessibility

Take the following into consideration when designing your web page:

Colour

When using colour and images with text, we aim to make sure colour combinations are at the very least WCAG 2.1 AA compliant and preferably AAA compliant. To achieve this, all work must be checked against the WebAIM colour contrast checker.

If you’re a roster designer, see our brand colour palette. This must only be used for new digital designs and not to override the existing colours of agreed web page components.

Tip: Do not rely on colour alone to convey meaning as some users may see colours differently.

Images

Images should include alt tags if they play a part in the content of the page. Alt tags provode a text alternative to the image that will be read out loud by screen reader software for users with impaired vision.

An alt tag should be short (no longer than 125 characters) and help users understand the image, its purpose and how it relates to the content.

Avoid using images with text as part of the image and images which convey information which can't then be described in the alt tag or in a description aligned to the image.

Here is an example of an image with an alt tag:

Students enjoying a lecture

<img src="/images/nav_blocks/spotlights/study/left/international-students.jpg" alt="Students enjoying a lecture" />

Page content structure

Some users may be using assistive technology to read a web page so it’s important to lay the page out in a logical structure, breaking content up in meaningful chunks with informative headers, paragraphs and bulleted lists.

See our best practice for web editors to find out about intuitive navigation.

Links

Links are important for accessibility. The link anchor text should be descriptive, telling the user what to expect. Linked text should clearly tell the user what the function of the hyperlink is.

Ensure all linked text is unique to the page and avoid using text such as "click here".

Consider a case where you have three "click here" links on a page and a voice command user instructs the browser to click the "click here" link. Which should the browser use? 

See our best practice for web editors for examples of this.

Hyperlinks must be visually unique and consistent, therefore we request that you do not try to change the style of links on our website.

Tables

Tables should only be used as data tables and not to lay out a page as screen readers may struggle to interpret them.

See data table examples in our external template and an internal template table example.

Video and audio

Read about making video and audio accessible.

Developers

See resources for developers.


You might also be interested in:

Tip: If you are looking to create accessible teaching documents or create resources for Canvas then please visit the TEL digital accessibility toolkit.