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 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. The lower the bounce rate, the longer people are staying on the website. 

On the contrary, a higher bounce rate indicates a poorly constructed site. A website that lacks accessibility would be considered a poorly constructed site. A poorly constructed website includes things like non-responsive design, lack of color contrast, and missing form labels.

Our goal 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 71% of disabled web users will leave a website when it is not accessible. This is a large enough percentage to have a significant impact against the overall bounce rate. Business owners must prioritize web accessibility to avoid 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 find a new developer as it is just undeniable how vital web accessibility for developers is, especially nowadays. Developers aim to create high quality websites and know that the cleaner the code is, the faster their websites will run. If a website’s load time is slow or a website fails to rank high in search results, the development team is responsible. Cleaner code means faster, high quality code. Semantically correct code is cleaner code. Accessible code is semantically correct. This means that code is written according to specifications. HTML elements (code) have semantic meaning. Developers optimize a website’s accessibility and performance by using code as it is intended. 

Aside from having fewer bugs and making a website load faster, semantic code also helps search engines such as Google and Bing to index the content and achieve higher search rankings. For example, let’s say that a web page is about comparing web development platforms such as WordPress and Shopify. The page visually uses headings to organize its content. The code of the page uses paragraph tags with classes (used for targeting styles) to create the visual appearance of headings like this:  

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.