Basic tests

Checks you can do to help to ensure your product or website works for everyone.

Contrast ratios

Ensure that text and background combinations meet the required contrast ratios for accessibility. Use the contrast checker tool to validate compliance with standards and adjust colours as needed.

Keyboard testing

You should test your service to ensure that it is fully keyboard accessible. This means that users can navigate to all interactable elements on the page and activate or use their functionality.

To do this:

  • tab through your service. Use the Tab key to navigate forward through all interactive elements (for example, links, buttons, and form fields) and Shift + Tab to navigate backward
  • ensure logical focus order. Check that the focus moves through elements in a logical sequence and that the visible focus indicator is always clear and easy to identify
  • check for keyboard traps. Users should not be placed in a keyboard trap where they cannot navigate away from a component or section of a webpage
  • Use standard keyboard keys (Tab, Shift + Tab, arrow keys, and Esc) to navigate through your service. Ensure that users do not get trapped within any functionality

Sometimes, it may be necessary to intentionally trap a user (for example, within a modal window). In these cases, you should provide a clear exit strategy for the user, such as:

  • a close button in the modal
  • the ability to press Esc to exit

Screen reader testing

Conducting screen reader testing ensures that users who rely on assistive technologies can interact effectively with your product or website.

Use screen readers such as:

  • NVDA (Windows)
  • JAWS (Windows)
  • VoiceOver (Mac and iOS)

To test the following:

  • ensure all interactive elements (for example, buttons, links, and form fields) are announced correctly
  • confirm that headings are announced in a logical structure
  • check that descriptive labels or instructions are provided where needed

Resize text

To test how readable your content is, use the resize text bookmarklet. This will increase the browser text size to 200% or the maximum allowed by your browser.

Then check that:

  • text is still fully readable
  • no elements overlap, cut off, or disappear
  • all interactive components remain usable

Target size

Interactive elements should be large enough to be easily tapped or clicked. To check these elements, use the target size bookmarklet.

To test:

  • verify that all buttons, links, and interactive components meet a minimum target size of 44px by 44px
  • check that there is sufficient spacing between touch targets to prevent accidental clicks

More resources

The following places have more information:

Information about this page
Created
25 November 2024
Last reviewed
25 November 2024
Last updated
25 November 2024
Reason this page exists
To help users understand what tests they can run to check the accessibility of designs for products and websites.
Suggest a change or comment
Issue 45