Building or maintaining an ADA compliant website can help you provide the needed accommodations for your potential customers and avoid lawsuits. Here is what you need to know.
What is the ADA?
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.
What is WCAG?
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
WCAG can put you on the right path towards ADA compliance.
WCAG has three versions and levels, as mentioned below.
WCAG 1.0 (replaced by 2.0)
WCAG 2.0 (replaced 1.0)
WCAG 2.1 (extended version of 2.0)
A – has low levels of accessibility.
AA – meets accessibility requirements.
AAA – exceeds accessibility requirements.
According to the WCAG 2.1 guidelines, your website must be:
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.
If you follow WCAG guidelines to at least level AA, your website should be easily compliant with ADA.
How to develop an ADA compliant website & Whom will it help??
A website that is ADA compliant will be helpful for people with:
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.
Checklist for elements that are crucial for website accessibility:
- 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.
Website Accessibility designs are never finished. However, WCAG 2.1 has the following recommendations to make.
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.
- 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 <title>.
- The text size must be easy to see and readable. The navigation link text is usually 6 – 18px and the regular content is 14 – 16px.
- All content should be left-aligned. However, headings and subheadings can be centered or left-aligned. This helps users with dyslexia and poor eyesight. Also, it is the way we read (left to right).
Images and Media
- All images must have alt text.
- Images should describe the link destination for screen readers.
- Have the courtesy to warn both visual and non-visual users when a link will take them off-site.
- Alt text should be concise and less than 250 characters. Never use – an image of – graphic of – or picture of – in the alt description.
- Add alt text to images that are inside Word and PDF documents.
- For example, use alt=””, ARIA role=”presentation” or implement a CSS background for images that are decorative, or redundant to content.
- Avoid using images as text.
- Videos must be closed captioned.
- Videos must be presented with a transcribed dialog, and narration, along with other meaningful sounds.
- Podcasts must provide a transcript.
- Provide an option to pause, stop, or hide automatically playing media content.
Keyboard Tab Navigation and Accessible Documents
- Keyboard navigation is used when there is no mouse or a pointer device. Links should contain focus states and follow the reading order of the Document Object Model (DOM).
- Every time you press the Tab key, you should move to a link with a focus state such as a border or border with a background color.
- Files such as PDF documents, PowerPoint, and Word documents must be accessible.
- When creating documents, search for how to save as accessible documents in settings.
Is it worth the efforts?
Making your website accessible is rewarding and valued. It prevents a lot of potential customers from leaving your website due to poor accessibility. It also safeguards your website from legal ramifications. If your website caters to the general public, ADA compliance becomes all the more necessary.