The first website accessibility trial made it to the courts in June 2017, where Winn-Dixie grocery stores were penalized and mandated to comply with Web Content Accessibility Guidelines (WCAG). In August 2017, then again in December of the same year, suits were brought against Blick Art Materials resulting in a class suit and ultimately a settlement agreement requiring compliance with WCAG.
Although WCAG was created by private standard setting organization, the World Wide Web Consortium (W3C), the New York federal court case against Blick Arts Materials known as Andrews v. Blick Art Materials, LLC, made it very clear that WCAG is law. The decision concluded with the court stating that WCAG standards provide “adequate controls to allow visually impaired individuals to access the Internet...In the absence of competing standards, and through demonstrating that the standards are nearly universally accepted as providing adequate access to the visually impaired, the court can appropriately accept the present guidelines as presently adequate.”
So what do you need to know from WCAG to make sure your website isn’t vulnerable to litigation?
Here are a few rough guidelines to follow to update your site:
- You must have a valid HTML5 Markup
- Your site must be fully keyboard navigable (using the tab, arrow and esc keys)
- All text content on your site has to have a minimum contrast ratio of 4.5:1
- All of your dynamic content sections need to be appropriately marked up with ARIA attributes and landmark roles (we’ll discuss ARIA later)
- The tab focus indicator must visually indicate when a link or button is focused.
- The content that is made accessible to screen reading software must be meaningful and useful.
- Your site must be able to handle text scaling up to 200% without causing horizontal scrolling or content-breaking layout issues.
But before we jump in and start explaining some of the more pressing guidelines like ARIA, I’d like to make a point. When you are looking at ADA compliance issues for your website, sure, avoiding lawsuits is a priority, but you should also make a point to address compliance as a way to design a great user experience for your site that delights and wins users coming to your site, whether they are keyboard only, low-vision or are using screen reader software.
ADA compliance means making sure you build a navigable customer journey for people who use the internet in ways that we don’t normally think about.
Especially if your audience spans all ages, like banks, e-commerce or public services, not optimizing your site for ADA compliance means losing potential customers and cementing poor user experiences for your vision-impaired users, and when we factor in older generations, that’s not an insignificant number.
Now, onto the guidelines. If you really want to get out ahead of ADA compliance, you need to get to know the new ARIA standard, and fast.
ARIA comes out of the Web Accessibility Initiative who defines it as Accessible Rich Internet Applications.
ARIA is a standard that helps keyboard-only users navigate websites. You wouldn’t know if you use a mouse or trackpad, but most websites are throw-something-at-the-wall level frustrating if you're trying to navigate them with a keyboard, which for someone who is visually impaired, unsighted or physically incapable of using a mouse or trackpad, is the sole method of digital access.
A couple of years ago, web designers were getting away with designing buttons without outlines. Sure, there is an extra step involved, and it’s invisible to most internet users, but if you’re using the tab button to explore your options on a website, landing on a button without an outline makes the cursor and all sense of direction disappear. It’s a nightmare and makes websites unusable. These days, the bad practice of making buttons without outlines is expressly taboo in ARIA, WCAG and officially in ADA regulations.
Another thing that ARIA dictates to a computer when a keyboard-only user is navigating a site is to ignore image alt text. Before ARIA, pressing tab to scroll through site content often landed you on descriptions of images next to a CTA. For an unsighted user, the information that a jockey is riding a horse through tall grass is not going to streamline or improve their UX. In fact, it detracts from it. ARIA tags ignore images altogether, making the site more usable for a screen reader.
If you gain anything from this post, it's to familiarize yourself with ARIA standards and apply them to your website. They will leapfrog you ahead of ADA requirements to come so that you don't have to continuously patch compliancy holes every few months. They will also guarantee you a user-friendly website for your keyboard-only users, and that's big.
ADA compliance means more than just providing tab navigation. Animations, dynamic content, text scaling and colors all need to be checked for ADA standards to create a more optimal user experience for low vision users, which as mentioned earlier, isn’t an insignificant population.
One of the biggest modifications to mention is text scaling. When a low vision user enters your website, chances are they are zooming in 150, 200, maybe even up to 250 percent, especially on a mobile device. If your site isn’t optimized for this, then you’re going to have issues with horizontal scrolling and content-breaking, and your entire site’s usability is going to suffer. But just like adjusting the text contrast ratio and image scrolling speeds, the minor modification makes a world of difference for your website users that aren’t fully sighted.
Recently we were asked to create a tab module for a financial industry’s website that would showcase their content and information in a creative and ADA compliant manner. They wanted to create a page that had both an excellent user experience for keyboard-only users, and also an aesthetic charm for their sighted users.
So we created the Story Block Tab Module which can be added to any page on a HubSpot-hosted website. And it is awesome.
But enough about our awesome tab module. If you want to learn more about that, visit our site and you can test it out for yourself. I’ll link it here:
- Stop looking at ADA compliance as a way to protect your business from lawsuits and start creating incredible user experiences for all types of users that come to your website. If your service is for everyone, your website should be too.
- Download the WCAG standards and start planning with your dev team.
- Never skip over small modifications like button outlines. Without them, your site is just an image with random directories. And that’s just not fun.
- Learn how to utilize the ARIA standard to improve your site navigation for keyboard only users.
- Optimize your desktop and mobile content to handle deep text scaling up to 200% and beyond without breaking. If your website doesn’t zoom in well on mobile, you’re eliminating a huge audience.