How to conduct your own a11y audits
Recently, I wrote an article on the importance of accessibility. I stand by this and think that there are some easy to implement tools, turning you from unaware about accessibility, to at least being on the right track. There are further, more manual things you can do, but ultimately it's better to capture some of the quick wins and make a difference, rather than completely ignoring everything. Let's get into some tools!
a11y Tooling
Let's start with probably the best way to at least get a visual idea of roughly the issues your websites may face. There are websites you can pass a URL to, which will then do an audit of your website (or others). These are a good way to get started, but unless you're going to pay for their services, you tend to have a limited number of uses of these services. Think of these as a very first dive into the topic. I won't recommend any particular site, but a quick Google-Fu for 'accessibility audit' should set you up. Once you're ready, let's talk about axe!
Deque Axe is a great tool for at least starting to uncover accessibility issues. They say that scanning a website with axe will cover around 80% of automatic accessibility issues. This is mostly surrounding html structure, colour contrast and aria attributes. These are all really big parts of accessibility. Note however, there are some things that just won't be picked up - There are also some things you can 'cheat' to get around, but it doesn't really resolve the problem in the long run. A good example of something it might not catch is an alt attribute with a value of image. This doesn't tell us much at all about what the image is about - But, it tends to pass accessibility audits.
Scripting
Axe also offers an npm package which can be pulled into your website. To get started with npm and axe-core, you'll need to make sure to install npm on your device. Then you can do an npm init on your directory to get yourself a basic package.json file. Once you've done this, add in the following:
"devDependencies": {
"@axe-core/playwright": ""
}Just make sure, where the "" is, you enter a version number relating to the version of axe-core you'd like to use. I'd recommend always using the latest version. You can find the latest versions here.
Next type npm install in your terminal and that'll generate a package-lock.json file. Neat! You've just installed axe-core and are ready to write a script to check your web app for you! We won't go into too much detail about the script you'll write for testing, as there are a lot of guides on the web which should get you going - Plus the axe-core documentation is great. Maybe a more advanced script could be a future topic, but pulling from the documentation this is enough to get you started:
Conclusion
Even with all of these automated tools, you're not guaranteed absolutely perfect coverage for accessibility. Brushing up on your skills is still highly recommended, so do go check out the last accessibility article, where I shared a couple of resources for learning more about the skills. You may find reasons that you just can't quite hit every point of WCAG 2.2 AAA and best practice, but that's okay! WCAG 2.2 AA is also a great standard to try to achieve.
See? Even Deque themselves have room for improvement!
Hope this was a good introduction to getting yourself the right tools to make your stuff more accessible. At the end of the day, it's free to get started and it helps make the web a better place for everyone.
Happy testing, my accessibility aware amigos - Timlah