How to Make Your Websites ADA-Compliant?

We designate parking spaces and create raised markings on roads for helping the disabled. Now, we need to make our websites ADA-compliant too. ADA stands for The Americans with Disabilities Act which came into force in Jan, 2018. If your website or blog isn’t fulfilling statutes laid out by ADA, you can be issued a legal notice for non-compliance.

Why Do Websites Need to Be ADA-Compliant?

ADA compliance is a policy regulation for the inclusion of disabled people in all walks of life. The rationale behind the policy is that physically and mentally-compromised people should be able to access and use websites as well as normal people can.

What Will Happen If you’re not ADA-Compliant? Presently, nothing will happen. There have been cases where a link has been taken down after a complaint was filed with the authorities. But nothing drastic has happened as of now.  But what if the page taken down is one of your well-ranked pages? A page you built with years of careful SEO, back linking, and impeccable content? That will pinch quite a bit.

ADA-Compliant

Do You Need to Worry About This?

Not all companies need to pay heed to ADA compliance regulations. But if you’re in a public service domain, or are a government agency, or have 15 employees or more, you need to pay heed to ADA. Another way of determining this is: if your geographical location falls within an ADA-governed area, you will have to make your website compliant too.

Have you received a complaint or explanation notice for violation of ADA? Well, you’re not alone. Only 5-8% of government pages fulfill all the rules of ADA. Still, you need to be on the safe side of law at all times. 

Tips to Make Your Website ADA-Compliant

  • Understand the Web Content Accessibility Guidelines (WCAG)

Here are some of the recommendations mentioned in the WCAG:

  1. All non-text elements have a text alternative, barring some exceptional situations.
  2. All pre-recorded audio and video content has accompanying captions and audio descriptions.
  3. You have provided sign language references for all pre-recorded audio content.
  4. Instructions are not based solely on sensory characteristics such as size, shape, color, orientation, location, etc.
  5. Each and every text input filed can be programmatically determined.
  6. If a web page contains an audio that gets automatically triggered, there is a mechanism to turn it off within 3 seconds.
  7. The contrast ratio of text and images is not less than 4.5:1.
  • Conduct an ADA audit using the WAVE tool

Google Chrome’s WAVE tool is available at http://wave.webaim.org. You can type in your site URL and review the missing headings, descriptions, and other page structure related issues. The results will also show the ADA-related issues on that one page. We got 3 alerts and 0 errors on our homepage’s ADA evaluation.

Wave - ADA

 

  • Image Descriptions Should Be Complete

All the pictures and rich media elements you use in your site should have proper alt tags. Alt tags are used by page readers and players to describe the image to non-sighted users. If your images lack alt tags, they will be ignored by crawlers once Google starts penalizing sites for ADA-non compliance.

  • Design Your Site for All Users

If your site has illegible fonts or color contrast issues, it will not be of any use to handicap visitors. Similarly, CTAs, buttons, and links should be conspicuous and boldly displayed. Your page style and architecture should be so natural and intuitive that users of all levels can access information easily and painlessly.

Here are examples of good and bad ADA-optimized content:

ADA Example 1

ADA Example 2

  • Follow Copywriting Best Practices

Include white space in your web content judiciously. Write conversational content that is easy to read and digest. Break up large walls of text into small sentences and paragraphs. Organize page content using logical headings and sub-headings. For acronyms like USA, use a period between letters so that screen readers pronounce them correctly. These best practices will not only help your handicap customers but also delight your regular website visitors.

  • Check Your Site’ s Code

It’s always better to hire a professional site developer and designer look through your website’s HTML and CSS to make sure that there are no lacunas. Outdated content needs to be disposed and clean coding practices should be deployed.

ADA Compliance Checklist

We understand you’re busy growing your business yet want to be abreast with ADA regulations. Below, we have compiled a comprehensive checklist with the major points you need to cover in your website.

Data Point Yes No
All the images, audio/video files, plugins have alt tags?
Text descriptions accompany all complex graphics?
The alt descriptions specify the object’s purpose?
Blank alt tags are attached to graphics that are not clickable?
If an image is also a link, does the alt tag describe the link and graphics destination?
All videos have audio descriptions and captions?
All videos come with text transcripts? Is there a separate link to the transcript?
Are the videos embedded as web objects or present as links?
Tables have tags for identifying the row and column headers?
Layout tables don’t have row and column tags and headers?
No flashing images on pages?
Label tags are used for form controls that are text fields?
Are form fields in a logical tab order?
All plugins and applets in a page are available for assistive tools?
Is there a button for skipping navigation for people who are using screen readers?

Conclusion

There is one last point you need to understand. Making your website ADA-compliant is not a one-off effort. Rather, it is an always-on requirement that you’ll have to adhere as and when you add more content and link to other pages on the web.

Did you find this article helpful? Let us know your feedback in the comments below.

To know more about iView Labs, kindly log on to our website www.iviewlabs.com and to get in touch with us with your queries and needs just write us an email on  and .

Download the latest portfolio to see our work.

Leave a Reply

Your email address will not be published. Required fields are marked *