ADA or Americans with Disabilities Act is a civil rights law that was passed by George H.W Bush administration in the 1990s. It prohibits discrimination against individuals with disabilities. This act applies to all sectors, such as transport, jobs, schools, commercial establishments, and all government/private places that are open to the public.

What is ADA Compliance for Web Design?

In the year 2010, the scope of ADA was expanded by the US Department of Justice through ADA Standards for Accessible Design. It mandates all electronic and information technology (such as websites) to be accessible to those with disabilities.

However, there are no precise technical requirements for ADA compliance yet, but that does not mean websites are off the hook. They must still prove to be accessible enough to accommodate users with disabilities, which leads us to our next question.

What are the liabilities if you fail to comply with ADA?

In case your website fails to comply with ADA, you end up losing potential customers as you automatically fail to provide accessibility to users with disabilities. Apart from this, you may also have to face regulatory consequences such as lawsuits.

The ADA does not offer any clear guidelines for website compliance, so how do we create an accessible website? By meeting the WCAG recommendations.

Web Content Accessibility Guidelines or WCAG is not a legal requirement, rather a point of reference for brands and organizations looking to enhance their digital accessibility

Versions:

WCAG 1.0 (replaced by 2.0)

WCAG 2.0 (replaced 1.0)

WCAG 2.1 (extended version of 2.0)

Levels:

A – has low levels of accessibility.

AA – meets accessibility requirements.

AAA – exceeds accessibility requirements.

Perceivable: Present your content in a perceivable manner. For example, using Alt text and closed captions.

Operable: Users with disabilities should be able to navigate easily through your website. For example, offer keyboard accessibility.

Understandable: The content on your website must be easy to understand.

Robust: You should be able to interpret your website's content across various devices and platforms.

Vision Impairment or Hearing Loss: Nearly 2.2 billion people are vision-impaired around the globe, and nearly 466 million people suffer from hearing loss. Make use of magnifications, appropriate brightness settings, transcriptions, and closed captions.

Cognition & Learning Difficulties: Factors such as different levels of education, age, dyslexia, ADHD, etc. can make it difficult to process and recall large amounts of information. Create uncomplicated web pages and remove automated videos to make your website easy to access.

Temporary Anxiety, Emotional and Behavioral Disabilities: Help your users perceive the information on your website. Choose an appropriate sentence structure, white spacing, and page layout.

Permanent/Temporary Disabilities or/and Injuries: Not everybody uses a mouse or a pointer or touch screen to navigate. You can provide alternative and inclusive web access by using options such as audible software and keyboard tab navigation.

• Navigation, links, and focus state.
• Forms and digitally signed forms.
• Images, galleries, and sliders.
• Video, podcasts, and audio.
• Tables and iframes.

• Maps, infographics, and illustrative graphs.
• Text layout, fonts, distractions, and color contrasts.
• Page structure and organization.
• PDFs, Docs, and PowerPoints.

Utilization of Colors

• Do not rely only on colors- For example, when indicating "Required Fields" in online forms, try an alternative way to convey a required field for people who do not see red or use a screen reader tool.
• Maintain a contrast ratio of 4:5:1 for small text and 3:1 for large text against their background.
• Subject foreground and background colors to see if they pass the color contrast test. There are several free websites and apps available online.
• Always avoid light grey for text.
• The text color of buttons must contrast against the background color.

Links

• Do not make colors the only way to determine links unless the surrounding text size is at least 3:1. Provide underline, outlines, and such when the link is hovered or receives focus.
• Your design should easily distinguish link text from non-link text.
• The link text must describe the purpose of the link.
• Use ARIA aria-labelled by to associate link purpose. See Using aria-labeled by for link purpose.
• Provide skip links for navigation so that keyboard users can navigate directly to the main content.
• Always keep in mind that mobile devices and touch screens do not have a hover state.

Screen Reader Reminders

• A properly coded link will be automatically announced as a link in screen readers.
• The best method is to make sure all links make sense out of context.
• A properly coded button will be announced as a button in screen readers.
• Skip links help screen reader users directly jump over the navigation menu to the main content each time a new page loads, else the page will be read from the top all over again.
• Forms should include buttons to be activated on screen readers.

Content Structure and Semantics

• Every page should have a title.
• The first heading should be an H1.
• Avoid skipping hierarchical levels by using consecutive headings.
• Use HTML5 landmarks and ARIA equivalents to designate content areas.
• The source page of an inline frame (iframe) must have a valid, and meaningful