Skip to main content Skip to navigation

SiteBuilder

Accessibility

The Public Sector Bodies (Websites and Mobile Applications) (No. 2) Accessibility Regulation 2018 requires that our website and web applications, whether purchased or developed in-house, must be accessible. This means they must comply with the Web Content Accessibility Guidelines (WCAG) 2.2 at level AA. Here is our accessibility statement.

In the UK, one in five people has a disability. While not all disabilities affect access to the web, many do. As we age many of us find it harder to read small print or we see colour in a different way - making the website better for those with disabilities helps everyone.

This article gives advice on the main accessibility issues you should address and details of some free tools and techniques you can use to ensure accessibility. Some checks will require you to review the content manually - for example to avoid unclear wording, text embedded in images or cluttered layouts - but these checks do not require deep technical knowledge.

Many of the examples on this page won't apply unless you're using custom CSS.

Note: SiteBuilder performs automated accessibility checks to identify common issues, but there are a range of additional free testing tools you can use to carry out additional checks on your page:

In this article:

Colour

We encourage using a combination of colour, shape, text and iconography to convey meaning - but remember that colour alone is not accessible, especially for links or error messages.

Do

Use a combination of colour, shapes and text to convey meaning:

Start

Do not

Use colour alone to convey meaning, especially in links or error messages:

A red circle with no text. A yellow circle with no text. A green circle with no text.

To help

Use tools like this colour blind filter to see how your page looks to users with colour vision deficiency.

Back to top

Contrast

To meet the University's obligations, text must have a contrast ratio of at least 4.5:1 with its background.

Do

Use high contrast between foreground and background colours:

High contrasttext in black on a yellow background

Do not

Use foreground and background colours with low contrast:

Low contrasttext in grey on a slightly darker grey background

To help

Use tools like the WebAIM Contrast Checker to find suitable colours.

Back to top

Background images

Where text is displayed on top of an image, we recommend using a solid background colour to ensure contrast between images and text:

This text is easy to read because it has a solid background colour.

This text is difficult to read because it has no background colour.

Back to top

Page structure and readability

The GOV.UK guide to Content design: planning, writing and managing content is a useful entry point to creating good content. The University's Publisher Support Hub also has a section with advice for Writing for the Web.

Page structure

How you lay out your page can improve the experience for users with assistive technologies, and help make it easy for all visitors to find the information they're looking for.

Do

  • Make page headings unique, relevant and informative.
  • Use logical heading levels that convey the structure of your page
  • Use sub-headings and bullets to break up information.
  • Use sentence case for headings.
  • Ensure all content can be navigated using a keyboard only

Do not

  • Use repeated headings, or headings that poorly describe the content beneath them.
  • Use a heading like <h2> within a section headed <h4>, or use heading styles just to emphasise text
  • Use large blocks of continuous text or formatting like bold instead of a heading styling
  • Start every word of a heading with a capital letter.
  • Force use of the mouse to navigate

To help

  • Check that the page headings are meaningful without the rest of the page content.
  • Use the Wave browser extension to easily view heading text and structure.
  • SiteBuilder includes accessibility tools to let you easily identify common accessibility issues, including out of sequence headings.
  • Capitalise only proper nouns and the first letter of the first word in headings.
  • Test your page navigating with just the keyboard.

Readability

In addition to the colour, contrast, and background image advice we've already covered, there are several techniques that will help improve the reading experience of your content.

Do:

  • Write in plain English.
  • Use bold text for emphasis.
  • Use italic text for publication titles, names of works of art and foreign words within English text.
  • Left-align text.
  • Write descriptive and meaningful link captions.
  • Identify changes in the spoken language.

Do not:

  • Use jargon, buzzwords, slang or idioms.
  • Capitalize entire words, or italicise or underline entire phrases.
  • Justify, centre- or right-align text.
  • Write uninformative link captions, e.g. 'Click here', or use the same caption for links to different pages.

To help:

  • Remember the University has an international audience. Paste your text in to the Hemingway app to check its readability grade.

  • Reserve visual weighting for information that needs to stand out.
  • Check for duplicate link caption. Siteimprove and Wave accessibility tools can help with this.
  • Follow this advice about including multiple languages on a page.
Back to top

Images, video and audio

Do:

  • Add descriptive alternative (alt) text to all images that convey any meaning.
    • For decorative images that do not need to be read, select the This image is purely decorative checkbox, in the Components Editor, or use empty alt tags (alt="") in HTML.
  • Provide captions and/or transcripts for audio and video.
  • Enable visitors to control playback and navigate all audio and video content.

Do not:

  • Repeat the image filename, or give poor or non-descriptive alt tags for images intended to convey information.
  • Rely on vision or hearing alone to access information.
  • Automatically play video when a page loads.

To help:

Back to top
Support & feedback Learn to use SiteBuilder SiteBuilder noticeboard User community