April 10, 2018

How the American Disabilities Act Affects Web Design


In the last few decades, digital domains have completely upended our ideas about where a business "lives." Virtual sites have become the preeminent home and public face of companies across the globe, with traditional brick-and-mortar locations taking a more satellite role. No matter how that shift sits with your sentimental side, it indicates that websites are now the most frequented "location" for commercial interaction. And just like their physical predecessors, digital domains must be accessible and available to all individuals, including those with disabilities.

History of ADA and the web

The first Web Content Accessibility Guidelines (WCAG) were drawn up by a faction of the World Wide Web Consortium (W3C) and were intended to keep all websites accountable to an international accessibility standard. The word intended is key. While WCAG 1.0 was released back in 1999, the Department of Justice delayed making any regulations formal under U.S. ADA law until the faraway future date of...2018.

But wait, you say, it is 2018! You can bet that the good folks at the DOJ had a similar reaction. The time has arrived to formalize ADA web policy, something which many other nations (including our northern neighbor) have already executed using W3C principles as a guiding framework. Once web compliance standards are formalized in the U.S. this year, American businesses will be legally accountable for upholding ADA web compliance standards at the risk of incurring fines or lawsuits.

What does indiscriminate accessibility mean in the context of websites?

I'm so glad you asked. The framework the DOJ is currently working from is WCAG 2.1, an updated iteration of W3C's original guide that takes more recent tech developments into account. WCAG 2.0 defined four guiding principles for accessible web design: perceivable, operable, understandable and robust. These four "success criteria" remain the gold standard for assessing a website's accessibility and serve to inform a site's compliance score (A- lowest, AA- middle and AAA- highest).

WCAG 2.1 defines additional web compliance criteria in relation to three main concerns:

1. Low-vision users

2. Users with cognitive or learning disabilities

3. Mobile device web accessibility

What does ADA web compliance look like?

Contrary to what you might assume, upholding WCAG principles doesn't mean supersizing all your fonts and reverting to a 1930s black-and-white color scheme. Many compliance criteria involve backend site elements that don't affect a site's visual aesthetic. Things like image alt tags and HTML semantic tags allow developers to add more contextual information to a site's code so that site readers can accurately translate that data. Image alt tags, for example, serve as coded labels that allow impaired users to understand what image is present on a page, so meaning, context and semantic value isn't lost in translation.

Imagine a screen reader is attempting to translate a photo caption that reads, "Bob pooped on the floor for the fifth time this week." By tagging the attached image's source code with the alt label, "A picture of a dog," developers allow screen readers to convey this information to the user (ex: <img src=“yoursite.com/dog.png” alt=“A picture of a dog”>) to furnish context and lend appropriate tone to the narrative. Semantic tags, like image tags, give screen readers more information to work from in order to accurately translate the web content in question.

A picture of a dog

In HubSpot, the backend source code for the above image looks like this:

HubSpot source code alt tag example2

The compliance standards that require aesthetic site changes are often more subtle and intuitive in nature. WCAG lays out minimum text/background contrast levels to ensure that site content is legible to low-vision and colorblind users. Other aspects of WCAG 2.1 address compliance in terms of specific site features and functions like imbedded videos or overall content navigability. For example, ADA web standards stipulate that all information be accessible via keyboard commands (rather than solely accessible by mouse or touchpad). 

How ADA compliance affects SEO ranking

Like screen readers, search engine algorithms favor websites with a more organized and informed backend structure. In the same way that the alt label “A picture of a dog” will help screen readers communicate context to a low-vision user, it will also help search engines index content and respond to search queries with highly relevant material. In such a way, ensuring that your site is WCAG compliant will also improve your site's search engine compatibility and ranking.

Updating your site for ADA compliance

All new sites should be built with the latest WCAG compliance standards in mind. If you're not sure if your site is up-to-par or are actively looking to update your site for ADA compliance, seek out an agency that understands how compliance criteria have evolved and how those standards vary by nation.

If you'd like help with that last part, you've come to the right place. New Breed has worked with clients from around the globe to build creative and dynamic websites with international compliance standards in mind. We'd love to talk you through our website redesign process — all you've got to do is ask.

For more guidance on key elements you should keep in mind when redesigning your website, check out our 10-step guide below.

New call-to-action

Meryl Kremer

Meryl is a former New Breeder.


Ready to jumpstart your acquisition, retention and expansion efforts?

Request Assessment