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 Bookmarklet - applies to current page, 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 Opens in modal dialog

2.4.7 Focus Visible Opens in modal dialog

1.3.2 Meaningful Sequence Opens in modal dialog

2.4.1 Bypass Blocks Opens in modal dialog

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 Opens in modal dialog

3.1.1 Language of Page Opens in modal dialog

• 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 Opens in modal dialog

1.4.1 Use of Color Opens in modal dialog

G201: Giving users advanced warning when opening a new window Opens in 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 Bookmarklet - applies to current page 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 Opens in modal dialog

• 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 Bookmarklet - applies to current page, 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 Opens in modal dialog

• 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 Opens in modal dialog

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 Opens in new window

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 Opens in new window 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 Bookmarklet - applies to current page, 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 Opens in modal dialog