3 first steps to fixing your accessibility issues
How it all started
A few years back, I was working as a project manager, and my team was told that we needed to make our website more inclusive. The company had signed a contract with a 3rd party vendor to test our website for accessibility issues. Here I was, with a large report from the vendor and instructions to fix the issues they found. Being new to accessibility, I didn’t know the steps I needed to make to tackle this large task.
I know, from experience, how overwhelming this experience can be. Hopefully, the guide below will help remove some of the anxiety by guiding you on where to start.
Steps for beginners
1. Understanding the Accessibility vendor’s report
If you’ve never seen one of these reports, let me tell you what to expect.
Most accessibility vendors will test an agreed number of pages on your website. Since companies have large websites, with thousands of pages, a vendor will agree to test a limited number of pages. Your contract will outline what will be tested. Usually, the pages chosen are the highest traffic pages and one main user flow. The idea is that the test represents a sample size of the accessibility issues on your website.
The report tests your pages, top to bottom, looking for accessibility issues, similar to how Lighthouse will test your page, but on a larger scale. So if you have, for instance, 10 violations on your site header and the vendor tests 20 pages, your report will show a total of 200 violations (10 violations for all 20 of your tested pages). This repetition is what fattens your report.
The video below features a furry creature in business attire dropping a stake of papers on a desk
2. Organizing your report
Below is how the method I take to organize my vendor’s report. Hopefully, it will help you too.
Steps:
- Take a look at your accessibility vendor’s tool, can you add your own tags?
- If not, export the report and use a spreadsheet tool
- If so, add tags as you go
- Review each violation (this is a painstakingly long process) and add your tags
- Tag each violation based on your atomic design
- Tagging each finding will help you quickly filter for similar issues. For instance, a button may have 3 violations; one for color contrast, one for an incorrect role, and another for its focus state.
- Tagging will allow you to quickly filter for all the violations found
- Now that you’ve reviewed each issue found
- Find all the violations with the same tag
- Remove/hide duplicate findings. Some elements are repeated on multiple pages, so the violation will be found for every page tested.
- Now you have a list of violations per element
3. Where do you start?
You finished organizing your accessibility vendor’s report, congratulations! Now what?
- Start with what’s on your website the most to least often. For instance, your template(s), header(s), and footer(s) are repeated on every page; making them the perfect place to start.
- Once those are done, move on to the next element used more often (usually your links and buttons).
- From there, keep going!
Last thoughts
You’ll never “finish” your accessibility work. You’ll need to include accessibility in every step of your software life cycle. The easiest approach is to not add accessibility issues to your website. However, if you find yourself in a scary position, I hope this guide helps you to eventually become a great accessibility advocate.
