5 tools for Designing, Developing, and Testing Accessibility

5 tools for Designing, Developing, and Testing Accessibility:


  • This tool provides a wide array of color and contrast checking abilities along with simulators to test you design again visual disabilities.
  • Stark has plugins to go in various design tools, but also in chrome.

Stark as a Google Chrome extension

Deque’s Dev tools AXE extension

  • There are extensions/add-ons for ChromeFirefox, and Edge.
  • Additionally, Lighthouse accessibility checks are powered by AXE Core as well.

Axe dev tools check results

lighthouse results


  • WAVE is powered by WebAim and functions similarly to Deque’s AXE extensions.
  • An interesting element of WAVE’s functionality is that it give an accessibility markup over the entire site. 
    wave accessibility markup

ANDI – Accessibility Testing Tool

  • ANDI (Accessible Name & Description Inspector) is a free accessibility testing tool.
    • ANDI allows you to inspect your page on the basis of accessible names which come in handy especially if you’re working with interactive elements.

focusable elements


VS Code AXE Accessibility Linter

  • Checks React (.js, .jsx.ts.tsx), Vue (.vue), HTML (.html.htm), and Markdown (.md.markdown) files so you can avoid common accessibility defects. Angular (HTML) is not currently supported.

targeting code that is not accessible

ESlint Accessibility Plugins

  • There several different plugin depending on what framework/ tech stack you’re working with.

from Tumblr https://generouspiratequeen.tumblr.com/post/657305916292661248

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s