Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
July 20, 2021 07:58 pm GMT

5 tools for Designing, Developing, and Testing Accessibility

No matter what you are working on, considering accessibility is definitely a best practice. Below is a list of five tools to help get you started with accessibility in your projects.

Stark

  • 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

Axe dev tools check results

lighthouse results

WAVE

  • 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

Linting

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.

Original Link: https://dev.to/stories_of_ren/5-tools-for-designing-developing-and-testing-accessibility-5a0d

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To