Facebook Pixel

Common Website Accessibility & ADA Compliance Mistakes to Avoid

by | August 5, 2021

Headshot of Patrick
A label announcing top five with a bullhorn highlights the most common ADA compliance mistakes made by website developers.
Where do you start when you’re looking to optimize your business website’s accessibility? What’re the most important dos and don’ts?

We’ve narrowed it down to a top-five list of website accessibility standards that are commonly missing on even the most ADA-compliant websites.

We based our list on ADA audits conducted by Capitol Tech Solutions and the World Wide Web Consortium (W3C), the organization that publishes webpage guidelines so the internet can better serve people with disabilities.

A recap on the Web Content Accessibility Guidelines & ADA Compliance

The Web Content Accessibility Guidelines, WCAG, are a set of success criteria for testing how user-friendly your website is for people with disabilities. There are a few different iterations, with the most common being WCAG 2.0 AA and WCAG 2.1 AA. The former has 38 success criteria, and the latter has 50.

Federal and California state law requires government websites to comply with WCAG 2.1 AA, but the U.S. Department of Justice gives business websites a bit more leeway. Most private-sector webpages use WCAG 2.0 AA for ADA compliance.

In a separate blog, we explain WCAG best practices and the success criteria of WCAG 2.1.

Ensuring your business website meets these web accessibility standards will allow users with disabilities to have equal access online while using assistive technology. And having an accessible website will save you from a costly lawsuit.

Remember, businesses fall under Title III of the ADA, guaranteeing places of public accommodation provide equitable services.

We break down the importance of website accessibility and the potential legal repercussions you could face here.

Our certified web developers are experts in WCAG and ADA compliance. Contact us today for an ADA audit of your website.

Contact Us

Our Top Five ADA Website Compliance Mistakes

1. Missing or poor alternative text on images

People with eyesight-related disabilities rely heavily on screen readers to dictate webpages to them.

A common feature on webpages is an accompanying picture, just like on this blog post. Assistive technology cannot yet scan and describe images to users, so web developers (like those here at CTS) add alternative descriptions, also known as alt text.

When writing alt text, you have to keep in mind the context and character count. The optimal character count to ensure screen readers correctly relay an alt text should be fewer than 125 characters. Basically, as long as the previous sentence, which came in at 118 characters.

The context you fit into the restrictive character count is the most crucial aspect of this digital accessibility rule. To write a successful and inclusive alt text, you should:

  • Be specific in your description. Start with the subject or setting.
  • Add context based on the topic of the webpage. This blog is about ADA compliance, and our alt text reflects that.
  • Don’t start a description with “picture of” or anything similar. Assistive technologies will be able to determine a picture based on the website’s HTML coding.

2. Insufficient Color Contrast

Font and background color combinations with low contrast can be problems for people with low vision or color blindness.

WCAG 2.0 Level AA requires a contrast ratio of 4.5 to 1 for standard text and 3 to 1 for large text (14 point font, bold or larger).

You might be wondering what precisely a contrast ratio is. Well, when used for ADA compliance, it means the brightness of a completely white image is 4.5 times brighter than a completely black image (or three times brighter for large, bold text).

Text included in your logo is one of the few exceptions to this rule.

3. Keyboard Access

Users with motor or visual impairments opt for keyboard navigation to browse websites.

A quick way to check if your website’s architecture supports keyboard-only use is to tap the tab key while on your website. If the content is surrounded by a visible outline, like the blue box on our website, then you’ve passed. The visual indication informs users of their location on the page.

Often, website creators disable the default indicator for design esthetics. You should avoid doing this or rectify this soon after discovery. Keyboard focus should be visible and follow a logical order through the webpage to comply with ADA standards.

4. Meaningful Link Text

One of the first things people who use a screen reader do is pull up a list of links and navigate through that list. With that in mind, link text should be able to stand alone, independent of its context.

Descriptive and meaningful links help users choose which links they want to follow easily. Pages with links should provide enough detail that allows for a cursory understanding of what content to expect while they search your site.

You can design ambiguous links like “Click here” or “Read more” to include a summary of the pages they lead to.

Also, speech recognition users can click links with a voice command like “click” followed by the link text. So, it’s helpful to keep link text short and easy to say.

5. Landmark Roles

People with normal vision can quickly review a webpage or document and find the content they’re interested in, and if these users can click a mouse, they can click on a link or other control on the page.

But for users with disabilities, who primarily use keyboards, screen readers, and other assistive technologies, developers need to use landmarks representing a block of content.

Accessible Rich Internet Applications (ARIA) allow rich, interactive user interfaces to be more accessible.

There are eight of these roles, each representing a block of content commonly on webpages. To use them, add a relevant role attribute to an appropriate container within your HTML. Then, users with assistive technologies can quickly jump to that section of the page.

The eight ARIA landmark roles are:

  • role=”banner”
  • role=”navigation” (such as a menu)
  • role=”main” (the main content of the page)
  • role=”complementary” (such as a sidebar)
  • role=”contentinfo” (meta data about the page like a copyright statement)
  • role=”search”
  • role=”form”
  • role=”application” (a web application with its own keyboard interface)

Take the first step toward ADA compliance by contacting our ADA & WCAG experts.

Contact Us

CTS Celebrates 31st Anniversary of Americans with Disabilities Act

Capitol Tech Solutions marked the 31st anniversary of the Americans with Disabilities Act with a month-long web content campaign promoting ADA website compliance.

Leading up to the July 26 anniversary date, we published comprehensive reports on the importance of equitable web browsing for the business and government communities.

“Digital accessibility has become increasingly important as technology continues to advance,” said Capitol Tech Solutions’ CEO Bobby Reed. “I’m proud of the work we’ve done to make the websites of our government and business clients more inclusive for everyone.”

Signed into law by President George H.W. Bush in 1990, the Americans with Disabilities Act prohibits discrimination based on disabilities and guarantees equitable treatment in public accommodation, employment, transportation, and community living.

The U.S. Department of Justice, federal and state court cases have expanded the meaning of public accommodation to include government and business websites.

People with disabilities interact with websites through assistive technologies, such as screen readers, alternative keyboards or switches, braille and refreshable braille, screen magnifiers, sound notification, scanning software, voice recognition, and more.

The User Experience Team at Capitol Tech Solutions ensures the company’s web clients meet ADA website compliance standards.

Through the Section 508 Amendment to the Rehabilitation Act of 1973, the federal government requires all national electronic information to be accessible to people with disabilities. This mandate extends to existing or new government websites and uses WCAG as the standard.

Contact Our Team

Don’t know where to start or can’t find the local talent you need to launch your new digital endeavor? Let our team of experienced professionals help you map out your next project or fix an existing one.

    Related Articles

    Pin It on Pinterest

    Share This