What Is ADA Compliance for the Web?

More than 40 million people in the U.S. have a disability that may result in them being barred by technology that does not serve them. As a result, they are less likely to have full access, according to Pew Research. And COVID-19 likely resulted in adding 1.2 million more people with disabilities by the end of 2021.

For business and society, this is a monumental lost opportunity when you consider this population’s combined purchasing and brain power — not to mention the right of dignity for all. The web offers those with disabilities an unprecedented opportunity to communicate and access information that other media does not. Individuals, businesses, and society benefit when everyone can use the web fully.

As the world continues its march to digital, those with auditory, visual, cognitive, or physical differences encounter increased difficulty if apps and websites don’t consider their accessibility. Understanding the practices of web accessibility, and knowing what it is to be in compliance with Americans with Disabilities Act (ADA) accessibility standards, can widen opportunities for businesses to bring in more global prospects.

Contactless shopping was once a first-world convenience; the pandemic made it a necessity. Then there’s food delivery. Users of smartphone apps such as DoorDash jumped an additional 35% in 2021 (this, over the 2020 jump of 25%). Now, issues of accessibility for these digital experiences are coming to a head. A recent U.S. Supreme Court case centered around web-only pizza coupons that could not be used with a screen reader. Web accessibility is potentially about far more than pizza; it’s about everyone’s right to access information and communicate.

“The laws aren’t black-and-white on this, but clearly courts are starting to lean in,” said Fred LeBlanc, a product manager in marketing technology at Salesforce. What businesses can be sure about is the need to continually run audits and apply fixes where necessary. The World Wide Web Consortium (WC3) — a global community that develops principles to ensure the highest quality web standards — offers tools and other resources to complete such an assessment.

So how can developers of new digital experiences ensure their apps and websites are ADA (Americans with Disabilities Act) compliant?

Below is a primer.

What is ADA accessibility?

The Americans with Disabilities Act (ADA) states that all public spaces must provide equal access to all. When drafted 30 years ago, the internet as a “public space” didn’t exist, but several court cases later, virtual spaces also need to be open and welcoming to all. Web accessibility is sometimes abbreviated with the numeronym “a11y” — there are 11 characters between “a” and “y”. It means that all users, regardless of their limitations on sight, hearing, mobility, or cognitive abilities, can use a website or app for its intended purpose.

An accessible digital property does not create a separate pathway for users with disabilities, and it is constructed to work with common assistive technologies that people use to browse, read, and shop. In practice this means that a blind user can use an app with a screen reader; a deaf user could rely on captions on a video; a user with a cognitive disability may benefit from reduced animations to prevent distractions.

Below, is a guide to fix a few of these; you’ll find complete guidance at the Web Accessibility Initiative. Additionally, here’s ADA compliant practices for:

• Headings, subheadings, and eyebrows
• Image markups
• Link text
• Videos
• Color contrast

Which website elements are not commonly accessible? 

Infographics, product carousels, strobing visuals, and animated gifs are notoriously tricky, if not impossible, to design in an accessible way.

Ironically, the early web was largely accessible because it was simple HTML — an equalizer for those with disabilities. 

Who benefits from web accessibility?

Access to the web can be affected for those with auditory, cognitive, neurological, physical, speech, and visual differences. But in truth, accessibility features are a huge benefit to the population beyond those with nontypical abilities.

Much as curb cuts on city streets have made movement easier for people pushing strollers or delivery carts as well as users of wheelchairs, web accessibility improves usability for many others without a disability, including:

• Smartphone users with small screens
• Older individuals with changing abilities
• Temporary disabilities, such as a broken arm or lost reading glasses
• Situational limitations, such as bright light or background noise
• Those with slow internet connections or limited bandwidth

If you’re over 45 years old, or ever plan to be, you’re probably grateful that web browsers allow you to configure font sizes. That’s just one example of the many accessibility features, or universal design elements, in broad use.

How your business can become ADA compliant

If you’re a site manager, business owner, or a11y curious, the most important thing you can do to advance web accessibility is simple — start today. Here’s how:

Identify accessibility issues

“It’s like day one of a diet where you have to step on the scale,” says LeBlanc. Use a tool like SiteImprove to quickly identify all of the areas of your web pages or apps that need improvement. There are other tools — over 150 more — so find one that works best for your use case. It only matters that you use one regularly.

Itemize, prioritize, and fix 

List all the issues in a spreadsheet; include columns to track the status, and add notes. Make sure the list includes everything you’ve documented.

Next, schedule time on your calendar — start with 15-30 minutes — and make sure you can sustain this every day for a period of a month or longer. Then start to fix the smallest issues. This could be as simple as adding alternative text to an image or logo. Don’t forget to retest your site for compliance before you republish it by using your tool of choice again. Repeat this as many times as you can in the allotted time. 

Develop the habit of making incremental updates and you’ll make progress. Full disclosure: it’s a good idea to finish these small items like image alt tags before focusing on the larger, more complex issues like site structure. Remediation for the larger issues may require third-party developers.

Create new, accessible web content

