ADA Compliance and You

The More You Know

A few weeks back I got a call from a confused compatriot: “One of my clients just got a warning letter that their website isn’t ADA compliant, and they have to fix it before they get sued. Know anything about this?”

Who knew? was my first thought, followed quickly by a cascade of terror, as I thought about all the websites I’ve built over the years and realized suddenly that this compliance thing I’d never even heard of until now could result in my clients getting sued and heavily fined. When I’d finished having a heart attack, I dug in and started doing some research.

Since that long-ago time two weeks past, I’ve gotten tons of messages from various clients and panicked business owners I know, have seen posts on facebook regarding this mass hysteria, and have spent a good deal of time consulting with friends to help them fix their websites. Turns out, getting your website up to code for ADA compliance is no big deal, my friends. It’s good for business, good for your SEO, and good for humanity.

Keep Calm and Start Tagging Your Media

Let me start by mentioning that if you have a blog or just a hobby site (like this one), you don’t really have to worry about this stuff. This is specifically a guideline for businesses. Think of your website compliance process in the same vein as adding wheelchair access to your physical store on Main St. Also: (because I have been asked this question) Having wheelchair access at your physical location does NOT mean you can skip compliance on your site. Your website is considered an extension of your business, even if not your sole business.

One of the things I learned along the way is that people who are visually impaired don’t use the same browsers, or even the same hardware, in some cases, as people who aren’t. Speaking of which, allow me to share one of the coolest tech devices I’ve ever seen, that I found on this journey: a refreshing tablet that will turn your webpage into BRAILLE, y’all. Can we pause to freak out for a second about how awesome that is?

People who are visually impaired, but not completely blind, may use tools in browsers that allow them to adjust contrast, color, and size of text for readability. People with hearing impairment may use the same browsers, but would obviously need captioning or transcripts for content in which audio is embedded — like instructional videos, for instance. Some people who have seizures can’t tolerate flashing graphics and backgrounds. Because websites are an indelibly tied to the way we do business these days, and because many crucial services occur on websites, it’s crucial that all people be able to access websites.

The big deal du jour that’s causing a bunch of people to freak the heck out is that businesses are actively getting sued for non-compliance now. From the tales of some people (not my people), sometimes this happens without any initial warning or leeway time to repair. A friend of mine argued that being sued for non-compliance without a warning period is unethical, especially since a lot of people don’t know about this issue to begin with. Here’s the problem with that argument. If you’re a business, it’s your responsibility to know of rules and regulations around serving your clientele. Just because you didn’t know you have to have a wheelchair ramp to make your brick and mortar accessible to disabled costumers; just because you didn’t know you weren’t supposed to sell booze to underage kids; just because you didn’t know you weren’t supposed to dump toxic sludge in the river….doesn’t mean you can’t be punished for doing those things. Ignorance isn’t an acceptable defense in a court of law.

COMPLY!

I don’t think I need to go into much detail about hearing impairment, because the solution is basic: caption or provide a transcript for any embedded audio you use on your site. It’s especially important if that specific information is not given in text form anywhere else.

People with visual impairment sometimes use special browsers that read all the content of the site aloud. That means every piece of media needs to be tagged appropriately. Crucial information should be in live text (versus flattened into a graphic). For instance:

This image tells my guests that there’s a substantial sale on training events if they just fill out a simple survey before purchasing. If I simply upload this image and move on, there’s no existing metadata to read aloud to a person who can’t see this banner.

What I need to do is enter this into my image tag:

< a href=”../salebanner.jpg” target=” _blank” alt=”sale! click here to apply for a 50% discount” longdesc=”pookiemcnoodles.com/salepage/#discountform” >

The red text (alt=) indicates “alt text” or “tooltip” – this text will be visible if anyone rolls their cursor over this image. Go ahead, give ‘er a try on that image to the left. (EDIT: for some reason, this isn’t working for me in Chrome, but the alt tag is there, and can be read by a browser. You can see another example of alt tag in my logo at the top of this website.)
The blue text (longdesc=) uses the “longdesc” tag (as in, long description). If there’s a page on your site with more information about your graphic, you can use longdesc to send your visitors to that page, like I did in the example. You can also just use additional descriptive text in longdesc tags, like “sale banner, click to visit the survey page and receive 50 percent off through Friday March 29.”

If you’re operating in WordPress, all you need to do to fix these missing tags is go directly to your Media Library, click on an image and add tags. Close, click, repeat.

This is one way it might look, depending on how your media library is set up:

If you see this, just enter the text and then close the window. There’s no save or publish button, but once you add the descriptions and close the window, you should be able to open this file again and see the info you entered.

this is where alt text goes — *this is where the caption goes (optional)*

Here’s another way it might appear in Media Library:

caption

The Recap

MAKE SURE:

All media, including images, videos, PDFs, etc. are properly tagged (bonus: helps with SEO)
There is a live text alternative to info graphics, video transcripts, PDFs, etc. (bonus: more SEO benefit!)
All audio comes with either a transcript or captions (like in video) so people who can’t hear can still access the material. (bonus: hearing people also need not be irritated by having to listen to your video in a quiet or otherwise inappropriate setting!)
Don’t add code that prohibits people from using special browser tools to enlarge and change the color of text

Directly from the ADA Toolkit page:

Problem: Images Without Text Equivalents
Solution: Add a Text Equivalent to Every Image

Problem: Documents Are Not Posted In an Accessible Format
Solution: Post Documents in a Text-Based Format

Problem: Specifying Colors and Font Sizes
Solution: Avoid Dictating Colors and Font Settings

Problem: Videos and Other Multimedia Lack Accessible Features
Solution: Include Audio Descriptions and Captions

Other considerations when developing websites:

include a “skip navigation” link at the top of webpages that allows people who use screen readers to ignore navigation links and skip directly to webpage content;
minimize blinking, flashing, or other distracting features;
if they must be included, ensure that moving, blinking, or auto-updating objects or pages may be paused or stopped;
design online forms to include descriptive HTML tags that provide persons with disabilities the information they need to complete and submit the forms;
include visual notification and transcripts if sounds automatically play;
provide a second, static copy of pages that are auto-refreshing or that require a timed-response;
use titles, context, and other heading structures to help users navigate complex pages or elements (such as webpages that use frames).

3. Identifying other barriers to access

Technology is changing, and many website designers are using creative and innovative ways to present web-based materials. These changes may involve new and different access problems and solutions for people with disabilities. This Chapter discusses just a few of the most common ways in which websites can pose barriers to access for people with disabilities. By using the resources listed at the end of this Chapter, you can learn to identify and address other barriers.

It’s Gonna Be OK

In the end, most of the compliance process is easy to implement yourself, or with the help of your web developer or any other technically savvy helper who understands this. And really, it mostly just takes rolling up your sleeves and getting through the tedious work of tagging and formatting your content correctly.

Once you’ve finished, you can make your future maintenance nearly non-existent by making sure you tag all your images and follow these guidelines when adding new pages, media, and content to your site. Don’t wait to get sued; you don’t need to spend big bucks to getting your compliance squared away unless it’s a massive train wreck already due to sloppy development standards, drag and drop site builders, etc.

If you have any questions, give me a holler!