Ada Website Compliance 2021 Checklist 

Don’t get caught out 

The Americans with Disabilities Act (ADA) is an important piece of legislation that works to ensure that website accessibility to all—especially those with a disability such as being hard of hearing or visually impaired, among others. Making sure your ADA website compliance is all set means making special accommodations in various aspects of your website such as the design, the navigation, and the content. These can range from the colours used, to the HTML code, or even the overall layout of the website.

We have assembled an easy-to-follow guide based on the Web Content Accessibility Guidelines (WCAG) 2.1 to assist you with making a ADA-compliant website. Read more to learn more about 2021 ADA website compliance.

Website Accessibility, Design & Aesthetic

The aesthetic of your website, in accordance to ADA website compliance, is one of the most important aspects of web design. Not only is it important that your website looks good, but it should also be accessible to all users. There are many ways that you can improve the design of your website, most notably would be ensuring that the layout of your website is simple, consistent, and easy to navigate.

Another important aspect of design is the colours that you have chosen to use. Colour adds a lot to the general look of a website and a good choice in colour will have an impact on visitors, but not all colour choices are equal in terms of accessibility. In order to have adequate accessibility make sure that there is distinct contrast between the colour of the page and the font colour. This will improve the readability of the page immensely.

In order to achieve the required amount of contrast between the text and page colour, the WCAG 2.1 recommends using colour contrast ratios to measure the amount of variation between the colours. Colour contrast ratios are based on the perceived luminance of two colours. The numbers in the ratio represent colours and can range from 1 to 21, with 1 being white and 21 being black. For example, a ratio of 21:1 would represent black font on a white background. The minimum contrast ratio to aim for is 4.5:1. Trying to figure out if your contrast ratio is correct can seem complicated at first but thankfully there are many online resources dedicated to deciphering the contrast ratio for two colours.

Another aspect of web design that is sometimes overlooked is the HTML code. The HTML code of your website must not have any errors, as even the smallest mistake in this code can affect the accessibility of your site, especially when it comes to screen-readers’ ability to function effectively. The most common mistake to look out for when it comes to HTML code is missing closing brackets. Close them up to make sure you're ADA-compliant!

Navigation & Accessibility 

One of the most important parts of being Americans with Disabilities Act (ADA)-compliant and ensuring the accessibility of your website is having numerous ways to navigate it. Some of the most important navigation features to include for website accessibility are making sure that navigation does not require a computer mouse and can be done entirely by using the keyboard. In addition to being able to navigate using only a keyboard, users should not be able to get stuck on any web page through the use of keyboard-only navigation. This is called a keyboard trap and it should be avoided at all costs.

Another important navigation feature is search bars for any ADA-compliant website. These allow users to quickly access the information that they need and improve the efficiency of the website for all users, not just those with disabilities. Search bars are also important in ensuring that there are multiple ways to easily find information on your website, allowing all visitors access to the same information by using whichever way is easiest for them.

While there are numerous ways to improve the efficacy and accessibility of your website pop-up menus are not one of them. In general, the use of automated pop-ups is frowned upon as they can disorient the user. However, it can be helpful for some users to offer a help menu in the form of a pop-up.

Alternatives & Descriptions  

As previously discussed, your website should be accessible to all to be ADA-compliant. Enforcing this accessibility can become more difficult when discussing the content featured on your website, but it is especially important to address. This content, such as photos and videos require special accommodations in order to be easily accessed by all users. For example, all videos and audio featured on your website should include captions and/or transcriptions, which will allow those hard of hearing to consume the content without issue. Captions also assist those who are visually impaired as it allows screen reading technology to read the captions aloud, making the content even more accessible.

Any images used on your website should also have image descriptions which are detailed summary of what the photo depicts which will allow screen reading technology to communicate the details to the user. Image descriptions should be as detailed as possible so that visitors can form a clear depiction of the image in their mind. A detailed image description will include:

1. Colours
2. Type of image (photograph, painting, graph, etc.)
3. Placement and transcription of text (if applicable)
4. Names
5. Clothes (if applicable)
6. Emotions

When it comes to including descriptions of genders and races, it is generally recommended to describe them only when the gender and race is relevant to the image, as well as confirmed by the subject(s). This helps you to avoid misgendering the individuals being represented. It’s also important that if you choose to describe the subjects’ races that you are consistent about describing the races of all the subjects in every photo or video in order to avoid presenting white individuals as the norm.

Image descriptions may also vary depending on the type of image being described. For example, if you are describing an artist’s rendering you may want to focus more on the colours and art style being used, compared to describing an infographic which may result in a more straightforward description of the image.

When it comes to ADA-compliant, images must also have alt text incorporated into them as well. Alt text, also known as alt descriptions, is text used within the HTML code of the images of your website that provide descriptions of both the appearance and the function of the photo featured. The use of alt text will safeguard all users’ ability to interpret any and all images used on your website. When coming up with alt text descriptions make sure adequately detailed, while also avoiding any unnecessary words.

