Articles

Most organizations have heard of the Americans with Disabilities Act (ADA), but few are clear on exactly how it affects the way they operate their business — especially online. Every US-based business is required by the law to provide full and equal access, regardless of ability, and this is especially true for those that provide some form of public accommodation.

Passed into law in 1990, the ADA was written when only 15% of US households even owned a computer — never mind the current ubiquity of smartphones. However, Title III of the ADA says, in part, that you can’t discriminate against an individual on the basis of disability “in the full and equal enjoyment of the goods, services, facilities, privileges, advantages, or accommodations of any place of public accommodation by any person who owns, leases, or operates a place of public accommodation” and the 9th Circuit Court of Appeals upheld that this extends to the online world in Domino’s v. Robles:

Domino’s website and app facilitate access to the goods and services of a place of public accommodation—Domino’s physical restaurants. They are two of the primary (and heavily advertised) means of ordering Domino’s products to be picked up at or delivered from Domino’s restaurants. We agree with the district court in this case—and the many other district courts that have confronted this issue in similar contexts—that the ADA applies to Domino’s website and app, which connect customers to the goods and services of Domino’s physical restaurants.

The good news is that the basic principles of the ADA are easy to adhere to, even online, and many run in parallel with SEO best practices that you’re likely already following. Here are some of the easiest updates you can make to bring your website into compliance.

Color Contrast

This is the easiest, but most often overlooked, element of your website’s design to check and correct. When choosing a color scheme for your website, ensuring that the text color contrasts well against any background color. You may need to make small compromises on your branding or design, but it will help those with visual impairments (such as color blindness) to view your website. This will also have the added benefit of helping mobile users view your website if they’re outdoors and in bright sunlight.

From a web development perspective, this is a very easy change to make and there are tools, such as WebAIM’s Color Contrast Checker, that can help you.

Alt Text

Your website’s text is easy for screen readers to understand, but the same can’t be said for images, audio, or videos. Instead, they will rely on descriptive alt text that’s written into your HTML to interpret them. Without it, the screen reader may just read back the filename of your content which may be descriptive, but most likely isn’t descriptive enough to provide the full context or experience. 

The good news is that this is very easy to add. Within the img tag, a simple alt=”description” attribute (where “description” is the written description of the content) is all a screen reader will need to know what to read back to the user. And if you’re not writing your HTML from scratch, any CMS will include this option when you upload and add the file.

For the same reason, it’s recommended that you don’t include text embedded within your images or video unless that same text is also included in the alt text.

Semantic HTML

Much of your website can be made accessible just by ensuring that the correct HTML elements are used for their intended purpose and in the correct hierarchy. It’s one of the best accessibility aids that a screen reader can use to properly translate the structure of your website.

Examples of this can include properly nested heading (H1, H2, H3, etc.), paragraph, and list tags. The screen reader will each header out as you progress through the content, notifying you what a heading is, what a paragraph is, etc., it will stop after each element to let the user advance at a pace that is comfortable for them, the user can jump to the next/previous heading, and you can pull up a list of all of the headings to use as a table of contents.

Good semantic HTML also has the added benefits of rendering better on mobile devices and improving your SEO.

Labeling UI Controls

Labeling UI controls refers to making sure that anything you can do or submit on your website is clearly labeled. Examples of this include forms, submission buttons, and order/purchase buttons.

This is best completed through a process called Accessible Rich Internet Applications (ARIA), which is a set of attributes that define ways to make web content and web applications (especially those developed with JavaScript) more accessible, and is built into many common frameworks. It supplements HTML so that these user interactions that are commonly used can be passed to assistive technologies when there is not otherwise a mechanism.

However, there are only varying degrees of support for ARIA based on the operating system and browser being used, as well as the kind of assistive technology the user may require that may interfere with it. 

Also, it’s important to acknowledge that some people who rely on assistive technology may be reluctant to upgrade their software because of the comfort level they’ve built with it. Because of this, it’s more important to use the semantic HTML elements we discussed above whenever possible as it’s more widely supported.

WAVE Evaluation Tool

At Howard Development & Consulting, we like to use WebAIM’s WAVE Evaluation Tool to quickly check our websites and identify any accessibility issues. WAVE is available as a free Chrome extension and provides visual feedback about the accessibility of your web content by adding icons and indicators to the page. 

While no automated tool can tell you if your page is fully accessible, WAVE excels at simulating human interaction and informs you of any accessibility issues. All of the analysis is done within the Chrome browser, which allows for the secure valuation of intranet, local, password-protected, and other sensitive web pages.