Manual test procedure
Before manual testing be sure to run automated in-browser testing first, logging any issues raised:
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
- Check interactive elements do not contain other focusable interactive elements.
Add this bookmarklet to the browsers bookmarks to highlight all keyboard tab stops
iframe outline won't change colour upon focus.
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,
titleis unique, descriptive, informative, and front-loaded.
- Check that a language is set on the
- Check any element which has a change of language is marked with an appropriate
- Check there is only one
h1per page, view, or document.
- Check headings are used in strict descending order,
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:
- Check lists:
dlare used appropriately.
- Check list HTML has
list-style: noneis applied via CSS.
Add this bookmarklet, to the browsers bookmarks, to outline all lists:
- Check embedded images have a meaningful
- Check decorative images have a an empty
- Check embedded SVGs contain a meaningful
- Check there's a text alternative for complex images such as: graphs, charts and maps.
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
- Check labels use the
forattribute to explicitly associate to the form control.
- Check each form control includes necessary instructions, either in the
- 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
fieldsetand identified by a
legend. Alternatively, use
role="group", then use
aria-labelledbyto point to a legend equivalent.
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.
- Check the header (content that remains the same across the site or app) is in a
headerelement or has a
- Check the main navigation is in a
navelement or has a
- If there is a secondary navigation block, Check each
navhas a label with a distinguishing name. Examples:
- Check the content area is in a
mainelement or has a
- Check the footer area is in a
footerelement or has a
- If there is a search function, contain it within a
role="search", but don't overwrite an implicit role such as
Add this bookmarklet, to the browsers bookmarks, to outline all landmarks: