It’s a myth that visual design suffers when website are built (or rebuilt) to achieve ADA compliance, which mandates digital accessibility for individuals with various disabilities. It’s also a myth that websites lose ideal, user-centric functionality when they become ADA compliant.

Whether it’s those concerns, a lack of awareness, or a need for cost savings that keep many websites short of ADA compliance, companies and organizations should know they face federal lawsuits for noncompliance with the 1990 law. In 2018 alone, there were over 2,200 lawsuits filed. That was about three times the number in 2017. So far in 2019, the pace of lawsuit filings appears to be eclipsing even last year’s numbers.

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?

ada compliance Dominos Pizza App | DBS Interactive

Dominos Pizza App

Web accessibility addresses the needs of everyone to achieve a high level of usability and ADA compliance. A website visitor may have a permanent disability (visual, mobility or neurological impairment), or a temporary impairment such as a broken arm, broken or lost eyeglasses, etc.

Many baby boomers may have age-related issues that make using the web more challenging.

Together, many people may not use your site because it is inaccessible. About 20 percent of the U.S. population has an identified disability.

Domino’s Pizza knows first hand about accessibility. A federal appeals court ruled against the pizza giant in an ADA compliance case involving a user who is blind who could not order a pizza.

“The alleged inaccessibility of Domino’s website and app impedes access to the goods and services of its physical pizza franchises – which are places of public accommodation,” Judge John B. Owens wrote for the panel.

‘Can I order a pizza?’

Joe Manning, Jr., the attorney for the plaintiff, spelled it out directly. “In the case of Domino’s, you can’t order a pizza. Isn’t that the test? We aren’t arguing over a comma here.”

Companies claim there are no government guidelines or requirements for building an accessible website. That’s true. However, the government also made it clear that the lack of regulations doesn’t absolve a company for complying with ADA requirements.

Fortunately, 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.

“In the case of Domino’s, you can’t order a pizza. Isn’t that the test?
We aren’t arguing over a comma here.”

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 along with the earlier sibling, WCAG 2.0, offers clear guidance to achieve ADA compliance.

Look at it, and you’ll quickly understand the common sense behind their thinking.

Sir Tim Berners Lee

Sir Tim Berners Lee (photo by 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.”

Put simply: Accessible design is universal design.

Common sense design for ADA compliance

Consider your diversity of users in the following list of key components of accessible design.  For each user, answer the question “Can I order a pizza?” or “Can I do x, y or z?”

A great designer––whether of buildings, roads, advertising or websites––considers how all users interact with their designs.

Contrast Ratio

ada compliance type contrast DBS Interactive

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.

Don’t rely on color

ada compliance color blind images dbs interactive

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.

 

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

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.

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.

Be consistent in navigation

breadcrumb web navigation ada compliant design example DBS Interactive

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.

Keep headings and spacing simple

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.

accessible web content hierarchy

Examples of good and bad spacing of content

Read | Accessibility and SEO – A perfect fit

 

Design for different platforms and views

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 dbs interactive

Example of one webpage designed for mobile vs. desktop

 

Read | Differences between B2B and B2C web design

 

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.

alternative format links accessibility video controls

Example of links to transcript and audio alternatives

Read | An accessible website should not be cost prohibitive

 

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.

web accessibility user controls

 

The benefits of accessible design for ADA compliance

In the end, all users benefit from accessible design, just like ubiquitous automatic doors and other features found in the physical world.

Consider the user intent and your business goals.

Pizza with pineapple may not be your favorite, but your site visitors should able to order one easily. That’s what ADA compliance is all about.

DBS Interactive develops websites that meet or exceed  WCAG 2.1 AA compliance in design and functionality. Let’s talk about how we can help you reach more people with accessible design.