The Americans With Disabilities Act, or ADA, covers a multiplicity of things in the brick and mortar world, such as unobstructed access to buildings and offices, which need to be reachable and usable by all people, whatever their degree of ability or limitation. Here on the Internet, websites also need to be usable for people with a wide range of abilities, if possible. And it’s the right thing to do.
We are designers, not lawyers, so we can’t advise clients on what to do if they are sued or threatened with legal action in the ADA space, whether the grievance is real or a nuisance. What we can do is recount our experiences in reviewing websites and improving them for accessibility.
The regulations covering website accessibility are called WCAG, which stands for Web Content Accessibility Guidelines, published by the World Wide Web Consortium (W3C), which develops web standards. Although their documentation is extensive and may appear bewildering when you first review it, we can summarize several of the most important factors that make a website better, ADA-wise, and which we follow:
Type contrast
If your firm or organization’s website has pale colors or small fonts, this may have been attractive when your designer first presented it to you, but it is likely to present an obstacle to some readers. We use several tools to evaluate a website’s ADA compliance, including the WAVE Web Accessibility Evaluation Tool at wave.webaim.org. Type in your url and you will see a number of markers indicating the health of your site in many areas, including contrast. Acceptable contrast is indicated by a number. A lighter color might not meet this measure, and contrast is also affected by weight and size. Typically we try a few variations before we pass the test, then change the color formula on the fonts that need it.
Heading hierarchy
The html language that “describes” a web page to a browser was set up to have six levels of heading, much like an outline you had to write in school. Starting with “H1”, a web page rarely needs to go below “H3” unless it’s something like a scientific paper. When you read a web page such as this, you don’t see what level of heading you are reading, but screen readers do.
Designers sometimes pick a heading out of order because they like a particular font or style it has been given, especially if they used a template or pre-made “theme” to create your website. But this may disrupt the logical function that headings are supposed to carry out, and may cause your page to be flagged because a screen reading device can’t follow heading order when traversing the page. In many cases, this is an easy fix as well, if you can apply the correct heading to different parts of your text with simple editing tools.
Image tags
Those with poor vision may not see the pictures you’ve placed on your website, or not be able to discern detail. But, using a screen reader, your images can be identified if you have accompanied them by descriptive tag. In web design parlance, the method is to use an ALT tag (short for “alternative”), which can be as descriptive as you need in order to get your content across. Your designer should know how to do these, and many content systems such as WordPress provide a field for the ALT tag, improving the experience of many of your visitors. Well-implemented ALT tags are also a positive “ranking signal” for SEO.
ARIA “roles”
The sections of a web page can be tagged as to their function on the site overall. Although the header or the footer of your page may be obvious to you, it may not be clear to a visually impaired user, so your designer can employ these additional tags, utilizing Accessible Rich Internet Applications or tools (hence the acronym ARIA). Similar techniques can be used to identify when a form or search function is present on your page.
“Focus” states
Although there are many other techniques, we’ll close with this one, “focus”. As you move through web pages, you are constantly benefitting from the linking technology that makes the Internet so useful — in fact, linking is just about the biggest difference between the Internet and any technology that came before. But a user can only select one link at a time, a state of affairs that is called “focus”. When designing a website, you can incorporate code that causes all links to be highlighted by the tab key as you move through the page: navigation, text links, and images. Most people have no trouble using links, but these may not be accessible to those with impaired motor skills who have trouble handling a mouse. Focus solves the problem, and can be implemented using just 2 or 3 lines of code.
These are just some of the things we have incorporated into our work, and we always available to review them if you would like to contact us. When we have completed work on a site, I generally suggest including an Accessibility Statement, which can be part of your website’s disclaimer, or a separate page. Here is ours. In a few simple sentences, it declares your intention to make your site more usable to a wider range of visitors, and you can also use it to enumerate the actual steps you have taken, if they include the types of methods I’ve gone over here.
One last point: over the last few years, we’ve become aware of both ADA “trolls”, who use scare tactics to try to force companies into costly legal settlements, and also of agencies claiming they can remove these threats by cleaning up your website — for a very hefty fee. But in our experience, a website for a small or medium-size firm or business can be improved with just a few hours of work, and need not be very expensive. If you would like a quote on upgrading your website, fill out our inquiry form.
This article is an update of a post originally published in December 2020.