Skip to content

Tools

Screen reader/TTS engine

HTML Validators

Accessibility checker for public sites:

Wave

  • Site + Browser Extension Wave Tool https://wave.webaim.org/
    • Shows Errors, Contrast Errors, Alerts, Features, Structural Elements and ARIA
    • RED is bad (errors, Contrast Errors)
      • definitely should be fixed
    • Orange for items such as duplicate, long or weird alternate text, form label issues, skipped heading levels, bad links
      • may or not need to be fixed.
    • Green are for features that are good already and exist on the site
      • features still need to be evaluated to be sure but are stuff like alternate text, form labels, field sets, skip links, etc
    • Blue are for structural elements
      • can be used properly or improperly but includes stuff like headings, hierarchy, lists, navigation, content regions,data tables, etc
    • Purple icons are for ARIA
      • additional tags that can be added to HTML so assistive technologies can parse content better
    • Pros:
      • Semi automated in a way since it'll go through the tags itself
      • Evaluates web pages for errors and failures
    • Cons:
      • Each page needs to be tested individually
      • Only works for public pages
      • Zero errors DOES NOT mean it's accessible. Need a human to determine that.
    • How to use:

Other

Accessibility checker for local/intranet sites:

AXE WebDriver

  • https://github.com/dequelabs/grunt-axe-webdriver
    • Pros:
      • Can be used with CI (build) Server, DevOps for automated accessibility testing like unit tests
      • Element info will be provided for violations such as color contrast errors, wcag guideline issues
        • Suggests multiple fix options that are mandatory and optionals
      • The final output from test will give detailed info on element with error, the actual error and ways to fix it
    • Cons:
      • Not that great for mobile testing since you need the actual device
      • Dynamically generated html tags through interaction might not work
      • Zero errors DOES NOT mean it's accessible. Need a human to determine that.
    • How to use (Eg project):
      • Need npm installed first. Then:
      • Using npm, install grunt, grunt-cli(globally) and grunt-axe-webdriver.
      • Can run grunt axe-webdriver to start test
      • Repl eg jut to see simple code and test (won't work if you try to run it within)

Ones that need review before adding to the list:

Last update: July 17, 2020