Accessibility

Web Accessibility Requirements: What Designers and Programmers Need to Know About ADA and WCAG


Web Accessibility Requirements: What Designers and Programmers Need to Know About ADA and WCAG

Before we can talk about what makes a website ADA compliant, we need to define a couple of terms. First, let’s talk about the ADA—American with Disabilities Act—which was put in place to allow people with disabilities reasonable accommodations to enjoy the same businesses, services, and employment opportunities as those with able bodies.

The ADA sets forth guidelines that help achieve this, and while those guidelines don’t directly mention web design, it generally falls under Title III, technical assistant guidelines.

So, what makes a website ADA compliant? What would be considered a reasonable accommodation?

That’s where WCAG (Web Content Accessibility Guidelines) come into play. They were created by the Web Accessibility Initiative, which is part of the World Wide Web Consortium (W3C).

While the WCAG isn’t a legal mandate like ADA, meaning you won’t be fined if your website doesn’t comply, there are some states working hard to adopt it as a legal standard — meaning fines and legal obligations could be right around the corner.

WCAG defines four key software accessibility standards, which are:

  • Perceivable – Content is formatted so that people with hearing or vision impairments can make sense of the information presented.
  • Operable – The website is functional without a mouse and using adaptive technologies.
  • Understandable – The language and functionality of a site should be easy to understand.
  • Robust – Website is functional in a reasonable variety of browsers and devices.

Now, let’s break down these categories a little more. For each type, let’s define some actionable items that you can incorporate into your site to create a better experience for all users.

Perceivable

For the perceivable standard, there are a few different ways that people consume media on the internet. For those that can see or hear, we tend to spend most of our time using our eyes to read and view content and ears to listen.

So, how can we give a similar experience to someone who has little-to-no vision or hearing?

First, all images must have descriptive alt-tags. Screen readers will use these alt-tags to describe the image to the user. If your image is complicated, say like a graph or chart, provide an image description that breaks it down in detail.

If you use something like a Captcha, where users must be able to read and enter the text from graphics, include an audio clip for those that cannot see.

For those who have little or no hearing, provide captions on all videos. If your site has audio clips, provide transcriptions.

Finally, you’ll also want to consider color blindness. While your text overlaid on a similar color may look great to your eyes, you’ll want to ensure the contrast between the two is high enough that those with color blindness can decipher them. You’ll want a contrast ratio of 4.5:1 for small text and 3:1 for large text.

Operable

We’re all so accustomed to using a mouse or touchscreen to navigate the web, and sometimes it’s hard to put ourselves into the shoes of those who have mobility disabilities. If you are unable to hold a mouse steady, a keyboard is one of the best ways to navigate the web. You’ll want to ensure that your website can be easily navigated using arrow keys.

Another thing to consider is eliminating any time limits. Navigating with a mobile disability or by using a keyboard can be a little slower than a mouse.

You should also give navigation special consideration. You’ll want to allow your users to quickly skip parts of the site, return to the top quickly, and view site maps with ease.

Finally, if your site features a backend where user information or work is stored, you’ll want to protect those who have tremors, cognitive disabilities, or just plain anyone from accidentally deleting their work. Be sure to include confirmation messages, warnings, and auto-alerts that will help users keep away from stumbling into frustrating issues.

Understandable

The concept of “understandable” is a bit more subjective than the other categories. After all, what might make sense to you may be misinterpreted by someone with a cognitive disability.

The best way to make your writing accessible is to keep the content short and straightforward. Cognitive disabilities range from dyslexia and ADHD to Alzheimer’s and memory loss. So while it’s impossible to write something that will work for all people who suffer from a cognitive disability, simplicity is the common denominator.

Another way to make your content more comprehensible to diverse audiences is to include graphics, videos, audio files, and other creative multimedia content. Don’t assume that everyone learns the same way you do! While you may prefer an article, another user may get far more out of an illustration or video.

Robust

A robust site is scalable to different screen sizes and avoids outdated technologies like Flash—which can easily be replaced with HTML5 and CSS3 animations or an embedded video.

There is a little leeway in this though. It isn’t expected that your site will work on ancient smartphones or relics of computers that are still chugging along, using ancient browsers.

It is up to you and your team to set your baseline. A good rule of thumb is to support browsers and devices that are five years old or newer.

Finally, ensure that you are writing clean code. Poorly cobbled together HTML, and other front-end languages, can leave sites buggy and unable to render on older devices. Use formatting best practices (including indentation) and keep comments short and to the point. Don’t copy and paste code directly out of a program like MS Word or Google docs and into WordPress, either, since it’ll add irrelevant formatting code like the following:

<h2><span>Writing Good Code</span></h2>

<span>Poorly cobbled together HTML, and other front-end languages, can leave sites buggy and unable to render on older devices. Use formatting </span><a href=”https://en.wikipedia.org/wiki/Best_practice”><span>best practices</span></a><span> (including indentation) and keep comments short and to the point.</span>

Here’s a better version of the above:

<h2>Writing Good Code</h2>

<p>Poorly cobbled together HTML, and other front-end languages, can leave sites buggy and unable to render on older devices. Use formatting <a href=”https://en.wikipedia.org/wiki/Best_practice”>best practices</a>(including indentation) and keep comments short and to the point.

Here’s a good list of web coding best practices for further reading to make sure that both your site load time is minimal, and your code is in good shape for future editing.

With these basic guidelines in mind, you’ll find that making your website more accessible isn’t too big of a hassle. Think of how your site would be used by those who have low-vision to blindness, low-hearing to full deafness, mobility troubles or tremors. Ensure that everything on your site is labeled, described, and laid out in a simple-to-navigate manner.

And if WCAG standards ever do become a legal requirement (like ADA), you’ll be set up — both from a legal perspective, and for the ease and comfort of your site visitors.

Want more tips? Check out the iSoftStone Accessibility Best Practices Guide.