Manual Testing for Accessibility

To check the accessibility of your content, it's important to use both automated tools and non-technical tests. Automated checkers such as Siteimprove, WAVE, and Axe provide efficient and thorough review of the content and underlying code, but they can't find every accessibility issue. So you'll need to do a manual review for a complete assessment. To manually test your site, review the content, test with a keyboard, and use a screen reader to make sure your website is accessible and inclusive to everyone. 

Icon of document with text.Content review

Read through your content with accessibility best practices in mind. 

Body text

  • Confirm that page titles are unique and descriptive, marked as <h1>. There should only be one <h1> per page.
  • Ensure visual headings are useful and descriptive, and marked up with an <h> element and in hierarchical order (<h1>, <h2>, etc.). Look for skipped heading levels (<h2> to <h4>).
  • Look for generic link text like “read more” or "click here." 
  • Check that plain language is used instead of jargon, and all acronyms are spelled out on first reference.

Color 

  • Check that the text and background color has a contrast ratio of at least 4.5:1. 
  • Ensure color is not used as the only way of conveying meaning or information. 

Forms

  • Make sure form controls have descriptive labels.
  • If a label is not visible, check for a hidden <label>, aria-label, or title attribute. 

Images

  • Ensure alternative "alt" text conveys the content and function for all non-decorative images. It should be succinct, accurate, and useful.
  • Look for images of text or text embedded on images, and confirm that the text is represented either in the body text or in the alt text. Check this by trying to highlight text with your cursor.

Tables

  • Confirm that tables are only used for tabular data, not for layout.
  • If data tables are present, ensure table caption and row and/or column headers are present.

Zoom in to 200%

Control + for PCs, Command + for Mac

  • Is all the content still present on the page and is it still in an order that makes sense?
  • Does any of the content overlap or become far apart?
  • Do navigation bars or menus get replaced with mobile-style menus, and can you navigate and close the menus?
  • Do you have to scroll horizontally to read everything, and is anything cut off? 
  • Do links, buttons, forms, and menus still function with the content zoomed?
Icon of a keyboard.

Keyboard Testing

Can all interactive elements be selected and activated using the keyboard?

How to test with a keyboard

  • Tab: Navigate to links and form controls.
  • Shift + Tab: Navigate backwards.
  • Spacebar: Activate checkboxes and buttons.
  • Enter: Activate links and buttons.
  • Arrow keys: Radio buttons, select/drop-down menus, sliders, tab panels, auto-complete, tree menus, etc.
  • Escape: Dismisses browser dialog or menu.

What to check for

  • Is anything mouse-only, such as rollover menus?
  • Is a "skip navigation" link available? Activate the skip link and hit Tab again to ensure it functions correctly.
  • Is the navigation order logical and intuitive?
  • Is a visible keyboard focus indicator present?
  • Test dialogs that 'pop' open. Can you navigate and close the dialog? Does focus return to a logical place?
  • Esc should also close all dialogs.

Icon of a screen reader.Screen Reader Review 

Test with a screen reader to uncover issues with reading order, spelling, dynamic content, and interactive elements. While a little daunting at first, it is an essential and informative step in assessing your content for accessibility.

We've created three guides - customized to whichever system and screen reader that you're using to test.

Free screen readers:

Other screen readers: