ADA Website Compliance: What Is It? How Do I Achieve It?

Disabilities are everywhere. 26% of American adults live with at least one disability. Mobility, cognition, and vision disabilities can impact the user experience of a website significantly. That’s why the Americans with Disabilities Act (ADA) requires ADA website compliance. If you want to provide for Americans with disabilities, you need to know a lot of things about website compliance today. 

What does ADA website compliance mean? What parts of your website design must you alter to meet ADA requirements? How can you include photos, videos, and links in your website content? 

Answer these questions and you can exceed web accessibility standards in no time. Here is your comprehensive guide.

The Basics of ADA Website Compliance

The ADA prohibits discrimination on the basis of disability. All companies must provide resources that people with disabilities can use. This includes creating an ADA-compliant website. 

Title II applies to state and local governments. Governments must provide websites that make it easy to complete common activities. People must be able to file for an absentee ballot, pay fees, and attend virtual meetings.

Title III applies to all businesses open to the public. Businesses must create websites that allow people with disabilities to access all services on the website. This includes shopping for products and learning about the business itself.

Failing to comply with Title III can lead to lawsuits and fines. You also risk losing customers and developing a reputation for not helping people with disabilities.

Familiarize yourself with Title III before you start to build a website. You can talk to a disability lawyer or activist to learn more about what you need to do. 

Website Layout

You can start by designing an appealing layout for your website. This will help everyone who accesses your website, and it lets you develop a structure you can use for future revisions.

Being Consistent

Every page should have the same structure. A header can go at the top of the page, describing what the page is in one sentence or a few words. Each header should be the same size, use the same color, and be roughly the same length. 

If your pages have images on them, they should be in the same places. This can allow someone with low vision to focus better on the image. You can put an image in the upper right corner of an article, along the top of the article, or toward the bottom. 

You should use one font for all of your text. You can use italics, bolding, and underlining, but don’t use them too often. When you want to emphasize an important word, try to write a sentence that naturally emphasizes it. 

Try to use the same terms for things. If you sell a particular product, give it a name and use that name every time you write about the product. 

Creating a Good Navigation Bar

A navigation bar allows someone who has difficulty with using a mouse to reach critical pages easily. The navigation bar should be visible along the top or left side of every page on your website. 

Your navigation bar should follow Hick’s Law, which means adopting minimalism so your user is not overwhelmed. The bar should not be cluttered. Select the most critical pages for your website and put links to them in your bar. 

The text linking to each page should be one or two words long. The font you use should be identical to the font you use in the body of your articles, though you can change the colors. 

Avoid using dropdown menus in your bar. They can add clutter, and people who don’t use mouses may struggle to access them. If there are other pages you need to link to, link them in the bodies of your articles. 

You can include your company logo and name in the corner of the screen, next to your bar. This creates brand recognition and reminds people of what website they are on.  

Allowing Keyboard Navigation

Many people struggle with using a mouse to move their cursor and click on pages. You can help them by adjusting your website so they can navigate it using their keyboards. 

You can edit your source code to allow several different keyboard navigation features. You can allow users to use their Tab key to navigate through the interactive elements on your page. They can then access buttons, places to input text, and links to other pages. 

This can be tricky to do on your own, so hire a website designer who can design your code properly. Test their work after they are done to make sure everything is okay.

Adopting Colors

Color contrast can be hard for people who are colorblind or who have vision impairments to notice. You should have good contrast between your text and the background of your pages. When in doubt, put black text on a white background. 

You should bear in mind how people with colorblindness will see images and other features on your website. People with red-green colorblindness find it difficult to tell the difference between red and green objects. You should use blue and other colors to appeal to these users.

You should select colors that most people can see, and you should provide alternatives so people with colorblindness know what images are depicting. You can write captions and written descriptions under an image to indicate what the image shows.

Images

Besides writing captions for people with colorblindness, there are several things you need to do to improve the accessibility of images. Be diligent and talk to a web designer about how you can adjust images to meet ADA standards. 

Adding Alt Text

Alt text is written text that appears when a user places their cursor over an image. It is essential you add alt text to any image or graphic on your website so users with low vision can learn about them. 

