Common Website Accessibility & ADA Compliance Mistakes to Avoid

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

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 Top Five ADA Website Compliance Mistakes

1. Missing or poor alternative text on images

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

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

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

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

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)

CTS Celebrates 31st Anniversary of Americans with Disabilities Act

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.

Related Articles