Accessibility Testing Tools

Keyboard-Only Testing

Disconnect your mouse and try to navigate a website or product with your keyboard only.  Do you know where you are on the page?  Are links and buttons hightlighted as you navigate?  Does the order of the content make sense?

Screen Readers

Developers should use both VoiceOver and NVDA to test solutions. When developing for accessibility, you must manually test the solution during development and prior to rollout. Several of the WCAG A and AA guidelines can only be confirmed through manual testing. Remember to disconnect your mouse when testing with a desktop computer - your product must pass keyboard-only manual testing.  

NVDA (Windows Computers)

NVDA is currently one of the top two screen readers used for Windows computers.  NVDA is open source and easy to download at the NVDA Access site.  Before using NVDA, you should find the right voice and talking speed for the screen reader for you.  You can make these changes by selecting a NVDA Synthesizer and configuring your Voice Settings.  Once you have the screen reader configured, you can print the Using NVDA to Evaluate Web Accessibility guide at WebAIM.  This guide provides you with all needed keyboard commands.   Please use Firefox for your primary testing browser with NVDA.  You can also use Internet Explorer or Chrome for secondary testing.

VoiceOver (All Apple Devices)

VoiceOver comes with all Apple devices.  Before testing with VoiceOver, you should review the VoiceOver Getting Started Guide provided by Apple.  This guide provides you with steps on how to customize the screen reader voice as well as initial basic commands.  It's especially important to study the mobile commands as they are vastly different than how a user would navigate a desktop with a keyboard.  In addition, WebAIM provides a great Using VoiceOver to Evaluate Web Accessibility guide that's easily printable.  Please use Safari for your primary testing with VoiceOver.  You can also use Chrome for secondary testing.

Color Contrast Tools

Color Contrast Checker

When selecting branding colors for a website and accent colors throughout the site, please ensure you are using the WebAIM Color Contrast Checker to verify you are meeting the contrast ratio requirements of WCAG A and AA. 

Simulating Color Blindness

Once you have a design in place, it's best to manually check that your color palette is accessible.  You can do this by using the Color Filters on an iPhone by going to Settings > General > Accessibility > Display Accommodations > Color Filters.  Once you enable Color Filters, you can select from Grayscale, Red/Green, Green/Red, Blue/Yellow, and Color Tint.  It's best to verify all six with a few pages on your site, ensuring you test all branding and accent colors.

Magnification and Larger Text

iPhone Zoom and Magnifier Testing

Currently, the President's Office uses the iPhone to test magnification and larger text.  You can test both using the Accessibility settings (Settings > General > Accessibility > Zoom or Magnifier.

Semi-automated Testing Tools

AInspector for Firefox

AInspector was created by the University of Illinois and is an open source browser plug-in.  It uses the latest guidelines and conducts page-by-page testing.  This tool is great when you are developing new solution or functionality as you can test as you go.

WAVE for Chrome

WAVE, created by WebAIM, is another open source browser plug-in.  As it's created by WebAIM, it definitely aligns with the WCAG 2.0 AA guidelines.  It operates differently from AInspector and in the end it's best to test out both to find out which one works best for you.

 

Last Updated

Kristina England
March 12, 2019