LibGuides at City St George's

Before you start a new guide, plan to make it accessible to the widest range of web users from the beginning. It's more difficult to retroactively make content accessible, especially documents, videos, tutorials and interactive content.

All web content must comply with Web Accessibility guidelines, WCAG 2.2 at the AA standard.

You will need to know the basics of web accessibility. The guidance below will help make sure that content you generate is compliant. Use the checklist to make sure you have considered everything.

What do I need to consider?

Web accessibility is based on the four POUR principles: All web content needs to be Perceivable, Operable, Understandable and Robust. You must consider that the following people can fully access, interact with and understand your content. 

• Vision. People who are blind or have low vision must be able to perceive and use all the content, text and graphics and audio-visual content. Blind people often use screen readers and use a keyboard instead of a graphic interface (screen) and mouse so they need to be able to perceive the information and operate the webpage. People with visual impairment may need to magnify the content.
•  
• Hearing. D/deaf people or people with hearing loss must be able to perceive any audio-visual and audio-only content either through synchronized captions, written transcripts or both.
•  
• Motor. People with reduced mobility or tremors must be able to fully operate everything on the webpage. They may use speech input, a keyboard or another device like a switch instead of a mouse. We should pay particular attention to tasks and elements which have a time-out and require dexterity or fine motor skills, such as small buttons or drag and drop.
•  
• Cognitive. Make your web content intuitive, easy to navigate and understand, and consistent. Provide information in a consistent and predictable way. Avoid moving content, especially animations which cannot be switched off or stopped. 

Ten things to check before you publish your page. A quick and easy way to do an automated check for some of these issues is by using the WAVE accessibility checker, although manual checks and testing with Assistive technologies is also important.

•  Images have descriptions (alt text)

  For blind or visually impaired users - images need meaningful descriptions unless they are decorative or already described in the text. Alt text, how to use and write it.

•  Audio visual content has captions and / or a transcript

  Video and audio need to have closed captions and / or a transcript to describe what is being said or is happening happening on screen to D/deaf users, users with hearing loss and blind or partially sighted users. Accessible video and audio.

•  Provide structure through headings and lists

  Use headings and lists to break up text and help screenreader users get an idea of the content on the page and how it is structured. Headings should be meaningful and use a logical hierarchical order. Lists must use the built-in styles. Headings and lists, how to use them.

•  Make link text meaningful

  Links should use meaningful link text which tells a user where they will be taken. Meaningful link text.

•  Colour contrast is sufficient

  Text and Buttons should have good colour contrast from the background. Read more about colour contrast.

•  Dont use colour alone to convey meaning

  If you have a colour key, make sure you also use text labeling or another means of communicating the meaning.

•  Keyboard operable

  Can you access everything on the page and operate it (open links and buttons) using just the keyboard? How to test with a keyboard.

•  Use icons and labelling consistently

  Use icons and labelling consistently. Icons and how to use them.

•  Use tables correctly

  Avoid using tables for laying out information. Using a header or column row and a caption will help screen reader users navigate the information. Create accessible tables.

•  Documents are accessible

  Avoid relying on non-HTML content. Ensure that any documents you upload or link to have been checked for accessibility and have correct tagging, headings, alt text, meaningful links, accessible tables and good colour contrast. Create Accessible Documents.

Do

• Reuse content wherever possible. Map assets such as links and databases to ensure consistency and help with version control.
• Use the remove format button when you are copy and pasting content into your guides from another source.
• Stick to the default styles in the Libguides template.

Do not

• Upload PDFs. Content is mostly always more accessible in html.
• Embed Social media feeds on the page - these create problems for keyboard users because they are difficult to navigate out of (keyboard trap).
• Use carousels
• Add anything under the side navigation. When viewed on a mobile devices the content on the page displays differently.
• Change the colour, size or fonts of the default text.