Accessibility

Simplified WCAG guidance

WCAG 2.2 – Levels A and AA only, with dev notes.

Manual test procedure

Before manual testing be sure to run automated in-browser testing first, logging any issues raised:

Deque's Axe Devtools browser extension.

WebAim's Wave browser extension.

Keyboard

Ensure all interactive elements are reachable via keyboard.

  • Use the tab key to check every element that requires focus receives focus.
  • Check each focusable element has a clear and distinguishable focus state.
  • Check the focus order matches the visual order and makes sense – that it doesn't jump out of sequence.
  • Check there is a skip-to-content link which appears first in the page's tab order.
  • Check the skip-to-content link jumps straight to the main content, preferably the h1.
  • Check interactive elements do not contain other focusable interactive elements.

Add this bookmarklet to the browsers bookmarks to highlight all keyboard tab stops Highlight tab-stops, or just click to test it on this page. Information – Once added, navigate to the page for testing and click the bookmark. All tab-stops are outlined green then change to blue upon focus. With the Tab key, check for anything missed or inappropriate. Note: An iframe outline won't change colour upon focus.

2.1.1 Keyboard

2.4.7 Focus Visible

1.3.2 Meaningful Sequence

2.4.1 Bypass Blocks

Modals

Check keyboard focus is managed correctly:

  • Check keyboard focus is locked within the open modal.
  • Check the background page cannot receive keyboard focus while the modal is open.
  • From the URL bar, check keyboard focus is moved straight into an open modal.
  • Check the esc key exits the modal.
  • Check an open modal is not closed by pressing esc while dismissing active: tooltips, dropdowns, selects, multi-selects, popups, pop-overs, etc.
  • Check the modal has a visible close button. Preferably, one top right, and one at the end of the modal.
  • Upon closure, check keyboard focus returns to the activating button or link.
  • If the activating button or link is deleted as part of the function, then check focus is returned to the nearest, most sensible, element, heading or container.
Page information
  • Check the page, or view, title is unique, descriptive, informative, and front-loaded.
  • Check that a language is set on the html element.
  • Check any element which has a change of language is marked with an appropriate lang attribute.

2.4.2 Page Titled

3.1.1 Language of Page

Button link test
Headings
  • Check there is only one h1 per page, view, or document.
  • Check headings are used in strict descending order, h1 through h6. Don't skip heading levels.
  • Check headings contain an appropriate description of the content that follows. Remember that a heading applies to all the content that follows until another heading or landmark is reached.

Add this bookmarklet, to the browsers bookmarks, to outline all headings: Highlight Headings or just click to test it on this page. Information – Once added, navigate to the page for testing and click the bookmark. All headings are outlined and marked. Check for anything missed or inappropriate.

2.4.6 Headings or Labels

Lists
  • Check lists: ul, ol and dl are used appropriately.
  • Check list HTML has role="list" if list-style: none is applied via CSS.

Add this bookmarklet, to the browsers bookmarks, to outline all lists: Highlight Lists, or just click to test it on this page. Information – Once added, navigate to the page for testing and click the bookmark. All lists are outlined and marked. Check for anything missed or inappropriate.

1.3.1 Info and Relationships

Images
  • Check embedded images have a meaningful alt text.
  • Check decorative images have a an empty alt="".
  • Check embedded SVGs contain a meaningful title.
  • Check there's a text alternative for complex images such as: graphs, charts and maps.

1.1.1 Non-text Content

Forms

Forms should be intuitive and easy to use, with simple, clear, instructions and prompts.

  • Check every form control is keyboard accessible.
  • Check every form control has an associated label.
  • Check labels use the for attribute to explicitly associate to the form control.
  • Check each form control includes necessary instructions, either in the label, or aria-describedby.
  • Check information such as: required, input format, how to use, and errors are available to all users.
  • If only some fields are required, then clearly indicate in an accessible manner.
  • Check the user is alerted to validation error messages.
  • Check data is not lost between submission attempts.
  • Check validation error messages are clear, apparent and appropriate.
  • Check groups of form controls, for example radio buttons, are contained within a fieldset and identified by a legend. Alternatively, use role="group", then use aria-labelledby to point to a legend equivalent.

Usable and Accessible Form Validation and Error Recovery

Best practice suggests each label, and each control, are left aligned, explicitly associated, and, if not a radio or checkbox, appear on their own line.

Landmarks

Landmark regions wrap important parts of each page or view:

  • Check the header (content that remains the same across the site or app) is in a header element or has a role="banner".
  • Check the main navigation is in a nav element or has a role="navigation".
  • If there is a secondary navigation block, Check each nav has a label with a distinguishing name. Examples: aria-label="main", aria-label="section"
  • Check the content area is in a main element or has a role="main".
  • Check the footer area is in a footer element or has a role="contentinfo".
  • If there is a search function, contain it within a role="search", but don't overwrite an implicit role such as form.

Add this bookmarklet, to the browsers bookmarks, to outline all landmarks: Highlight landmarks, or just click to test it on this page. Information – Once added, navigate to the page for testing and click the bookmark. All landmarks are outlined and marked. Check for anything missed or inappropriate.

4.1.2 Name, Role, Value