How to Have an ADA Compliant Website

A website that complies with the Americans with Disabilities Act (ADA) is more than meets the eye—literally. In order to know if a website is ADA compliant, it’s important to understand what an ADA compliant website actually is. A website that claims ADA compliance is a website that has a structure and content that follows ADA guidelines for accessible websites. An ADA compliant website does not discriminate based on user ability. Rather, it provides full and equal access to everyone. Claiming that a website is ADA compliant means it is in compliance with the law.

Although asking whether your website is ADA compliant is a great place to start, the real question should be: Is my website accessible? An accessible website is a website that ensures all of the content is available to everyone, including those with disabilities. In order for a website to be deemed accessible, it means the code behind the website is semantically correct allowing content to be presented to various technologies, such as screen readers.   

Typically, a business owner will ask if their website is ADA compliant and a developer will ask if the website is accessible. Answering yes to both of these questions is a positive way of saying that your business prioritizes it’s customers. Asking if a website is accessible rather than if it’s ADA compliant highlights the main goal and importance of the ADA. This is because the ADA is a legal requirement and referencing it often leads thoughts to negative situations such as lawsuits. This is a pessimistic way of thinking and needs to stop. 

We view the ADA with optimism. It provides the landscape for inclusiveness. Desiring to comply with the ADA at all times is a strong approach to equality. Not only does it minimize legal risk, it shows everyone that your business maintains the highest of standards. 

How do I know if my website is accessible?

Now that you’ve asked the right question, we will help you understand how to know if your website is accessible to everyone. The only way to know if your website is accessible (and ADA compliant) is to perform web accessibility testing. In order to completely test your website for accessibility, you need to fill your toolbelt, and we recommend starting with these three things:

1. Users with various abilities
   A blind screen reader user is a good example of someone you should include in your web accessibility testing. For example, you can ask a blind screen reader user to find content in a data table and evaluate link descriptions. 
2. Seasoned accessibility experts
   Your accessibility expert should have experience testing a variety of websites, including websites in your industry. They should be able to provide feedback and consultation to help you remove accessibility barriers found during testing. Since complying with the Web Content Accessibility Guidelines (WCAG) is the best measure available today for testing web accessibility, your accessibility expert must know and understand how to test for and implement the success criteria defined in the guidelines.
3. Automated testing tools
   Automated testing tools are very useful, but be sure to understand why automated testing is not enough.

As you work to fill your toolbelt, you can perform the web accessibility easy checks we list below to help you get started. These checks will give you an idea of how much help you need as well as the level of risk your business is currently facing for not having an accessible and ADA compliant website.

Test keyboard navigation

Start at the top of your website and use the TAB button on your keyboard to tab through the links. With each tap of the TAB button, you should be able to see where your focus is. Tab through the following examples to see accessible keyboard navigation options. Notice that these examples are all applied with simple CSS rules.

• Remove underline to show keyboard focus:
  When this underlined link to our Accessibility Services page is focused on, the underline is removed.


• Add an outline to show keyboard focus:
  When this bolded link to our Free Resources page is focused on, there is a dashed outline that appears. Also, notice that although the bolded link is not underlined, it does have enough contrast against the surrounding text to help distinguish it as a link.


• Show a link state change such as size:
  When the following linked Facebook icon is focused on, the size of the icon increases.
  

Browsers typically have default outline focus styles. Depending on the color used for the outline, it may not always pass color contrast ratio requirements so if you want to rely on the default focus styles provided by browsers, we recommend testing the focus styles in all browsers to ensure there is enough color contrast. 

If you do not see where your keyboard is focused, you have just found your first accessibility barrier. Oftentimes, fixing keyboard accessibility issues helps other accessibility problems such as color contrast and accessible links so this is a great place to start with your web accessibility remediation process.

How web accessibility benefits business owners

If you are a business owner, you may be familiar with the term bounce rate. The bounce rate of a website is the version of a metric that measures the rate of how long users stay on a website. Unlike conversion rates that we want to be high, our goal is to have a lower bounce rate. Following the web accessibility guidelines can significantly contribute to reducing this rate. The lower the bounce rate, the better, because it means people are staying on the website longer. This is often adhered to within various web entities and is incorporated within their policies pertaining to user retention.

