Accessibility Dev Toolkit

This is a toolkit for developers to create more accessible services for SVT. Use this toolkit to capture accessibility issues early and throughout the development process.

React-axe

React-axe tests the accessibility of the rendered DOM and uses advanced console logging features when you use React JavaScript library. Works best in the Chrome browser and be sure to run the module in your development environment only. Once initialized, the module will output accessibility defect information to the console every time a component updates.

React-axe on Github

Not a React project?

React-axe uses axe-core and you can always use that in a few different ways on your project to gain the same result.

Axe Chrome Extension

Axe Firefox Addon

Axe-core on Github

Accessibility lint

In SVTI's common lint rules we use the plugin eslint-plugin-jsx-a11y for accessibility rules on JSX elements in React projects.

Eslint-plugin-jsx-a11y on Github

Accessibility Developer Tools

Accessibility Developer Tools is a Chrome extension that adds a accessibility audit and sidebar pane, directly within Google Developer Tools. Accessibility Developer Tools will help you identify accessibility errors, including missing ARIA attributes, color contrast values, and much more.

More about Accessibility Developer Tools in Chrome Web Store

VoiceOver for macOS

VoiceOver is a screen reader program that comes on new Mac computers, iPhones, iPads, and iPod touches. Use VoiceOver to create a picture of how the content is perceived by visitors using screen readers. If your new to VoiceOver this is a great article about the essential commands that novice VoiceOver users should know.

Using VoiceOver to Evaluate Web Accessibility

The rotor

VoiceOvers rotor is very good to get a picture of how accessible various page elements is and a quick overview of the structure of a web page

  • Start VoiceOver program ⌘ + F5
  • Open the rotor Control + Option + U
  • Navigate with ← and →
  • Chose with ↑ and ↓
  • Select with Enter

Css-snippets

Useful snippets when it comes to hide and show information for screen readers.

%svt_a11y-screen-reader-text {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

%svt_a11y-screen-reader-text-revert {
 position: static;
 left: auto;
 height: auto;
 width: auto;
 overflow: visible;
}