Designing for Accessibility

These tools will help you be compliant with ADA / Section 508 / WCAG 2.0 so that all visitors to your web site can navigate it easily.

• WAVE Web Accessibility Tool - browser plugin from WebAim for Chrome and Firefox
• tota11y  -  browser plugin developed by the Khan Academy to check web pages
• WAVE - Check individual pages by URL, without a plugin
• Google Lighthouse - check web sites
• Chrome Dev Tool - Accessibility audit tool built-in to the browser
• Firefox Accessibility Reference -  Accessibility audit tool built-in to the browser
• WAI's Easy Checks - Checklist for conducting a first review of accessibility
• Evaluation Tools - long list of tools gathered (but not endorsed by) WAI

Screen Readers

• Audio interface
• Convert text into synthesized speech
• Primarily use keyboard for navigation
• May also be an option provided by a website, including some of our research databases
  • Look for an icon similar to:

How screen readers read web pages

• Linear (left to right, top to bottom)
• Users can use keyboard shortcut to skim through content

Software

Use these applications to test how well the screen readers do on your website.

• JAWS (Job Access With Speech) - Windows only; paid subscription
• NVDA  (Non Visual Desktop Access) - Windows only; free download
• Apple VoiceOver - built-in macOS and iOS app
• ChromeVox - built-in Google Chromebook app
• Narrator - built-in Windows app

There are many, many, many more options. Choose one that meets your needs and with a voice you life.

Navigation Without a Mouse

How to Test Keyboard Accessibility

1. Unplug your mouse
2. Use keyboard only
   • Tab key (Shift + Tab: go back a step) to navigate
   • Enter key to activate links, buttons
   • Esc key to cancel dialogs, menus

Touch Screens on Mobile Devices

• Customize iOS Accessibility Settings
• Android Accessibility Options

For accessibility, make sure that you color and font choices have high contrast ratios.

• Color Contrast Checker - Test color combinations using this tool from WebAIM
• HTML Color Picker - Hexagonal, web-safe
• Work With Color - Donut-shaped
• Color Scheme Designer - Pick a color, get codes for similar hues
• Adobe Photoshop - Use the dropper tool
• ColorZilla - Firefox add-on that lets you use the dropper tool on any web page

• Web-safe fonts
• Dyslexia Friendly Style Guide
• OpenDyslexic- font and browser plugins available

• W3C Markup Validation Service - check the syntax of HTML code
• W3Schools.com CSS tutorials
• CSS tutorials on LinkedIn Learning - formerly Lynda.com