3 Accessibility Gotchas

Author:
Marcus Harrison
Marcus HarrisonSenior Front-End Developer
3 Accessibility Gotchas

The web is a utility that enhances and facilitates many aspects of our lives each and every day. It’s important that everyone, regardless of disability, has unabated access to information on the web. So, it goes without saying that we should all be crafting our sites with accessibility web standards and best practices in mind. Features like support for screen readers, captioning, and high contrast all help to create a more accessible and engaging web experience. Here are 3 accessibility gotchas that you may not be aware of when building and testing your sites to be WCAG 2.1 AA compliant:

1) What color is behind your images?

Text atop images is very common in modern web design. However, images on your site might not always display, in the case of images being turned off by accessibility tools. So, it’s important to make sure you have fallback colors in place that will pass accessibility contrast requirements. Otherwise, you may end up with white text on a white background, which, in case you’re wondering, scores you a total of 0 accessibility points.

2) Elements can falsely fail accessibility testing tools

Contrastly (pun intended), some elements can fail accessibility testing on some tools, but in reality, they are passing. One example of this is background gradients. Popular accessibility testing tools, like WAVE, won’t take a background gradient into account when determining readability. It’s looking right through your background gradient to whatever solid color is behind it. Chances are, that color is white. Another example of a false fail is inset box shadows.

So, manual testing is still required to double-check that the tools are correct. This way you aren’t spending time trying to fix something that isn’t broken.

3) Providing optional accessibility features to maintain design integrity

Ideally, accessibility should be taken into consideration during the design phase of a project, but that doesn’t always happen. A design or section may have a certain look that would become too heavily altered once adjusted to meet accessibility standards. In cases like these, a middle-ground solution is often needed. The solution could be as simple as giving users a control or toggle to change the way the site is rendered. This could be as simple as a button to adjust the font size or enable a high-contrast mode etc.

Bonus Tip:

For those older sites that need to become accessible after the fact, or for a low-budget site where proper accessibility testing may not be economical, a tool we found that can provide a basic level of compliance is UserWay. It’s a web accessibility widget you can install on your site that allows the user to change a whole array of site settings with a click of a button - without any changes to your website’s code.

Need to make your site Accessibility compliant? Our in-house web team can help. Contact us.