Webpage accessibility guidelines at Warwick
Essential guide to accessibility
This list offers you a blend of legal requirements and best practice from our digital teams. You can either use this as a quick checklist, or discover more about each point in detail. Either way, if you follow these guidelines, your content will be easy for everyone to access and understand.
If you tend to go beyond Sitebuilder basics, you should sign up for advanced training instead.
Simple language and plain English
You need to make sure that your copy is readable and understandable for all our audiences. This helps non-native speakers, as well as users who process information differently. All you need to do is follow these principles:
- Keep your text at a reading age of Grade 9 or below
- Keep your sentences under 25 words, and paragraphs under 50 words
- Avoid difficult words, metaphors, puns, contractions, abbreviations and acronyms
You can see how to do this in the following quick guide.
Links
Imagine a screenreader reading your links out loud. Would 'click here' or 'read more' tell you anything? What if it read out several identical 'read more' links in a row? You need to create meaningful links which are described properly.
- Ideally you should position links in full separate sentences (or 'calls to action') at the end of a paragraph.
- You should not list a full URL on screen.
- If it is a download link, state the file type and size.
Page titles
Give your page a meaningful title which is under 60 characters long.
Headings
Always use headings and subheadings. Search engines and screenreaders rely on them, and regular users need them to scan-read your content.
Do not use heading tags to format your text. This is a common mistake at Warwick and might be one of the harder things to get used to.
Lists
- Use bullet point lists
- With short sentences of up to 15 words each
- Limit your options to 3 or 4 bullet points
Tables
Only use data tables if it is appropriate and do not use tables to format your page.
If you can write your information in any other way, like bullet points, please do that instead. If you do use a table, make sure you format it accessibly.
Colour as meaning
Do not use colour as the only way to explain or signal something. Some people have colour vision deficiencies. Instead, use a combination of colour, shapes and text to convey meaning.
Colour contrasts
Test your colours to make sure they pass WCAG 2.1 AA standards. This makes sure that they are clearly readable against background colours.
Backgrounds
Do not use lots of light text on dark backgrounds. People find it harder to read. Instead, use white or light background colours for your body copy text.
Bold, italics, all-caps
We sometimes make our text harder to read when we use these features incorrectly, and screenreaders do not pick them up as a form of emphasis either.
Other languages
If you write sentences in languages other than English, you need to add some simple coding to explain the change.
Text alignment
Keep text and content left-aligned. Do not use justified or centred text, as it makes text harder for some users to read and discover - especially if they are magnifying, resizing or zooming on text.
Page width
Do not create a page which has text going across full-width from side to side on Sitebuilder.
This makes it harder for any user to scan-read. It is especially hard for some people with reading or visual disabilities.
Images with text
From now on, you should use Sitebuilder's default settings to add text "on top" of an image, instead of uploading an image containing text. This helps people using screen readers and magnifiers, but also helps your content to resize better on mobiles and tablets, and helps Google to index your copy.
You can see how to do this in the following guide.
How to put text over imagesAlt tags and descriptions
You can use alt tags and descriptions to help your users who use assistive technology or cannot interpret visual information easily.
You can see how to do this in the following guide.
Learn about imagesIcons
Do not create your own icons using images. Instead, learn how to use Font Awesome.
Learn about Font AwesomeTranscripts, captions and audio descriptions
Always provide transcripts for audio recordings and videos. Make sure that your videos have captions. Make sure that any written or visual information is described for people who cannot physically see it.
If you are running a live digital event and want to share recordings online afterwards, you need to provide captions, transcripts and audio descriptions within 14 days after the event.
Autoplay
Do not use any autoplaying elements on your webpages, including gifs. The only exceptions are our standard accessible slideshows, and social media platforms where it is appropriate.
Once multimedia is playing on your pages, users need to be able to pause it.
Do not upload documents online
We appreciate that this might be one of the biggest changes we are making. From now on, you should not be uploading PDFs or documents online. Your web content should be in a normal web page format.
Our decision comes from a combination of accessibility guidelines and best practice for users. Learn more about why we have made this decision, and how it helps your users.
Exceptions
There may be some exceptions to this rule. If you feel that your content really needs to be uploaded as a file online, please talk to us before uploading it.
For example, we can make exceptions when:
- Users genuinely need to download a document (such as a campus map to print off before a physical visit)
- Material is unavailable in another format (such as e-journals, library books, or archive materials)
In these cases if possible, the documents need to be accessibly designed and tested.
Read about exceptionsTesting accessibility
Unfortunately there is no automatic system which can spot all accessibility errors. Nothing beats a manual check, so you need to become familiar with these guidelines.
Having said that, the following tools can help you to spot some errors:
- Axe or Wave accessibility plugins - look on your favourite browser for ways to access these.
- The Hemingway App (for readability)
Essential guide to accessibility
This list offers you a blend of legal requirements and best practice from our digital teams. You can either use this as a quick checklist, or discover more about each point in detail. Either way, if you follow these guidelines, your content will be easy for everyone to access and understand.
If you tend to go beyond Sitebuilder basics, you should sign up for advanced training instead.
Simple language and plain English
You need to make sure that your copy is readable and understandable for all our audiences. This helps non-native speakers, as well as users who process information differently. All you need to do is follow these principles:
- Keep your text at a reading age of Grade 9 or below
- Keep your sentences under 25 words, and paragraphs under 50 words
- Avoid difficult words, metaphors, puns, contractions, abbreviations and acronyms
You can see how to do this in the following quick guide.
Links
Imagine a screenreader reading your links out loud. Would 'click here' or 'read more' tell you anything? What if it read out several identical 'read more' links in a row? You need to create meaningful links which are described properly.
- Ideally you should position links in full separate sentences (or 'calls to action') at the end of a paragraph.
- You should not list a full URL on screen.
- If it is a download link, state the file type and size.
Page titles
Give your page a meaningful title which is under 60 characters long.
Headings
Always use headings and subheadings. Search engines and screenreaders rely on them, and regular users need them to scan-read your content.
Do not use heading tags to format your text. This is a common mistake at Warwick and might be one of the harder things to get used to.
Lists
- Use bullet point lists
- With short sentences of up to 15 words each
- Limit your options to 3 or 4 bullet points
Tables
Only use data tables if it is appropriate and do not use tables to format your page.
If you can write your information in any other way, like bullet points, please do that instead. If you do use a table, make sure you format it accessibly.
Colour as meaning
Do not use colour as the only way to explain or signal something. Some people have colour vision deficiencies. Instead, use a combination of colour, shapes and text to convey meaning.
Colour contrasts
Test your colours to make sure they pass WCAG 2.1 AA standards. This makes sure that they are clearly readable against background colours.
Backgrounds
Do not use lots of light text on dark backgrounds. People find it harder to read. Instead, use white or light background colours for your body copy text.
Bold, italics, all-caps
We sometimes make our text harder to read when we use these features incorrectly, and screenreaders do not pick them up as a form of emphasis either.
Other languages
If you write sentences in languages other than English, you need to add some simple coding to explain the change.
Text alignment
Keep text and content left-aligned. Do not use justified or centred text, as it makes text harder for some users to read and discover - especially if they are magnifying, resizing or zooming on text.
Page width
Do not create a page which has text going across full-width from side to side on Sitebuilder.
This makes it harder for any user to scan-read. It is especially hard for some people with reading or visual disabilities.
Images with text
From now on, you should use Sitebuilder's default settings to add text "on top" of an image, instead of uploading an image containing text. This helps people using screen readers and magnifiers, but also helps your content to resize better on mobiles and tablets, and helps Google to index your copy.
You can see how to do this in the following guide.
How to put text over imagesAlt tags and descriptions
You can use alt tags and descriptions to help your users who use assistive technology or cannot interpret visual information easily.
You can see how to do this in the following guide.
Learn about imagesIcons
Do not create your own icons using images. Instead, learn how to use Font Awesome.
Learn about Font AwesomeTranscripts, captions and audio descriptions
Always provide transcripts for audio recordings and videos. Make sure that your videos have captions. Make sure that any written or visual information is described for people who cannot physically see it.
If you are running a live digital event and want to share recordings online afterwards, you need to provide captions, transcripts and audio descriptions within 14 days after the event.
Autoplay
Do not use any autoplaying elements on your webpages, including gifs. The only exceptions are our standard accessible slideshows, and social media platforms where it is appropriate.
Once multimedia is playing on your pages, users need to be able to pause it.
Do not upload documents online
We appreciate that this might be one of the biggest changes we are making. From now on, you should not be uploading PDFs or documents online. Your web content should be in a normal web page format.
Our decision comes from a combination of accessibility guidelines and best practice for users. Learn more about why we have made this decision, and how it helps your users.
Exceptions
There may be some exceptions to this rule. If you feel that your content really needs to be uploaded as a file online, please talk to us before uploading it.
For example, we can make exceptions when:
- Users genuinely need to download a document (such as a campus map to print off before a physical visit)
- Material is unavailable in another format (such as e-journals, library books, or archive materials)
In these cases if possible, the documents need to be accessibly designed and tested.
Read about exceptionsTesting accessibility
Unfortunately there is no automatic system which can spot all accessibility errors. Nothing beats a manual check, so you need to become familiar with these guidelines.
Having said that, the following tools can help you to spot some errors:
- Axe or Wave accessibility plugins - look on your favourite browser for ways to access these.
- The Hemingway App (for readability)