WCAG 2.1 accessibility standard
This is detailed checklist that presents recommendations for implementing accessibility principles and techniques required for achieving WCAG 2.1 conformance (only A/AA standard levels are included; for information on AAA level guidelines please visit the WCAG 2.1 website).
Note: Siteimprove is an external tool used to check for accessibility issues on most University websites. It produces weekly reports that highlight content that is not compliant with WCAG 2.1 and which will need to be fixed. However some accessibility issues can't be scanned by Siteimprove and need to be checked manually.
1: Perceivable
| Principles | Guideline | Level | Checked by |
| 1.1 - All non-text content should have a text equivalent. | 1.1.1 Provide an alternative text for all images and non-text content | A | Siteimprove |
| 1.2 - Video and audio should have alternate versions. |
1.2.1 Provide a text transcript for all video-only and audio-only content (pre-recorded). Transcripts should be clearly labelled and linked below the media. Note: Videos/audios published before 23 Sep 2020 are exempt |
A | Siteimprove |
|
1.2.2 Provide captions for pre-recorded videos with sounds Note: Videos/audios published before 23 Sep 2020 are exempt |
A | Siteimprove | |
|
1.2.3 Provide full-text transcription or audio description for pre-recorded videos with sounds Note: Videos/audios published before 23 Sep 2020 are exempt |
A | Siteimprove | |
|
1.2.4 Provide captions for live video presentations Note: All live videos are exempt |
AA | Manual check | |
|
1.2.5 Provide audio description for pre-recorded videos (not needed for 'talking heads', interviews, etc) Note: Videos/audios published before 23 Sep 2020 are exempt |
AA | Siteimprove | |
| 1.3 - The site should still makes sense if JavaScript, CSS and other assistive technologies are removed | 1.3.1 Provide users with content that has clear structure and relationships. Make sure to: - Break up content with subheadings for new sections - Mark headings with HTML header tags - Use lists, tables and other formats where needed - Use the correct HTML for all structural elements - Use valid HTML everywhere - Use clear labels and alternative text on forms |
A | Siteimprove |
| 1.3.2 Present content in a meaningful order. Make sure to: - Separate navigation menus from the content - Use paragraphs in order - Nest headings from H1 downwards to show their relative importance - Choose whether a list needs numbering or not - Use valid HTML |
A | Manual check | |
| 1.3.3 Use more than one sense for instructions; for example, an online survey uses a green arrow icon placed in the lower-right hand corner to take users to next page. The arrow is labelled 'Next' and includes further instructions. This example is using colour, positioning and labelling to help identify the icon. | A | Manual check | |
| 1.3.4 Content does not restrict its view and operation to a single display orientation, such as portrait or landscape | AA | Siteimprove | |
| 1.3.5 Identify input purpose; for example, having autocomplete in forms to help users fill out forms quicker | AA | Siteimprove | |
| 1.4 - Content is easy to see and hear | 1.4.1 Do not rely on colour alone to convey information (similar to 1.3.3) | A | Siteimprove |
| 1.4.2 Audio/video content should include functionality to raise and lower the volume; don't play audio automatically. | A | Siteimprove | |
| 1.4.3 Colour contrast should be sufficient (of at least 4.5:1 between all text and background) | AA | Siteimprove | |
| 1.4.4 Text must be able to be resized up to 200% without negatively affecting the ability to read content or use functions | AA | Siteimprove | |
| 1.4.5 Do not use images of text unless necessary (e.g. logo). For example- Don’t use an image of text when you can use plain text - Display quotes as text rather than images - Use CSS to style headings as text - Use CSS to style navigation menus as text |
AA | Manual check | |
| 1.4.10 Provide content that can be presented without losing information or functionality, and without requiring scrolling, when width is at least 320 px and height 256 px which are standard mobile sizes. Note: using responsive design will take care of this issue. | AA | Siteimprove | |
| 1.4.11 Contrast between user interface components, graphics and adjacent colours should be at least 3:1 | AA | Manual check | |
| 1.4.12 Text-spacing should be: - Line height (line spacing) to at least 1.5 times the font size - Spacing following paragraphs to at least 2 times the font size - Letter spacing (tracking) to at least 0.12 times the font size - Word spacing to at least 0.16 times the font size |
AA | Manual check | |
| 1.4.13 Content on hover focus - additional content that appears and dissapears on hover should not prevent the user to access other page content. | AA | Manual check |
2: Operable
| 2.1 - A user can navigate the site using only a keyboard | 2.1.1/2.1.2 Content should be accessible by keyboard only. Mouse clicks should have a keyboard alternative | A | Manual check |
| 2.1.4 Character key shortcuts - a mechanism is provided to allow users to disable character-key shortcuts | A | Manual check | |
| 2.2 - Users have enough time to do what they need to | 2.2.1 Alerts and prompts need to stay around long enough for users to interact with; for example, after a period of inactivity the web page asks if the user needs more time, if it doesn't get a response, it times out. | A | Siteimprove |
| 2.2.2 Provide user controls for moving content; for example, an animation runs in the upper portion of the page but has a "freeze animation" button | A | Manual check | |
| 2.3 - Website does not have flashing lights or anything that might cause seizures. | 2.3.1 Web pages should not contain anything that flashes more than three times per second. | A | Manual check |
| 2.4 - Navigation is easy | 2.4.1 Provide a 'skip to content' link | A | Siteimprove |
| 2.4.2 Pages should have clear, helpful titles. | A | Siteimprove | |
| 2.4.3 Elements should be in an order that makes sense, such as going from header to menu to page content (related to 2.1.1) | A | Manual check | |
| 2.4.4 Links should be clear and easy to understand | A | Siteimprove | |
| 2.4.5 Offer several ways to find pages. For example: - Add HTML sitemap page - Include a search function on every page - Provide a clear and consistent main navigation menu |
AA | Manual check | |
| 2.4.6 Use clear headings and labels | AA | Manual check | |
| 2.4.7 Ensure keyboard focus is visible and clear. For example: style a visible border or outline around the element in use, whether it’s a form field, link, menu, content area or any other element | AA | Siteimprove | |
| 2.5: Users can use functionality on the website through various inputs beyond keyboard | 2.5.1 Pointer gestures - states that all operations must use simple gestures that need only a single touch; for example, a map can support a 2 fingered pinch and zoom gestures but also has + and - buttons to perform the same zoom actions | A | Manual check |
| 2.5.2 Pointer cancellations - provide a mechanism to abort or undo actions or reverse any outcomes of the preceding down-event | A | Manual check | |
| 2.5.3 All controls should be identified with a label, for example the text of links should be unique so it's not confused with others. | A | Siteimprove | |
| 2.5.4 Motion actuation - don’t rely on device motion for functionality, otherwise provide an alternative or allow users to disable motion activation | A | Manual check |
3: Understandable
| 3.1 - Text must be readable and understandable | 3.1.1 Pages should have a language assigned | A | Siteimprove |
| 3.1.2 Tell users when the language on a page changes | AA | Siteimprove | |
| 3.2 - Webpages appear and operate in predictable ways |
3.2.1 Elements on the page do not change when they receive focus, for example: - Links don’t open automatically on focus |
A | Manual check |
| 3.2.2 Elements do not change when they receive input; for example, when a form receives input from users it must not automatically skip to another field or auto-submit | A | Manual check | |
| 3.2.3 Consistent navigation - Use menus in the same place across your website | AA | Manual check | |
| 3.2.4 Consistent identification - Icons and buttons are consistently identifiable, elements with the same function are labelled and named consistently | AA | Manual check | |
| 3.3 - Your site works with different inputs - help users avoid and correct mistakes | 3.3.1 Error identification - the website have timely and clear error identification guidance when users make mistakes | A | Manual check |
| 3.3.2 Labels or instructions should be provided when content requires user input; for example a field for entering a date contains initial text which indicates the correct format for the date. | A | Manual check | |
| 3.3.3 Error suggestion - suggest fixes when users make errors. Make sure: - When the error is missing a required field, communicate this to the user with a text suggestion - If the error is in the format of the input, the suggestion shows the correct format (date - DDMMYY) |
AA | Manual check | |
| 3.3.4 Reduce the risk of input errors for sensitive data (for example when user is committing to legal or financial arrangements). Make sure you add a confirmation page to the data input submission process that summarises the input and the outcome | AA | Manual check |
4: Robust
| 4.1 The site should work on a variety of devices and viewports, plays well with assistive technologies, and generally doesn’t break if users try to do something unexpected | 4.1.1 Parsing - the website should not have major code errors, for example: - All HTML elements have complete start ( < > ) and end ( </ > ) tags where needed. - All HTML elements are nested correctly (for example, list objects within an ordered or unordered list). - All elements have unique Ids. - HTML elements don’t contain duplicate attributes. |
A | Siteimprove |
| 4.1.2 Providing role, state, and value information on all user interface components (for example, forms, links and others generated by script) enables compatibility with assistive technology used by people with disabilities (speech recognition software, screen readers, etc). | A | Siteimprove | |
| 4.1.3 Status messages - make users aware of important changes in content; for example, after a user enters an incorrect post code in a form input, a message should appear that says 'invalid entry'. | AA | Manual check |
(if you find a mistake or want to add information to the content of table above please email milena.cimmarrusti@manchester.ac.uk)