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 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 Länk till annan webbplats.

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 Länk till annan webbplats.

Axe Firefox Addon Länk till annan webbplats.

Axe-core on Github Länk till annan webbplats.

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 Länk till annan webbplats.

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 Länk till annan webbplats.

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 Länk till annan webbplats.

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


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;