You can add alt text by adjusting the code you use for images. The text should be one sentence long, but it should accurately describe what the image depicts. 

Try to give an appropriate context for the image. If you’re writing an article about a vacuum cleaner and your image shows someone using it, you can write, “Man using vacuum cleaner to suck up dirt.” Do not write “photo of” or “image of,” as this information isn’t necessary.

For an icon, your alt text should provide the information that you intend for the icon. If your icon links to your Facebook page, your text can be, “Go to our Facebook page.”  

Selecting High-Quality Images

You should never select images that are out-of-focus, cluttered, or inconsistent with the content on your page. Your images should be clear for all users to see, and they should be straightforward. It’s okay to have multiple people or objects in your image, but don’t have multiple points of focus. 

If you don’t need an image on your page, don’t add one. An unnecessary image can distract users from your article and slow down your loading speed.

Try to avoid using GIFs and moving images. These images can take several seconds to load, and they can be hard for people with low vision or sensory processing disorders to see. Never use images with flashing colors or lights, as they can trigger seizures. 

Explaining Complex Images

Charts, infographics, and graphs can lay out important information for your user. However, they can be extremely difficult to read, especially for users with low vision.

You should include alt text that specifies what the images are about. But you need to discuss the images in your page text as well. Writing about the image in your page text will give you more room to clarify the information and explain how it is relevant to your article. 

You can use bullet points or numbered lists to lay out steps in a chart or diagram. If you’re clear enough with your language, you may not need an image on your page. Write tutorials and lists a few times over and read your work out loud to see if your language is clear.

Videos

You need to be very careful with the videos on your website. Videos are difficult for many people with disabilities to access and process. Run your videos by disability advocates to make sure they are easy to understand and helpful.

Providing Alternatives

Some people with disabilities prefer to watch videos while others prefer to read text. You should always attach a video to a text article that explains what the video is trying to say. This allows someone to choose whatever format they want. 

Your video should have alt text that provides further information about the video. You can give a one-sentence summary of what the video is about. 

Using an Accessible Video Player

You can use whatever player or software you want to embed your video. However, the software should come with a clear pause button so someone can stop the video and restart it when they are ready. Videos that automatically play and don’t stop can be disorienting and annoying for all users. 

If you cannot find a good video player, do not include videos in your article. You can write a tutorial or instructional guide instead. 

Adding Captions and Transcripts

Each video should come with captions that describe the actions on screen. Anything that is not apparent in the audio should be described. If someone walks from one end of the room to another, you should write, “Walking across the room.”

You should also include a transcript with the dialogue and scene descriptions in your video. You can write a script for your video, then copy and paste the script below your player.

Text

Once you’ve optimized your other features, you can turn to your text. Adopt these practices for all articles you write, including on your landing pages.

Writing for Text Readers

Some people with low vision use text readers, which examine the text on the screen and read it aloud. You must write for these programs. 

The more skimmable your articles are, the easier they are to read. To create skimmable articles, cap your paragraphs at three sentences. Try to keep each sentence under 20 words, and avoid writing run-on sentences. 

Do not write above a ninth-grade reading level. Use words that your users would understand and use in their daily conversations. Feel free to adopt an informal tone, especially if you’re writing instructions for your reader.

Writing Good Anchor Texts

Your anchor text is the clickable words that link to another article. Your anchor text can be short, but a user should know what the article is linking to. Put the anchor text in a sentence that describes the content of the link. 

Avoid using anchor texts like “click here” or “contact us.” These texts are too generic. You can try “read this article” or “give us a phone call” instead. 

If you have multiple links on your page, the anchor text for each link should be unique. This indicates that you are linking to a new page. You can distinguish each link and integrate SEO into your design by placing search terms in your anchor texts.

What You Need to Do for ADA Website Compliance

ADA website compliance means building a website that all Americans with disabilities can use. Your design features must be clear and consistent throughout your content. Each page should have a navigation bar with obvious links to different pages.

If something is too hard for someone with a disability to understand, you need to explain it. This means selecting colors that people with colorblindness can see and writing alt text for images and transcripts for videos. 

Get help so you can manage a perfect website. Blissbranding Agency helps businesses build accessible websites. Get a free consultation today.