How We Improved Accessibility on Our Site
Have you heard about our new service, Web Accessibility Audits? Many of our clients are just starting the journey toward a more accessible website. Though the government compliance mandates are for state and local government and public entities funded by the government, we believe accessibility improvements don’t just help people with disabilities—they make websites better for everyone. So we decided to find out how well our site performed against the same WCAG 2.1 Level AA standards.
We’re going to walk through the audit process, what we found, and how we made our site more accessible.
Our Approach: Automated and Manual Review
Going into this, we wanted to follow the same process we use for our clients. We weren’t doing this just to see how we performed from a compliance standing, but to experience the process.
We use the WAVE web accessibility evaluation platform—developed byWebAIM, a leading accessibility research organization—as the foundation for our automated scanning. We ran every inventoried page on our site through WAVE and reviewed the findings.
Automated tools catch a lot, but not everything. Also, they sometimes flag things that aren't actually problems. For example, we had repeated text contrast flags because of our site’s CSS background image rendering. Or, you might go digging in a million places just to find out that the accessibility scanner only grabbed a partial screen due to Javascript load times. We catch these kinds of things in manual review with the WAVE browser extension.
If you don’t understand the jargon in those examples, it’s not a big deal. The takeaway is that expert manual review is critical to the audit process.Our find findings report breaks this down so it’s readable by anyone—not raw, unprocessed output from an automated tool.
Note that on larger sites, we tier pages into core, sampled, and spot-check groups so the review is thorough without being redundant. Everyissue is categorized by severity and mapped to the specific WCAG 2.1 AA criterion it fails.
Audit Results and Remediation
As we processed our automated results, we tossed out false flags after further investigation. Here are a few examples:
Decorative underlined text. Manual review showed the only underlined text was linked, not decorative.
Very small text. With our team’s experience in design and development, we were surprised by this one. But, it turned out to be a flag on hidden elements that didn’t actually have an impact on the user.
Text contrast. Remember above where we mentioned background image rendering—how we got those false flags about text contrast? Essentially, the scanner clocked the section’s background color rather than the background image. Manual testing showed the text contrast level against the background image was good to go.
But, there were also opportunities to tighten up, including:
Adding Alt Text on images and graphics. Alt Text is helpful if your internet connection is slow. (Airplane internet, we’re looking at you.) You’ll see a short text description before the image loads, giving you the opportunity to decide whether you want to wait for it to load or move on. Alt Text is what anyone with low vision using a screen reader needs to have images and graphics described. Our site is old, so we had some work to do here. We used a handy, automated tool in Squarespace to generate Alt Text for our existing Assets. Was it perfect? No. But having a quick, messy draft to edit is way faster than backfilling from scratch.
Correcting heading level order. Heading levels should be used hierarchically, from H1 to H2 to H3 down the page. We had a few instances where we skipped a heading level, or started in the wrong order, based on the heading’s visual styles alone. This can create an out-of-order, confusing experience for anyone using a screen reader. It’s good practice to use the correct heading level order, occasionally styled with custom code as needed. So, that’s what we did instead.
There’s more, but it gets into the weeds pretty quickly. What we learned though is that our accessibility audit system works. The automated scan to manual review process delivered a solid plan to remediate our site. In turn, we were able to deploy changes quickly.
With remediations complete, our site is now more accessible to those with low vision or anyone using a screen reader. It’s become a better user experience in general with all the improvements for readability and optimal functionality.
It doesn’t stop there, either: Thanks to the audit results and our close manual review, we now have a punch list of things to keep an eye on as we build new pages and posts.
Not sure if your website is compliant? Get started on an audit today.
