Manual test procedure

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

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.

• 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

• Check each button does something, rather than goes somewhere.
• Check each link has a valid href and goes somewhere. Would right clicking the link, to open in a new tab / window, make sense? If not, then perhaps it should be a button.
• Check the visible text, or label, makes sense.
• Check the minimum tap target area is at least 24px square, or has a clearance of at least the same.
• Check link text make sense when taken out of the context of the page.
• Check links which contains the same text, goes to the same location. For example, don't allow multiples of “More info” if they go to different places.
• Check links are easily recognisable, and not by color alone.
• Check users are informed of links which open new tabs or windows.
• Check interactive elements do not contain other interactive elements. For example: buttons within links, links within buttons.

1.3.1 Info and Relationships

1.4.1 Use of Color

G201: Giving users advanced warning when opening a new window

• 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

• 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

• 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 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.

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