Making a webpage accessible is the process of ensuring that the content is open to all users - regardless of the speed of their connection, their choice of web browser or any disability they may have.
Ensuring your webpages are accessible is a legal requirement. Staff in all areas of the University need to be aware of their duties with regards to preparing web content for audiences with disabilities (see the Legal Requirements page for more detail). The 13-stage accessibility checklist below provides the criteria to which you must adhere when creating or editing web content on the University sites.
An introduction to web accessibility
Julia Voortman, Customer Success Manager at Silktide, provides an introduction to web accessibility including how innaccessible sites negatively affect end users, and introduction to the Web Content Accessibility Guidelines (WCAG), the legal ramifications of innaccessible sites and some common examples of accessibility issues and how to solve them. This session took place on 26 August 2020.
Video transcript
Your accessibility checklist:
1. Running a Google Lighthouse audit:
Google Lighthouse is a free auditing tool available on the Google Chrome web browser, helping users to improve the quality of their webpages. By giving your page an accessibility score out of 100, it is a particularly useful starting point for quickly finding any obvious accessibility issues. A page needs to score 100 to be accessible. However, Lighthouse can only flag some of the errors on your page - to be fully accessible you need to follow the steps below.
Find out how to carry out an accessibility audit on Google Lighthouse.
2. Ensuring appropriate alt text:
Alternative text (alt text) is the text given to an image to describe its contents. When an image serves any purpose on a page (eg it is not purely decorative), it requires suitable alt text to clearly describe it so that users who cannot see the image can still understand the content of the page.
Find out how and when to add alt text to images in Contensis.
3. Ensuring appropriate heading levels:
Ensuring that your pages have appropriate headings is key to optimising your webpage’s accessibility and for allowing any user to navigate through the content on your page in the correct order.
Find out how and when to add suitable heading levels in Contensis.
4. Adding captions to videos:
Adding captions to your YouTube videos is essential for both accessibility and general good practice.
Find out how to add captions to YouTube videos you have used on your page.
5. Adding titles to iframes:
Web editors should ensure that iframes (such as Twitter feeds or YouTube videos) are correctly titled so that those using screen readers can easily identify them. If you've used the YouTube embed control in Contensis to add your video, your iframe title will be pulled automatically from YouTube. If you have used an 'include file' or added the embed code to your page, you will need to add the title manually.
6. No custom code or colours:
In order to maintain the identity of our brand and create a consistent user experience, our webpages are created using specific Contensis templates (with consistent layouts, colour schemes, formats and styles etc). By using the templates and controls available within Contensis, you can be confident that your page will be accessible to all users, and you will automatically benefit from any future updates to these features without needing to edit your page.
Some users may have difficulty differentiating between colours, while others may not be able to see colours at all. Hence, colour should never be used to define sections of text. If you are putting text on top of a coloured background, there should be high contrast between the foreground text colour and background text colour to ensure the text stands out to all. Certain colour combinations, such as red and green, should always be avoided.
Find out how to add coloured boxes and buttons to your page in an accessible way.
7. Ensuring no text is placed over an image:
If you are uploading your own image to Contensis, you need to ensure that there is no text within the image, since screenreaders will not be able to read this as text. (Neither will Google, so this will affect your SEO too!) In a minority of cases, for example screengrabs, this may not be possible – so in this case you need to make sure that all text on the image can be described concisely in the body of text and in the image's alt text. You should avoid using the image if this is not the case.
8. Ensuring PDF and Office documents are accessible:
Your pages should only provide downloadable documents (such as a PDF or Office documents) when the content within the download is purely supplementary. Any key information within the document should be stated in the webpage’s regular body of text. The documents you provide for download need to be accessible themselves too.
Find out how to check whether your supplementary materials are correctly labelled and accessible.
9. Ensuring a user can tab through the page:
If a user is only able to use a keyboard to navigate through your page, they need to be able to tab through the page in a logical order. You may need to reorder content, buttons or links on your page if you cannot tab through your page in a logical order.
10. Using only descriptive text for links:
Users reading content with a screen reader may read links separately to the page's main body of content. This allows blind or partially-sighted users to tab through the page without having to read all the text. It is essential that your page does not include non-descriptive links, such as ‘click here’ or ‘more information’, as these will be confusing and meaningless if read out of context. Furthermore, links within a body of text should have a clear destination so that able-sighted users can identify them easily too.
Other factors to consider when adding links:
- Email addresses should be written in lowercase in their full form: eg s.brass@bham.ac.uk
- Web addresses should be written without the ‘http://' prefix: eg www.birmingham.ac.uk
- Links should always open in the same browser window so that users can navigate using the back button
11. Adding a unique page title:
Since your page title is the first text that a user is likely to read, it is important that it concisely and accurately describes the contents of a page. You should ensure that the text of your page title relates clearly, and does not differ too much from the text of the link that the user clicked on to reach your page.
12. Explaining acronyms:
When writing content on your webpages, be cautious of using abbreviations and acronyms that may be familiar to you and your colleagues but not necessarily to your reader. Writing ‘UoB’ may be standard practice to you, but anyone with reading difficulties may not find it easy to understand at first.
Find detailed advice on how to best write for our website on the ‘Writing for our website’ page.
13. Consistent navigation:
We want users of our website to consider navigation a consistent and easy experience. This involves you as a web editor ensuring that content is ordered clearly and logically. In addition to using the correct heading levels and formatting your page clearly, other factors to consider include:
- Placing the most important text near the top of the page.
- Use the navigational features within Contensis (find further information on our 'promo row' page or the 'managing menus' page), rather than constructing your own.
- Ensuring that menus with links to other pages have the link options listed in the same order as the links appeared on the previous landing page. This enhances consistency. You can reorder menus in Contensis by right-clicking on the pages' folder and selecting 'manage menu'.
- Ensuring your pages are labelled with appropriate file names in Contensis so that users can more easily track their navigational path.