This post originally appeared on the Pyxl Blog.

According to the United States Census Bureau, 56.7 million Americans have some type of disability. As the population ages, this number will continue to increase and is expected to double to 98 million by 2060. Individuals who have vision, hearing or physical disabilities will make up approximately 20 percent of the population and will encounter significant challenges accessing websites, applications and documents online.

With the passage of the Americans with Disabilities Act (ADA), we have made great strides to fill the gap between access and those seeking information. However, there is still a lot of work to be done to help people with disabilities access the web. As website developers, we are stewards driving this change. It’s easier said than done, but there is a lot information passed over the web that everybody should have access to.

In the meantime, ADA regulation and similar initiatives will become increasingly important over the next few years. It’s time for all developers to take on the challenge of web accessibility.  

What does ADA compliance mean?

So what does this all mean? ADA compliance is about making elements of your websites and apps accessible to everyone. For those of us designing and developing websites, it is much easier to develop a website with ADA compliance in mind rather than incorporate these elements after the fact.

The Technical Details of Accessibility

When developing ADA-compliant websites, it’s important to know how screen readers scan websites. Like the human eye, they start at the top and work their way down the page, reading each element of a website and the associated content via tag.

For this reason, skip links are important for ADA compliance because the first thing on a web page is usually not the main content. Incorporating skip links as one of the first items on your website allow a user to bypass the navigation when using a screen reader and jump right into the bulk of the website content.

Screen readers and individuals with vision disabilities cannot analyze an image or determine what the image represents. So, when it comes to developing a website, we must recognize the importance of page title tags (the <title> element in HTML). There are several “must have” elements to help web accessibility such as headings (the <h1> and subsequent levels), and the alternative text of images (within alt tag of the img element) to help a user understand the context of an image. Not only is it SEO best practice for every image to have an alt tag, it is imperative for compliance as images without an alt tag are likely inaccessible.  

Here are a few tips to help with compliance:

• Webpage links should make sense when read aloud and place distinguishing information first.
• Always organize content pages with the appropriate headings
• Define landmark roles and use HTML 5 elements (<main>, <nav>, <header>, etc.) appropriately.
• When using dynamic content, use appropriate values (aria-live=”off” or aria-live) to tell the screen reader how to announce the update.

Three Levels of ADA Compliance

According to the Web Content Accessibility Guidelines (WCAG), website accessibility is categorized into three conformance levels—“A”, “AA” and “AAA”. The higher the level, the better your website meets or satisfies the requirements and allows for greater accessibility to users.

In order for your website to conform to WCAG guidelines, the following requirements must be satisfied:

• Level A (criterion 1.4.1) – is about the Use of Color. The rule goes like this: Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.
• Level AA (criterion 1.4.3) –  is about Contrast (minimum), in addition to satisfying all Level A criterion. The contrast rule goes like this: The visual presentation of text and images of text has a contrast ratio of at least 4.5:1., except the following:
• Level AAA (criterion 1.4.6) – is about Contrast (enhanced), in addition to satisfying all the Level A and Level AA requirements. The co rule goes like this: The visual presentation of text and images of text has a contrast ratio of at least 7:1.

The WCAG notes that, “It is not recommended that Level AAA conformance be required as a general policy for entire sites because it is not possible to satisfy all Level AAA Success Criteria for some content.”

For more in-depth analysis, you can read more about  website conformance Requirements here.

Is Your Website ADA-Compliant?

Compliance is something that needs to be taken into account from the start of a website build. It can be added to a website, but it is a difficult process to add retroactively. The best way to ensure your website is ADA-compliant is to work with a digital agency that has in-depth knowledge of ADA compliance rules and best practices. There are a number of paid and free testing tools online, however the results can vary dramatically and are less accurate. If you prefer to develop your website yourself, there is a checklist provided by the U.S. Department of Health and Human Services to gauge accessibility.

Businesses should consider ADA compliance as much of a necessity as having a responsive design. The focus on compliance will only increase with time and as a business owner, you want to ensure your customers have equal access to your services and resources. By taking compliance seriously on the front end, you can thwart a potential lawsuit, plus it’s just the right thing to do.