The purpose of this guide is to help designers perform a quick accessibility audit: no need to inspect the code or turn on a screen reader. Your sight, mouse and keyboard are all that is needed to identify some of the most common accessibility issues.
Checklist only
Using a mouse
- Basic usability principles are followed
- Information hierarchy: web pages should have a title describing the topic or purpose, headings help to visually organise information
- Link text describes the purpose of the link
- There are no Images of text (logos containing text are an exception)
- If there is video or audio in the UI, there is a text alternative (closed captions)
- Colour is not used as the only visual means of conveying information
- Colour contrast is sufficient
- If there is content moving automatically there is a way for the user to pause it or hide it
- There is nothing that flashes more than three times in any one second period
- There is no parallax scrolling or there is a way to disable it
Using only a keyboard (Tab / Shift + Tab)
- Is the focus visible?
- Is the focus order logical?
- Can you move through all focusable elements of the UI with the keyboard?
- If there is a menu at the top of the UI and the keyboard focus goes through the menu before it reaches the main content, consider including a “Skip to content” button
- When a modal is shown, focus is trapped in the modal
- When a modal is closed, the focus goes back to the element that triggered the modal (unless it goes to another page)
Complete guide
Using a mouse
-
Basic usability principles are followed.
Good usability is a great foundation for good accessibility, you can use as a reference the 10 usability heuristics from the Nielsen Norman Group.
-
Information hierarchy: web pages should have a title describing the topic or purpose, headings help to visually organise information.
WCAG 2.4.2, WCAG 2.4.6, WCAG 2.4.10
-
Link text describes the purpose of the link.
The purpose of each link can be determined from the link text alone, so make sure there are no links described as “here”, “click here”, “read more”, etc. WCAG 2.2.4
-
There are no images of text.
On a developed UI, make sure the text shown on top of images is text and not images of text. There are a few exceptions, such as logos containing text. WCAG 1.4.5
-
If there is video or audio in the UI, there is a text alternative (closed captions).
-
Colour is not used as the only visual means of conveying information.
This means that if you made the UI black and white users would still be able to understand and operate the UI. WCAG 1.4.1
-
Colour contrast is sufficient.
If you are introducing new colours in the design or if you suspect that some colours do not have enough contrast, use a colour contrast checker to see if the contrast is sufficient (4.5:1 for text and 3:1 for large text and non-text elements). WCAG 1.4.3, WCAG 1.4.11, WebAIM color contrast checker.
-
If there is content moving automatically there is a way for the user to pause it or hide it.
Ideally there should be no movement on a UI unless triggered by the user. If there is content that moves automatically, there should be a way for the user to pause the movement or hide that content. WCAG 2.2.2
-
There is nothing that flashes more than three times in any one second period.
-
There is no parallax scrolling or there is a way to disable it.
Using only a keyboard (Tab / Shift + Tab)
-
Is the focus visible?
Meaning there is a visible border around the area that is in focus. WCAG 2.4.7
-
Is the focus order logical?
-
Can you move through all focusable elements of the UI with the keyboard?
Common focusable elements are buttons, links, menu items or tooltips. Plain text is not a focusable element. WCAG 1.4.13, WCAG 2.1.1, WCAG 2.1.2
-
If there is a menu at the top of the UI and if the keyboard focus goes through the menu before it reaches the main content, consider including a “Skip to content” button.
-
When a modal is shown, focus is trapped in the modal
Trapped focus means the focus does not go anywhere in the UI outside the modal or sometimes, after tabbing through the different elements in the modal, the focus goes to the browser’s URL. It should never go to the content in the background of the modal. WCAG 2.4.3
-
When a modal is closed, the focus goes back to the element that triggered the modal (unless it goes to another page).
