It’s a myth that web design and user experience suffers when websites are built (or rebuilt) to comply with the ADA, which mandates that websites must be accessible to individuals with various disabilities or impairments. It’s also a myth that websites lose ideal, user-centric functionality when they become ADA-compliant.

Web accessibility addresses the needs of every website visitor to achieve an optimal level of usability and ADA compliance. Many people browsing the web have a permanent disability (visual, mobility or neurological impairment), or a temporary impairment such as a broken arm, broken or lost eyeglasses, and so on. Many baby boomers have aging-related issues that make using the web more challenging, and they’re not alone–about 20% of the U.S. population has an identified disability.

Luckily, the international nonprofit World Wide Web Consortium (W3C) brings together smart people who develop open standards to ensure the long-term growth of the Web. They produce recommendations for making websites fair and equally accessible for the highest number of people possible. Their Web Content Accessibility Guidelines (WCAG) 2.1 offer clear guidance for web developers to achieve ADA compliance.

Review these guidelines, and you’ll quickly understand the common sense behind their thinking. Just like using an automatic door or ramp, an ADA compliant website benefits everyone. Be honest: As an able-bodied person, have you ever pushed the button that opens an automatic door at a business?

Sir Tim Berners Lee

Sir Tim Berners Lee (photo: Paul Clark)

Timothy John Berners-Lee, considered to be the father of the World Wide Web, says that “the power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.”

A great designer––whether of buildings, roads, advertising or websites––considers how all users interact with their designs. Consider your website’s diversity of users and their needs as you review the following examples of accessible web design:

10 Examples of ADA Compliant Accessible Web Design

Jump to an Example

  1. Contrast Ratio
  2. Don’t Rely on Color
  3. Label Forms Clearly
  4. Provide Feedback for Errors and Omissions
  5. No Mouse, No Problem
  6. Keep Navigation Consistent
  7. Simple Headings and Spacing
  8. Design for Different Devices, Views, and Screens
  9. Offer Alternatives for Consuming Media
  10. Give Users Control

1. Proper Contrast Ratio

Examples of type contrast on images

Examples of hard vs. easy to read type on images

Some people with visual impairments may find it difficult to read text without high contrast against the background, whether a plain background or text embedded within an image.

A movie with subtitles provides an easily understood example. The text often appears without anticipating the background. It happens when white text appears in a brightly lit scene. It is unreadable, and the audience is left not knowing the dialogue.

WCAG 2.0 requires a contrast ratio of at least 4.5:1.

2. Don’t Rely on Color

Examples of colorblind images for accessibility

These images are not accessible to those who are colorblind

Green means go. Red means stop. Yellow means slow down.

If you can’t discern color, you don’t know if you are stopping or going.

On a traffic light, the activated light in the respective position offers an individual with color blindness the necessary information to go or stop. In that case, the brightness and position provide the information. Likewise, a stop sign features the word STOP, the shape, and the color.

Color alone doesn’t provide enough information.

 

Design that relies only on color limits engagement for users unable to discern color differences.

 

3. Label Forms Clearly

Provide descriptive labels for all form fields. There may be a temptation to place the label words inside the form field. Resist. Screen readers may miss these labels. Further, users with cognitive disabilities may lose track of the form field’s intent.

DO THIS:

good accessibility Form field example

In this ideal example, labels are outside form fields

 

DON’T DO THIS:

bad accessibility Form field

In this example of bad accessibility, labels are inside form fields

4. Provide Feedback for Errors and Omissions

People make mistakes. So do your users.

Nothing feeds frustration and anxiety more than making a mistake and not knowing why or how your effort failed. That’s why you should make it easy for users to quickly correct errors and omissions as they interact with your website.

Alert users to errors with text messaging, symbols, and colors––but not colors alone. (Review the above section on color).

good accessibility form feedback example

An example of form fill errors being explained to your user

 

The example above highlights two errors in the form:

• First, the email address entered by the user is formatted incorrectly.

• Secondly, the comment field, which requires input, has not been completed by the user. The form’s design indicated required fields with an asterisk, but for whatever reason, the field was empty.

Providing feedback not only highlights the location of the error, but also provides explicit instructions for correcting the mistakes. This helps you avoid losing valuable web conversions, whether they are sales, comments, or newsletter signups.

5. No Mouse, No Problem

An example of accessible link highlighting styles

