Guide To ADA Compliance For Websites In 2022ADA website compliance requirements are updated on a yearly basis, does your website still pass compliance standards?
Dating back to the early 2000’s, businesses have been utilizing the power of websites to disseminate information about their products and services to current and potential customers. In fact, 71% of all small businesses had a company website in 2021. Despite all of the success a business can attain from having a website, many businesses overlook the need to include important accessibility options to differently abled users, which could result in a variety of costly fines and potential legal repercussions.
The Americans with Disabilities Act (ADA) was enacted in 1990, prohibiting the discrimination of differently abled individuals, which extends into website accessibility and usability. In order for businesses to be considered ADA compliant in 2022, their websites must include features and options for users who are physically, visually or hearing impaired. Our 2022 ADA website compliance checklist will help businesses ensure their website meets the criteria needed to meet ADA compliance requirements in 2022.
Key Considerations For Website ADA Compliance In 2022
Each year many accessibility options and features have remained unchanged in terms of website requirements. However, the yearly changes or additions to ADA website compliance requirements can result in websites failing ADA compliance checks.
Compliance For The Visually Impaired
Ensuring a website is accessible for individuals who are visually impaired is critically important to meeting ADA compliance requirements in 2022. These requirements include actions that can be taken via a keyboard, features which function easily with screen readers, and more.
Ensuring Website Colors & Elements Contrast Well
Although your dark blue button with black colored text “get in contact” button might look cool, it is highly unlikely it would pass an ADA website compliance check. Although it’s impossible to list all possible color combinations and the pass/fail probability, displaying a background color and text color contrast ratio of 4.5:1 can almost ensure your website color contrast ADA requirement is met.
Provide Alternative Text For Images
For those that are SEO savvy, alternative text is a nice way to optimize your page for the specific keywords you are trying to rank for. However, the purpose of alternative text is to provide visually impaired users with a detailed description of an image through the use of a screen reader. Alternative text is also displayed when an image fails to load on the page or if the user has elected not to view images.
Here are a few tips to follow in order to create an acceptable alternative text for an image:
- Be as specific and as concise as possible
- Stick to 125 characters or under, screen readers may not read alt text over the 125 character limit
- Avoid assuming the scenario of the image, describe the still frame instead
- Don’t use “image of” or “picture of”, screen readers will inform the user that it’s an image
- If there’s text displayed in the image, also include the text within the alt text
Alt Text Example
Bad: “Picture of Orases CEO, Nick Damoulakis, in full KISS makeup and costume, pretending to play a guitar, posing with his tongue out. Perhaps he’s considering a mid-life career change?”
Bad: “Nick Damoulakis, nicholas damoulakis, orases, custom software, custom software firm, CEO, chief executive officer”
Okay: “Orases CEO Nick Damoulakis”
Good: “Orases CEO Nick Damoulakis strikes a Gene-Simmons-style pose in full KISS makeup”
Make Sure Links Have Descriptive Anchor Text
Adding a descriptive anchor text is not only a requirement for ADA website compliance standards in 2022, but is also useful for users that are not visually impaired, providing them with information on what the link contains prior to clicking on it (which can improve engagement and conversions). But in terms of ADA website compliance, descriptive anchor text provides users who use text to speech or screen readers important information about the contents of the link within the content.
Anchor Text Examples
Compliance For The Hearing Impaired
According to ADA Site Compliance, around 466 million people (15% of the population) suffers from some degree of hearing impairment. So out of every 100 users who visit your website, at least 15 of those users are unable to fully access or navigate your website without special accommodations.
Provide Transcriptions & Captions For Audio Content
For businesses which utilize videos or podcasts to disseminate content, ADA compliance requires videos to include accurate subtitles or captions. Alternatively, businesses can upload written transcripts of videos or sign language videos. The latter option may not be the most user-friendly, so including subtitles and captions for videos is the recommended option.
Video Content Captions Example
Videos do not automatically show captions, users must click the “CC” button to view video captions/subtitles
Review Your Website’s Content & HTML Structure
When thinking about the structure of website content, imagine trying to read a book without chapters describing the content in the coming pages. Now picture the chapter-less book inserting pages randomly and without any warning or preface of content change. That is what it is like for users trying to navigate through a website which does not have their content structured with proper headers and HTML markup.
In order to pass an ADA compliance check, headers should be displayed under these set parameters:
An H1 tag on a webpage can be compared to the title of a book. There is only one title of a book, therefore there should only be one H1 on any given page.
Similar to the H1 tag, H2 tags can be compared to individual chapters in a book. There can be multiple H2 tags on a given page, but the H2 tag should provide an overview of the next few paragraphs beneath it.
H3 tags should act as sub categories to the H2 tag that proceeds it. These tags break the content into sections within an H2 tag, typically giving users a more specific description of the content which proceeds it.
H4 & H5 Tags
These should only be used to provide very specific descriptions of content within the overarching H2 section.
*It is important to note that there is a hierarchical structure to header tags, meaning H3 tags should not be placed before H2 tags, H4 tags before H3 tags, etc.
Section 508 Requirements
In addition to meeting ADA website compliance requirements, federal government websites must also meet Section 508 requirements. Section 508 also requires all federal government websites to be accessible for differently abled users, with more specific requirements than ADA requirements.
WCAG Compliance Guidelines
Web Content Accessibility Guidelines or WCAG, outlines how websites can make their content increasingly more accessible to those with disabilities. There are 3 levels of WCAG, each level becoming progressively harder to meet.
Useful Tools To Check Your Website’s ADA Compliance Status
Given all the information above, it may sound like a tedious and stressful process when determining whether or not your website currently meets ADA website compliance requirements. Fortunately there are tools available to help with the auditing process.
Web Accessibility Evaluation Tool (WAVE)
Google Lighthouse Accessibility Evaluation Tool
These audits also provide suggestions on how to improve their web pages score.
Accessible Colors Contrast Checker
Ensure Your Website Is ADA Compliant With Orases Today
Here at Orases, we have years of experience not only improving websites to meet ADA compliance standards, but developing websites that are fully compliant from the start. Reach out to our experienced team of custom software developers today by calling 301.756.5527 or by scheduling a consultation online.