What is a Website that is ADA and WCAG Compliant?

What is ADA (American with Disabilities Act)?

The American with Disabilities Act (ADA) became a law on July 1990. The ADA established that discrimination is prohibited against individuals with disabilities in all aspects of “public accommodation”, including jobs, schools, transportation, and etc. The aim of the act is to ensure that everyone have the equal rights and privileges.

The ADA's passing brought a new legal cottage industry that used the judicial system to keep companies liable for complaints and lawsuits. Many of these legal acts were legitimate. Some were only used by lawyers to make easy money. In the US today, cases like this have been increasing, as more and more people claim that websites and mobile apps violate ADA.

Although ADA was passed in 1990, which was before the internet, it was intentionally designed to evolve. As technology advances, the meaning of the notion “public accommodation”, also expands. In 2010, the U.S DOJ passed the American with Disabilities Act Standards for Accessible Design, mandating all information technology and electronics, like websites and mobile apps, be accessible to individuals with disabilities like vision and hearing impairment. Websites and mobile apps are now essential public places to shop, share, learn, enjoy and connect, and therefore is protected by the ADA.

What kinds of business are required to comply with the ADA?

These businesses are required to comply:

• Businesses with atleast 15 and up employees that operates for 20 or more weeks every year.

• Compliance is also required for businesses which fall under "public accommodation". This includes physical and digital accommodations. Examples are hotels, restaurants, public transportation, and etc.

If you disagree that you are compliant, but your business falls under the two above, then consult with a disability lawyer to know your options.

What is WCAG Compliance?

The  Web Content Accessibility Guidelines (WCAG) is World Wide Web Consortium’s (W3C) recommended guidelines for the web. They are not federal laws or legal requirements.

ADA doesn’t offer a set of guidelines for the web, but the WCAG does.

The WCAG has four principles:

• Perceivable

• Operable

• Understandable

• Robust

1. Perceivable: Elements of the Information and user interface must be presentable to users in ways they can perceive.

   • Provide alt text for for non-text contents.

   • This implies that users have to be able to interpret the provided information (it may not be invisible to all their senses)

   • Create material that can be viewed numerous ways without losing sense in, including by assistive technologies.

   • Make it easy for consumers to see content and hear it.

2. Operable: UI components and navigation of the user interface must be easy to operable. This implies that the interface must be operable by users (the interface cannot require interaction that a user cannot perform).

   • Make all features accessible from a keyboard.

   • Giving users enough time to read content and use it.

   • Do not use content that causes seizures.

   • Help users easily navigate through contents.

3. Understandable: The user interfaces’ information and content must be easy to understand. Make the content predictable and readable.

   • Make text readable and comprehensible.

   • Having content appear and work in predictable ways.

   • Help users prevent and correct errors.

4. Robust: Content needs to be versatile/robust enough that a wide range of devices and platforms can view it reliably.

   • Maximize compatibility with current and future user tools.

Meeting these requirements increases the website's accessibility to people with visual or hearing disabilities, or those with cognitive, language, or intellectual difficulties.

Parts that are crucial for Website Accessibility

• Navigation links, active/focus state.

• Electronic Forms.

• Sliders, Images, gallery.

• Video and audio.

• Tables and iframes.

• Maps, graphs, infographics.

• Text fonts, sizes, and color contrasts.

• Page structure and organization.

How to develop an accessible website?

Basic guidelines on accessibility begin with the visual user interface. Typically, these are the simplest to address first. It is necessary to always test any new change in design and continue to educate yourself about WCAG updates.

A good place to start is with the following WCAG2.1 recommendations:

1. Use of Color

   • Avoid color as the only alert message. For example, forms that state “Required fields in red” need an alternate way to show a required or incorrect field for people who are color-blind or those who use a screen reader.

   • Test foreground and background colors to see if they can pass tests for color contrast. There are many free apps and websites available that help you select suitable contrasting color palettes.

   • Avoid light gray color for text.

   • For buttons, the text inside must contrast against the background color.

2. Links

   • Color must not be only way to determine links.

   • The text of the link must explain the link's purpose. (Don't ever use 'Click here.')

   • To allow keyboard users to navigate directly to the main content, Skip Links should be provided. The skip to the navigation connection is related to this.

   • Remember that there is no hover state for mobile devices. Touch screens do not either.

3. Content Structure and Semantics

   • A title is required on every page.

   • The first heading should always be an H1.

   • Do not skip the hierarchical level of the heading tags.

   • The size of the text must be easy to read and see. The text of the navigation link is now typically 16-18px and 14-16px for regular paragraphs.

   • Contents should be left aligned other than the header section. This is for with poor eyesight, and the way we read (left to right). It is possible to center or left align headings and subheadings.

   • Breadcrumb navigation should also be left-aligned.

   • Make fonts responsive, so they can be magnified on mobile devices.

4. Images and Media

   • Put alt text on all images.

   • When a connection would take users off-site, it is considered a courtesy to alert both visual and non-visual users.

   • The alt text should have no more than 250 characters and be concise.

   • Using images as text should be avoided.

   • Provide a way to pause, stop, or hide media content that is automatically played.

Businesses will get ahead of the regulatory curve in creating a compliant website and preventing future litigation by making a enough effort to ensure fair accessibility for users with disabilities. In addition, designing a compliant website can lead to more sales and better ranking on search engines.

Consult with a disability attorney to find out more about ADA website enforcement and how you can protect your business.