An example of link highlighting styles

Few people may be aware their keyboard provides web page navigation options in addition to their mouse. For keyboard navigation to be accessible, links must be indicated using color and design variation for the activation state: mouse over, keyboard focus style, and touch or click style.

Using the keyboard tab key, users must quickly recognize which link is active, and what is happening with the link.

Keyboard navigation may be necessary for users with limited mobility, such as someone who has suffered a stroke. However, it’s not just health that limits a user’s mobility–consider the scenario of a mouse battery losing its charge. In these and similar cases, any user could still rely on their keyboard to navigate through your website.

ada compliant design example of breadcrumb web navigation

An example of our own website navigation breadcrumbs

Whether driving on an expressway or surface road to your destination, we rely on consistent signage – speed limit signs, warning signs, and stop signs. Travel would be a mess without these guideposts.

Just like driving, there are often multiple ways to get from point A to point B on a website, with some routes faster than others.

That’s why you should provide web users with consistent navigation, such as site search and site maps, making sure that your labels, styles, and positions are consistent. Breadcrumbs and clear headings provide further aids for understanding.

Users with cognitive or neurological challenges depend on these consistent design elements to avoid becoming lost or frustrated.

7. Simple Headings and Spacing

Good design guides the user’s eye to recognize your hierarchy of information. Help them understand the relationship of headlines to your text, graphics, and images.

Consider that users with cognitive conditions such as ADHD may have difficulty navigating content that is not presented clearly and directly. Beyond that, many users are crunched for time and will sooner give up trying to figure out any poorly-presented content.

Expert use of heading styles, white space and placement of elements reduces clutter, making content more accessible. Considerable time and effort, which translates into dollars, goes into creating content. An effective design makes it easier for your customer to read and then act on your valuable information.

ada compliant accessible web content hierarchy example

Examples of good and bad spacing of content

Read | Accessibility and SEO – A perfect fit

 

8. Design for Various Devices, Views, and Screens

Google rewards mobile-optimized websites, but that doesn’t mean ignoring desktop and other platforms.

For mobile and other narrow views, structure primary content in one or two columns, and offer secondary content through icons and links.

Conversely, a desktop offers the opportunity to present information in multiple columns with links and visible navigation. Optimize the text line widths and type size in this view for maximum readability. Users with cognitive or visual impairments may not finish tracking a long line of body text.

Keep in mind the previous discussion about simple design that communicates clearly and quickly.

MOBILE vs. DESKTOP

mobile vs desktop responsive design example DBS Interactive website

Example of one webpage designed for mobile vs. desktop

 

Read More: Differences between B2B and B2C web design

 

9. Offer Alternatives for Consuming Media

Creating content in different forms offers users with various disabilities equal access to information. Transcripts of audio and text versions of complicated graphics make content more engaging for users with hearing or visual disabilities. If your content team already produces alternative forms of content, bravo!

Make it easy for all users to access your content by including links to alternative formats. Links to audio transcripts, audio described versions of videos, and captions or text explanations of complicated designs or tables should be easy to locate.

example of ada compliant accessible video controls for alternative format content

Example of links to transcript and audio alternatives

Read More: An Accessible Website Should Not Be Cost Prohibitive

 

10. Give Users Control

That carousel or image slider on your site looks beautiful. That stunning video on autoplay may have cost thousands to produce. Users with cognitive limitations, however, may not comprehend your information quickly enough before the view changes or your video ends. Other users may want to start over, or go back and review something they saw or heard.

Whether the site features auto-playing audio and video or carousels, give users controls to replay, advance and pause your media.

Example of web accessibility by providing user controls for video content

User controls here allow for jumping and playing slides/tiles

 

Benefits of Accessible Web Design for ADA Compliance

In the end, all users benefit from accessible web design, just like we can all use automatic doors and other accessibility features often found in the physical world.

Consider your user’s intentions, and find ways to align their website behaviors with your business goals.

Pizza with pineapple may not be your favorite, but all of your website visitors should able to order one easily, whether or not they are impaired. Providing accessible web design and supportive functionality is what ADA compliance for websites is all about.

Related Read: Social Media Accessibility Best Practices

We develop websites that meet or exceed your ADA compliance needs based on WCAG 2.1 AA standards for website design and functionality. Let’s talk about how we can help you reach more people with Web Accessibility.

Accessibility Insights

Read Accessibility Insights