Five things to look for when verifying your website is accessible

In a sign of things to come, a Florida judge ruled in June that the national grocery chain Winn-Dixie must update its website to comply with the American with Disabilities Act (ADA) requirements.

At Home Advertising, we do more than build websites that are strong marketing tools. We go the extra mile to make sure your website is compliant with the ADA, the Section 508 amendment of the Rehabilitation Act of 1973, as well as the Web Content Accessibility Guidelines (WCAG) that were established by the World Wide Web Consortium in December of 2008.

Before beginning work on a new website for a client, we conduct a review of their current site, including a audit for accessibility. Below is a list of the top five things that we frequently see that are overlooked.

#1 The Navigation Can’t Be Skipped

The main content on a website page is not usually the first thing that appears on a page. There are branding elements, long lists of navigation and a bunch of additional stuff like social media icons. Imagine how difficult it would be to skip all of those items if you did not have the use of your hands and had to use a keyboard to tab through the items on each page you visit.

This is why we always recommend providing, at minimum, a way to jump to the main content of the page on every page of a website. This is especially important if you have a large quantity of navigation items.

ADA Skip To Content Example

In the example above a link is provided to skip the navigation. Doing so provides a convenient way sight-impaired website visitors to skip all of the links and logo at the top of the page.

#2 Color Contrast Is Too Low

A large percentage of the world’s population struggles with some form of color deficiency in their sight. In fact, as many as 8 percent of men and 0.5 percent of women with Northern European ancestry have the common form of red-green color blindness.

With this in mind, the Web Content Accessibility Guidelines state that the visual presentation of text and images of text must have a contrast ratio of at least 4.5:1 and that color must not be used as the sole method of conveying content or distinguishing a visual element.

A good way to test the contrast of the text can be found here:

ADA Color Contrast Example

In the example above, the top paragraph is very low contrast whereas the bottom paragraph has improved contrast and adds the underline to the links to improve accessibility.

#3 Element Focus Highlight Has Been Disabled

By default, Internet browsers provide an outline, such as a blue glow or dotted line, around a content element that the Internet Browser is currently focused on. An example of this can be observed if you use the tab key to navigate through a web page.

Many users with motor and vision disabilities rely on a keyboard and this focus highlight to navigate the Internet. Although it is a bad idea, some website developers feel the need to override this feature in their designs. This should not happen.

ADA Focus Highlight Example

In the example above, the logo is highlighted with a blue outline to show that the browser is focussing on that item. If the tab key was tapped, the blue highlight would move to the first item in the navigation.

#4 Link Text is Meaningless

A lot of website themes are programmed in a generic fashion in order to broaden their user base. This is most obvious when a website theme takes advantage of dynamically generated excerpts for blog posts and calls-to-action. You will see links that contain text like Read More, Learn More, or just the word More with little arrows.

These links do not do the reader’s comprehension any justice. In fact, in addition to hindering accessibility, doing this could hinder SEO as well. A simple alternative to this is to expound on the text. Instead of saying “Read more”, make the link text “Read more about the title of the article.”

If the titles are really long and you’re concerned about the design of the page, there are additional HTML attributes that can be used to accomplish accessibility without disrupting the flow of the page.

ADA More Links Example

In the example above, the two buttons in the left column are not ADA compliant while the buttons on the right are.

#5 Alternative Text is Non-Existent

Alternative text is one of the most overlooked and easiest accessibility items to fix. Alternative text, or alt-text is applied when an image is added to a webpage. It is not required for an image to be displayed with HTML, but it is heavily frowned upon when it is left out.

The purpose of the alternative text attribute is to communicate to the reader what the image is a picture of. This is usefull for people with vision disabilities. Screen reading devices will read the alternative text out loud, describing to the reader what the image is a picture of. It also provides another opportunity to add additional optimization for your site’s SEO.

ADA Alt Text Example

In the example above, the right side shows the image of Tim Scheman on the Home Advertising website. The image on the left shows the same web page but with images turned off. When the images are turned off on the Home Advertising website, the alt-text shows information about the images that are missing.

How many of these five things did your website not have?

While these five issues are the most common, there are many other factors that go into making a website compliant with ADA requirements. The Americans with Disabilities Act (ADA), Section 508 of the Rehabilitation Act of 1973, as well as the WCAG 2.0 guidelines are very important if you have an online presence for your business. This is a why the developers at Home Advertising take the extra step to make sure your site is ADA compliant.

Contact Home Advertising today to get your website optimized for SEO, as well as to make it ADA compliant.

Obtain A Free Marketing Analysis For Your B2B Business.

Learn how to reach more customers and boost your business's bottom line.

Request Your Marketing Analysis

© Copyright 2018 - Home Advertising Inc.