While adding images to your website will increase its aesthetic value, the use of images should never be a replacement for text. The only cases in which this rule does not apply are when it comes to logos, charts with labels, and infographics. In the case of charts and infographics, these images must be accompanied by descriptive captions to aid the use of screen-readers.

If your website contains videos or other content that blinks or moves visitors must be able to pause, stop, or hide the content. Videos and other content should also avoid having more than three flashes in a one second period. Including flashes on your website could potentially trigger an epileptic seizure, which is why it is imperative to avoid the use of flashes on all content featured on your website.

E-BOOK: Social Media Planning For Your Community Association

Language, Titles & Text

Language and text is a part of ADA-compliance which encompasses a greater part of your website. When it comes to the default language used on your website, you must make sure that it can be easily determined by any type of accessibility software. It should also accommodate the majority of people expected to use the website, meaning that if your website is for a company based in the United States the language would most likely be in English, compared to a website based in a country like France, where the language chosen would most likely be French.

Although the chosen default language should reflect the majority of assumed users, it is a good idea to incorporate the ability to change the language in order to increase accessibility and engage with a wider audience. 

The text content on your website must be easy to navigate, meaning all content must be presented in a logical sequential order. This makes navigating through the various pages of a website much easier. Each page of your website should also have a descriptive title to provide more efficient 

Your website should also feature zoom capabilities, up to 200%, as well as the ability to increase the text size in order to improve the readability of the site for those who are visually impaired.

Testing ADA-Compliance

In order to ensure your website meets the proper Americans with Disabilities Act (ADA)-compliant guidelines an audit may be a good option for identifying potential issues and missing information. Thankfully, you are able to download the WCAG 2.1 AA guide and checklist for free online. The WCAG 2.1 AA guide allows you go through your website and discover anything that will need to be changed or added.

Doing this audit yourself will cost the least amount of money, however, it is possible to contract the work out to a professional organization. These audits are conducted manually by an accessibility expert and will produce a report detailing any and all ADA issues and ways to fix them. This option often costs upwards of $1,000, which is often not feasible for smaller businesses. However, when considering the costs of possible lawsuits you could be served, combined with the inherent value of being accessible to all, the cost of a professional audit is well worth the price if you can afford it.

One thing to be wary of when conducting an ADA-compliance audit is any service or website that claims to conduct automated scans of your web pages. These scans might seem like an easy solution, but they can routinely miss up to 80% of ADA issues. Scans may be useful when beginning your journey to ADA-compliance as they can identify some of the major issues that your website has with accessibility, but they will not identify everything.

Another increasingly popular service to remain vigilant of is any business offering instantaneous accessibility through the use of overlay widgets. Not only are these widgets a direct violation of the ADA by being a separate and unequal experience, they also do not make any of the required changes to your website’s code or content. Screen reading technology will not be provided the information required in order to have optimal accessibility without actual changes being made to the website’s code. Using overlay widgets may seem like an easy, cost-effective way to update your website’s accessibility but the potential of being served a lawsuit for not having ADA website compliance will come at a much greater cost.

More ADA best practices

As previously mentioned, when it comes to ADA-compliant website best practices, the WCAG 2.1 is the preferred document to us in order to guide your ADA-compliant journey. The WCAG 2.1 has three acceptable levels to strive for, which are A, AA, and AAA, with A meeting the minimum requirements and AAA exceeding all of them. While the level A technically meets ADA requirements, the WCAG recommends aiming to meet at least the AA level.

It is also important to note that the WCAG continues to be updated with the latest update, WCAG 2.2, being expected in summer 2021. Knowing these updates will help you keep up to date on any changes that will need to be made to further ensure website compliance.

Due to websites being constantly updated, it is recommended that you perform an audit and update your website on a regular basis, once a year at a minimum, in order to ensure that your website is up to date with any ADA recommendations that may have been updated.

In addition to audits being performed, user testing by individuals with disabilities is also suggested, as well as invitations to provide feedback on the level of accessibility that your website possesses. These two options will provide you with advice from people who have first-hand experience accessing websites with various disabilities.

Overall, by making sure that your website is ADA-compliant you are providing all potential visitors with equal opportunities to access the information they are seeking. Roughly 61 million people in the United States live with a disability, by ensuring that your website is easily available to all you are not only providing an fully accessible service, you are also doing the right thing to safeguard everybody’s ability to access information no matter their ability.

Ensure you are ADA website compliance today

Now that you've learned more about 2021 ADA website compliance, you need a website with all these features—and more. At Xplor Recreation, we partner up with our customers to build them not only an amazing member-focused website, but we also optimize their website, so they rank well in search engine results. Learn more about our digital marketing services today!

With Xplor Recreation, manage facilities, online registration, and more. Regardless of focus or size, community centers trust Xplor Recreation for accessible, effortless automated solutions. Xplor Recreation offers a fully-integrated software solution for your staff; effortlessly add third-party systems and tools to help efficiently minimize duplicate data entry—allowing to get back to more important activities such as making meaningful connections in your community!