Stop making your site accessibility issues worse today. With that goal in mind, here are some (relatively) easy things you can do.

Revisit your page headings 

Large bold font does not make for an accessible heading on its own. Proper heading markup helps to organize and structure content for those who use screen readers and other assistive technologies. Observe this guidance as you markup headings:

• Mark up the headings with the WYSIWYG toolbar or code with header tags like H1, H2, H3 in HTML 
• Ensure the headings reflect the content hierarchy and do not skip levels
• Set eyebrow text to the same level as the headline (example below)

For example, this article uses both H2 and H3 to organize content. The H2s function as the main subhead topics, and the H3s function as subcategories. Each subcategory supports the level above: H2s support the H1; H3s support or elaborate on the H2s. Here’s an example from our site:

Both the first eyebrow text blocks and the second headline text are marked as H1 in this example.

While the site where you’re reading this doesn’t meet every accessibility requirement (we’re working on this!) the article pages employ proper HTML markup language for eyebrow and heading.

Markup images 

Provide alternative (alt) text for all images that are informative or functional. Images that function as buttons or links require alt text, too.

In many Content Management Systems (CMSs), images that are decorative receive no alt text, or if they do, they receive a null value of alt=””. Other CMSs and site managers may require alt text for all images.

A useful rule of thumb for writing alt text is to ask how you would describe an image to someone sitting next to you.

While that sounds easy enough, in practice there are several nuances authors will need to address:

• Informative images: Describe only what’s in the image; omit terms like “image of” or “photo of” as screen readers will alert users it’s an image.
• Functional images: These function as links, and the alt text should describe the destination of the link. This could be a logo in a page header, a social media icon, or an image used in a button. 
• Captions: May be used as on-page guidance to describe an image. When captions are at play, they should be close to the image to inform screen readers, and the image could receive a shorter than average alt text treatment.
• Decorative images: These are images that provide no informative content on the page, and usually they don’t receive alt text, but it’s important that they include the “alt=””. 

If it’s not exactly clear what a decorative image is, that’s because it is ultimately up to the author to determine if the image relays information or links to another page. W3.org guidance on decorative images notes they are “eye candy” and can be illustrative of the page content, but provide no additional information. 

Write useful link text

Do this and you’ll accomplish two things: help users and augment Search Engine Optimization (SEO). Screen reader users are able to skip from link to link, so we should label links for understanding out of context. In practice, this means “learn more” and “read more” won’t be helpful to these users.

That said, there are several things website authors can do to ensure links are meaningful to all users:

• Use text that describes the destination to provide clarity for users. For example, rather than “Learn more,” a descriptive link for this article might say “Find out what the Becoming Retail series is all about.”
• Use an assistive label, an invisible field just for screen readers, to balance needs like writing short text for responsive (mobile), and providing a description of the destination.
• Use specific, non-generic terms that describe where the user will go if they click the link. For example, instead of “Watch Demo” use “Watch the Sales Cloud Demo.”
• Use unique link text for each link on a page, else it’s confusing to screen reader users who will click and arrive at different destinations.

Full disclosure: the Salesforce website grapples with consistent and useful text on buttons and links before carets. We use the assistive label to provide clarity. 

Configure videos for accessibility

Video players are ubiquitous, but — if video players do not include user controls, transcripts, and captions — they can be a Trojan horse of accessibility issues. 

Accessible video players include all of these elements:

• Captions that describe all the information conveyed by sound such as dialog, speakers, and music
• Transcripts for all meaningful audio content that details information conveyed by sound, such as dialog, speakers, and music
• A pause button to give users control
• A play button so users can activate/reactivate when ready; players should not be set to auto play

If an author has to choose between full accessibility and not having video, forgo the video.

Set proper color contrast

This is the level of contrast between the background and the font on the page. Color contrast affects a wide user base — including those with low vision and color blindness.

Full disclosure: Our site up to October 2020 had insufficient color contrast in the header. See the example below.

In this case, the large, thin font and color contrast of the headline does not have a proper contrast ratio against the light blue background. A redesign restructured the header and eliminates this contrast issue:

The remedy is straightforward — although it can be complicated to fix and apply to all historic pages — to ensure all text has the minimum required contrast against the background. While there are a number of tools to help you to calculate ratios, it’s helpful to know the minimums:

• Text of less than 24px/1.5em, or 19px/1.2em and bold, should have a ratio of at least 4.5:1 with its background
• Text of at least 24px/1.5em, or 19px/1.2em and bold, should have a ratio of at least 3:1 with its background
• Informative icons and charts should have a contrast ratio of at least 3:1 against their background
• Functional icons and buttons should have a contrast ratio of at least 3:1 against their background

Use these color contrast ratios for all graphics, PDFs, and page elements. For a fix like the page headers, which may require developer support, it’s best to itemize and prioritize with other dev work. 

While web accessibility can be cryptic, and compliance can require a significant resource investment, making any of this guidance standard practice is far better than doing nothing. In a digital-first world, ADA compliance and web accessibility may mean the difference between more or fewer customers.