Creating accessible web pages
Follow these instructions to create web pages that are compliant with WCAG 2.1 accessibility guidelines.
Before you start
The good news is that to create accessible web content most of the work has been done for you: we have a components library containing modular components that all meet WCAG 2.1 web accessibility standards.
Stick to using these components. If you change nothing apart from the content, you will have no extra work to make web pages accessible to all.
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. Do not use it 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 provide a text alternative to the image that gets read aloud 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 or images which convey information that 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:
<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.
This means breaking content up into meaningful chunks with informative headers, paragraphs and bulleted lists.
See our best practice on intuitive navigation.
Links
Links are important for accessibility. The link 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 hyperlinked text describes what you are linking to and make each link unique.
Example: Avoid using link text such as “click here”. What if you had three “click here” links on a page and a voice-command user instructs their browser to select the “click here” link? Which one should the browser use?
See our best practice for writing links.
Hyperlinks must be unique in content but visually consistent. Do not try to change the design style of links on our website.
Tables
Tables should only be used for data. Do not use them to lay out a page because screen readers may struggle to interpret them.
See data table examples in our external template and an internal template table example.
Accordions
Accordions should be used when information is supplementary to the main content. They should not be used in place of headings for sectioning web pages. Accordions should not be placed inside other accordions, or contain other components such as tables or navigation elements.
Video and audio
Read about making video and audio accessible.
Checking web pages for accessibility
You can check web pages to see if they meet WCAG 2.1 accessibility criteria.
You will need some specialist software.
Apple VoiceOver is freely available on all Apple devices however NVDA screen reader will need to be installed on a Windows machine. This can be done via a request to ITS.
Paciello group Colour Contrast Analyser (for testing downloadable documents) can also be installed following a request to ITS.
Apple have provided a complete guide to Voice Over which includes a list of all of the keyboard commands required to use the scren reader. WebAIM have produced a guide to using NVDA.
Screen readers
Checking your page with a screen reader allows you to identify if there are any issues could affect the user experience of a visually impaired user. The page will need to be checked with more than one screen reader. Ideally these would be Voice Over for Apple devices and NVDA for Windows.
- Navigate to the page.
- Open the screen reader.
- Attempt to navigate the page. Use both the mouse and keyboard commands (Ctrl+Alt+Arrows on Mac, just the arrow keys on Windows).
- To navigate tables an extra step is required for Voice Over. The command Ctrl+Alt+Shift+down arrow is required to enter the table. The command Ctrl+Alt+Shift+up arrow is required to leave the table. This is not required with NVDA.
If you have created your page using the components library then there will be no issues with screen reader compatibility once the library is fully developed.
Colour contrast
Checking a web page for colour contrast is straightforward. Copy the URL of the page and paste it into the input box of the WAVE web accessibility evaluation tool. This will give you an immediate accessibility report on your website. Select the Details tab to identify any issues with colour contrast. Selecting each instance of the error will navigate you to the specific case on the page.
This tool will also flag other accessibility issues your page may have. If you have used the components library to create your page, these should be minimal.
Keyboard navigation
Checking navigation of the webpage is as simple as only using the keyboard to navigate the page. If you have created your page using the components library, there will be no issues with keyboard navigation.