Manual Accessibility Testing

---

How To Test With A Keyboard:

• Tab: Navigate through all page content including links and form controls. All interactive elements (buttons, links, etc) should be able to be tabbed to.



• Shift + Tab: Navigate backwards. Backward navigation should operate the same as forward navigation by tabbing to all interactive elements.

• 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, menu, close modal windows.

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/tab order logical and intuitive? Are users able to tab through elements sequentially?

• Is a visible keyboard focus indicator present on all interactive elements? This is usually a black outline when an item is in focus and lets users have a visual cue as to what element they are focused on.

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

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?

Audio and Video Content

All audio and video content should follow these guidelines:

• Audio only (such as podcast): Transcript required at WCAG A.


• Video only (no audio): Transcript or audio description required at WCAG level A.


• Video with audio:  Captions are WCAG level A, Addition of transcript is WCAG AAA.
  

Mobile View

Check web content on a mobile device or by using browser developer tools which simulate a mobile view.

• Does web content collapse into mobile view such that content is still viewable? Is anything being clipped or overlapping? Clipping and overlapping should be avoided in mobile view where possible.


• Are interactive elements such as buttons and links big enough to be tapped on by a user?

Color

• Check that the text and background color has a contrast ratio of at least 4.5:1. Color contrast can be checked using this online tool. The WAVE plugin can detect color contrast issues automatically.

• Ensure color is not used as the only way of conveying meaning or information. 

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.

Forms

• Make sure form controls have descriptive labels.

• If a label is not visible, check for a hidden <label>, aria-label, or title attribute. 

Body Text

• Confirm that page titles are unique and descriptive, marked as <h1>. There should only be one <h1> per page.

• Look for generic link text like “read more” or "click here." These should be changed to better reflect the description of the link.

• Links in body text should ideally be underlined and have a differing color from surrounding text. This is usually a dark blue. This helps users to quickly distinguish links, who may otherwise have trouble finding them.

• Check that plain language is used instead of jargon, and all acronyms are spelled out on first reference

Tables

• Confirm that tables are only used for tabular data, not for layout.

• If data tables are present, ensure row and/or column headers are present.