On the contrary, a higher bounce rate indicates a poorly constructed site version, particularly if it fails to meet web accessibility standards. A website that ignores the importance of accessibility and lacks necessary elements would fit this description perfectly. Elements of a poorly constructed site include things like non-responsive design, lack of color contrast, and missing form labels.

Our primary aim is to keep people on our website longer so that they discover more reasons why they should choose us over our competitors. A study found that a staggering 71% of disabled web users will leave a website version that does not fulfill accessibility requirements. This is a large enough percentage to significantly impact the overall bounce rate. Hence, all business entities must incorporate accessibility requirements into their policies to avoid a potential loss of customers.

How web accessibility benefits developers and Google

If your web developer argues that web accessibility does not benefit them, then it may be time to seek services elsewhere. The value of web accessibility for developers, especially in today’s digital version of the age, is undeniable. Developers take pride in crafting high-quality websites and understand that cleaner code paves the way for a faster and more proficient website. If a website’s load time is slow or it fails to rank high in search results, the development team is usually held accountable. HTML elements (code) have semantic meaning, and web entities optimize their website’s accessibility and performance by using code as intended.

Apart from reducing bugs and enhancing loading speed, semantic code also aids search engines such as Google and Bing in indexing the content, thus facilitating higher search rankings. Let’s imagine a webpage version constructed to compare web development platforms like WordPress and Shopify and how its organization of content using heads and visual elements can increase its potential visibility.

Check for page language

Each page of your website must have a language declared in the HTML tag of the page. Declaring the language allows screen readers to read the test using a proper accent and correct punctuation. Although most automated web accessibility scan tools will test for this attribute, we recommend manually confirming it’s present.

The easiest way to check for the language attribute in the HTML tag is to view the page in question and press Ctrl + U. Before you get alarmed at all of the code you now see, know that you only need to look at the first line. Look for the first instance of HTML and verify there is a language attribute (lang) present. It will look something similar to this:

<html lang=”en”>

This example states that the page is written in English. You can find a list of language attributes on the W3Schools website to verify the correct language is declared. 

While you are testing page language, also notice if there is text on the page that is written in another language other than the language initially declared. For example, in areas where more than one common language is used, you will often see disclaimers and other important information provided in more than one language. If this is the case, when the language of the text changes, ensure there is a language attribute on the tag surrounding the text. Here is an example of a paragraph element declaring Spanish as the language of the paragraph:

<p lang=”es”>

Moving, flashing, or blinking content

As accessibility experts, we know that moving, flashing, or blinking content almost always creates an accessibility barrier. There are many factors to consider in order to make animated content accessible. Not everyone reads and processes content at the same speed so we need to be sure to account for this. Also, having content that flashing or blinks too fast or is too bright can cause people with photosensitive epilepsy to have a seizure.

If your website includes features such as carousels (slideshows), scrolling news feeds, and/or video content, look for the following features to help you decide whether or not it is accessible to everyone:

• A way for users to pause, stop, or hide the movement
• A way to control the speed of moving/scrolling content
• Flashing or blinking content that does not flash or blink more than three times in one second

If you are able to control the movement of the content, be sure you can control it using different techniques other than the mouse. For example, you must be able to control these elements using only the keyboard.

For more easy checks, check out our Are Your Business Websites and Employee Portals Ready for Coronavirus Telecommuting? article and learn how to test for color contrast and text alternatives.

Next steps for testing web accessibility

If the easy checks you have performed so far are giving you positive results, your website’s accessibility may be better than originally anticipated. Of course, if your website was not designed with accessibility in mind, we would be pleasantly surprised that you made it this far without finding any accessibility barriers. Use our free web accessibility resources to help you continue testing your website’s accessibility.

If you are already seeing many accessibility barriers, use the form below to contact us right away so we can make your website accessible to everyone and bring your business into compliance with current accessibility laws and regulations.