Web Accessibility with the Axe-Core Module

By

Accessibility accessibility, as here at dev, we also want want that the apps we develop, can be used by everyone.

Wether people with a hook as their had, a wooden lag, shoot laser out of the eyes, or have not caught Jerry yet. They all want to access your awesome new app, that you build with all the great skills you learn at dev.to.

Today I want to introduce a module, that I recently came across, to help you, that all people can use your site and feel included. If they stand upside down or read minds.

The tool I am very excited now, is axe-core. It is absolutely straight forward to use and provides direct feedback, on what you can do, to show that everyone is welcome on your platform.

My blog, is looking pretty good, strong contrasts in the colors and big fonts. Articles are wrapped in the article tag. But I had to learn different. There are several issues. And I will work, to make my page easier accessible by everyone. Even if he let the minions read my page to him.

When analyzing your site with axe-core, you will get a valuable list of issues, that can hold back the one or the other visitor to enjoy your content.

Axe-core not only helping you to find all the little inconveniences that can hold nice people away, itself has a very clean API and command line tool, that themselves are very accessible for every programmer.
You can run it inside your site on client site and get the results on the browser’s JavaScript console. The module works well with various frameworks and provides for example integrations for react.

These integrations into our javascript tooling, allow us to have in the complete product development cycle an eye on accessibility and avoid to improve the accessibility as an afterthought.

My blog is a static site, so I simple tested it using the cli tool. First install it with npm install -g axe-cli and then test your site like this: axe http://tnickel.de/.

The tool is not only good for us engineers, it is also good for management. Because, as we know, management loves numbers. With axe we get a single number for accessibility issues, and we can work to bring the number down and with that, the accessibility up.

I would say, now there is no excuse, not to improve the accessibility to your precious content.

API

What? you still need to see an example how to use it with your project? What about using it by adding some scripts-tags to your html? 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script src="node_modules/axe-core/axe.min.js"></script>
<script>

var lastViolations = '';
setInterval(() => {
    axe.run().then(({ violations }) => {
       const violationData = JSON.stringify(violations);
        if (violations.length && violationData !== lastViolation) {
           lastViolation = violationData;
            console.log(violations);
        }
    }).catch(err => {
        console.error('some issue with axe:', err);
    });
}, 10000);
</script>

And yes, this code don’t need to be efficient. It only runs on your site during development, not on the users device. and you can probably integrate axe better into your framework, after your redux store dispatch an update after your component updated.

just add it somewhere where it constantly run during your development. Then you will always see tips, how to improve your site. and knows, even presidents who can not read could understand your articles.

Contents
  1. 1. API