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:
- 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.
- 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.
- 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.
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:
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:
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.
Please complete all fields.
Proposed Online Accessibility Act
Is the Online Accessibility Act the solution to clearly defined web accessibility standards and fewer web accessibility complaints?
Accessible Semantic Structure: Lists
Using accurate semantics in our lists will strengthen our accessibility foundation as well as increase the readability, understanding and retention of our audience.
Accessible Semantic Structure: Headings
The semantic structure of a web page plays an important role in making a website accessible. In fact, we consider well structured semantic HTML to be the foundation of a great website.