ADA compliance: what you need to know

We know it can be a daunting task to make your website accessible to persons with disabilities. The list of requirements is long and many of the items are hard to understand if you don’t have a lot of web development experience. To further complicate things, there’s confusion about what sites are legally bound to apply accessibility standards in the United States. Technically, your site – especially if it handles ecommerce – falls under Title III of the Americans with Disabilities Act (ADA) which prohibits discrimination “in the activities of places of public accommodation.” That’s subject to broad interpretation and has caused website litigation to increase year after year. In 2018, there were 2,258 federal web accessibility lawsuits filed, which is almost three times higher than the year before. Whoa.

So, to help you better serve your patrons and hopefully avoid litigation, Saffire has implemented numerous updates within our software which allow you to bring your website into compliance with the ADA. Specifically, the Saffire platform can meet the Worldwide Web Consortium (W3C) Web Content Accessibility Guidelines (WCAG), version 2.1 level AA, which deals with the most common barriers for disabled users. Many of the changes we’ve made are for use with accessibility tools, like screen readers for the visually impaired, as well as support for keyboard-only control to assist users who have difficulty using a mouse. These are now built-in to your site!

Yet, compliance is not just a technical issue - there’s also work that needs to be done within your content. This includes adding descriptions to images, as well as transcripts and captions for video and audio files, and descriptive text for page titles, headings and links. Use of color is also a concern, along with some common website elements such as the familiar ‘click here’ link or button. Think about this: ‘Click here’ doesn’t really tell a visually impaired person using a screen reader anything about the link! Accessibility compliance will likely require you to change the way you present your content.

The first step we recommend is one that won’t even appear on your site. That may be a little disappointing, but it addresses the most common complaint in demand letters and lawsuits concerning accessibility. You can now add descriptive alternative attributes – which are usually referred to as alt tags - to every image on your site. To do so, just edit any image in Spark and you’ll find the alt tag field available.

Here are a few key rules to follow for creating alt tags:

Add meaningful alt tags for images that need to convey meaning. If an image is just for visual interest, an empty alt tag is acceptable.
Describe the image – don’t repeat the file name or adjacent text. Use details, not keywords… and be specific about the content.
Keep your alt text fewer than 125 characters. Screen-reading tools typically stop reading alt text at this point, cutting off long-winded alt text at awkward moments when verbalizing this description for the visually impaired.
Don't start alt text with "picture of..." or "image of..." Jump right into the image's description. Screen-reading tools (and Google, for that matter) will identify it as an image from the article's HTML source code.

To find all the images which need alt tags added, you can audit individual pages and check each image – or you can use a 3rd party tool which can do the searching for you. We suggest Screaming Frog (yes, that's really the name) - they have a step-by-step process for finding missing alt tags: https://www.screamingfrog.co.uk/how-to-find-missing-image-alt-text/. Either way, you’ll still end up editing every page with image content, but a search tool can help you avoid opening pages which don’t include images or already have alt tags.

Step two: if you add any video or audio files, they need text transcripts and captions. Transcripts can be added as links below the file, just like adding alt tags. Captioning needs to be synchronized and embedded within the produced video. By hosting your videos on YouTube, adding captioning is fairly easy to do. But… if you have video on your homepage, it will likely require some reworking of the functionality and possibly design changes to comply with the guidelines. That’s a good discussion to have with your Saffire coach.

Step three: audit the presentation of your content. The title module on each page is, by default, styled with an H1 tag, meaning it is the main heading on your page. Avoid using any other H1 tags… anywhere… ever. Use the H2 for sub-headings, and H3 for sub-sub-headings, and so on. The content should be structured as a hierarchy which makes sense if it were being read to you. Also make sure your links are descriptive. As mentioned earlier, “Click here” has no context. It’s also terrible for your search engine optimization. Instead, use phrasing like “For more information, visit the Saffire client page”, or “Order tickets in advance at Web Accessibility Standards on Accessible.org (trust us, it’s not full of techno-jargon). Just be aware that to strictly adhere to the standards it may require custom development and additional expense.

Step four: Consider purchasing an accessibility widget for your website, like Userway https://userway.org/ this helps ensure that your site visitors have a seamless accessible experience!

Here are several websites which can help you with web accessibility:

Find missing alt tags with Screaming Frog

Test your site with the Web Accessibility Evaluation Tool

Check the colors on your site with the WebAIM contrast checker

Add accessibility extensions from the Chrome Web Store

Adding ADA captions to YouTube Videos

Read this article which goes into more detail about alt text

This article explains why the use of “click here” should be eliminated from your site