User1st digital accessibility

4 Design Tips to Support Website Compliance With ADA


Website compliance with ADA, the Americans with Disabilities Act, is required by law, but many websites are still not accessible to people with disabilities. In addition to the potential legal liability noncompliance brings, it can also result in lost opportunities to do business as individuals with disabilities (who number more than 50 million in the U.S. according to the Census Bureau) choose to use sites which have been designed to accommodate them. ADA-compliant web design can also help search engine bots crawl your site more easily, which can boost your site’s position in the all-important search engine ranking pages.

Given the many benefits designing a website to be easily navigable by people with disabilities can bring, why are so many websites still out of compliance with ADA guidelines? One reason may be
a lack of knowledge as to how to design, or make changes to, a website to make it compliant. 

ADA-Compliant Design Philosophy

ADA-Compliant Design Philosophy

Before discussing the specific design techniques to use to support website compliance with ADA, it is important to mention that accessibility often naturally flows from good design. This means that your website should be designed to deliver a great experience for all its visitors, whether or not they have a disability. By the same token, when adding features to your website that will make it more accessible to people with disabilities, the objective should not be to provide them with different
material to experience. Instead, focus on designing the experiences so that your website allows individuals with disabilities to experience the same material as other users, put perhaps in compatibility with their accommodations.

When it comes to specific guidelines, the WCAG guidelines (Web Content Accessibility Guidelines) are a good place to start. These guidelines are based on the principles of designing a website that is perceivable, operable, understandable, and robust

Four key tips for using these principles to make your website ADA-compliant are as follows:

1. Color Contrasting

When the colors on your site, like those associated with buttons and other important functions, do not have sufficient contrast to other colors on the site, it can be difficult for people with disabilities to make out these features and use them. To ward against this, ensure that your site uses a color contrast ratio that enables such elements to stand out and easily be seen.

The key is to design for sufficient contrast between the color of the text and the color of the background. Generally, making fonts larger and using clear contrasts between colors will make it easier to distinguish a page’s important elements. Color contrast is a great example of how employing “principles of Universal Design” can often make the legibility of your site better for non-disabled and disabled users alike.

Another issue to consider when designing your site is color blindness, which one in every 12 men are estimated to have, along with one in every 200 women. Take this into account when considering whether to have similar shades of color adjacent to each other. Enabling a black and white
viewing mode can help ensure that those who have difficulty distinguishing between colors can more easily view your site.

2. Use Alt Image Text

To ensure ADA compliance, images present on your site should feature alternative text in case they aren’t perceivable on a device or by a user. If this happens, the alt text describes the element on
the page so the viewer or screen reader tool can tell what it is. 

Another feature that can make your site more accessible to people with disabilities is to offer audio descriptions of visual content. This enables those who can’t view the visuals to receive an audio description of the material they can’t see. 

Audio files should be paired with supportive alt tags for those who are deaf or hard of hearing. The general idea is to make sure that the content of your site is accessible in a text format that can be
easily accessed with a screen reader so that people with disabilities can consume it.

3. Analyze Site Logic Flow

To enable individuals with disabilities to use your website’s complete functionality, make sure that forms on your site are labeled properly. For instance, shopping cart functionality on an e-commerce site should be labeled as such so that an ADA device such as a screen reader can correctly determine its function.

One tactic to make a site easier for people with disabilities to navigate is to enable the permanent expansion of left-hand navigation so that the site’s pages can be easily found and visited at any time.

Finally, to make your site accessible to those who can’t use a mouse, it should be fully functional using just the keyboard, meaning that all elements can be accessed by tabbing to change the focus and
that the focus moves down the page in a logical order.

4. Use Captioning for Video Content

Videos on your site should be close captioned so that those with hearing disabilities can follow along. The cherry on top of this practice is that for SEO, it will also alert a search engine to the content in your video. A guide explaining how to caption YouTube videos is available from the National Center on Disability and Access to Education.

Start Your Website Compliance Check

Not sure how to make your website ADA compliant? Download our Essential Web Accessibility Guide to walk through what makes a website compliant and learn how you can check to see if
yours is compliant. Or request a FREE demo of our accessibility checker

Written by Raegan Bartlo