It’s a myth that visual design suffers when building or rebuilding websites to achieve ADA compliance, which mandates accessibility for individuals with various disabilities.

It’s also a myth that a website loses functionality when it is made ADA compliant.

Whether for those reasons, lack of awareness or cost, companies and organizations face federal lawsuits for noncompliance with the 1990 law. As a result, in 2018 there were over 2,200 lawsuits filed. That was about three times the number in the previous year. For 2019, the pace of filings appears to be eclipsing last year.

Just like using an automatic door or ramp, an ADA compliant website benefits everyone. Be honest, have you ever pushed the button to open 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. That’s true. However, the government also made it clear that the lack of regulations doesn’t absolve a company for complying with the ADA law.

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 the thinking.

Sir Tim Berners Lee

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.”

Accessible design is universal design.

Sir Tim Berners-Lee,
Photo by Paul Clark via Wikimedia CC0

Common sense design for ADA compliance

Consider the diversity of users in the following list of key components of accessible design.  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 the users interact with the product.

Contrast Ratio

ada compliance type contrast DBS Interactive

Some people with visual impairments may find reading text without contrast against the background difficult, whether it is a plain background or text on 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 intent of the form field.

DO

good accessibility Form field

 

DON’T

bad accessibility Form field

Provide feedback for errors and omissions

People make mistakes.

Nothing creates a high level of frustration and anxiety more than making a mistake and not knowing the failed effort. 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 section on color).

The example below highlights two errors in the form. First, the email address is formatted incorrectly. Secondly, the comment field, which requires input, is not completed. The form’s design indicated required fields with an asterisk, but for whatever reason, the field was empty.

The feedback not only highlights the location of the error but also provides explicit instructions for correcting the mistakes.

Don’t let lack of clarity stand in the way of a conversion, whether it is a sale, comment or newsletter signup.

accessibility form feedback

 

No mouse, no problem

ada accessibility link examples

Few people may be aware that the keyboard provides web page navigation in addition to the mouse. For keyboard navigation, links must indicate through color and design variation the activation state: mouse over, keyboard focus style, and touch or click style.

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

Keyboard navigation may be necessary for users with limited mobility, such as someone stricken with a stroke. Consider, however, the case of a dead battery in a mouse. Any user could turn to the keyboard to navigate through a website.

Be consistent in navigation

ada compliance breadcrumb navigation design DBS Interactive

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

Also, like driving from point A to point B, there often there is more than one way to get there. One may be faster than another.

Web navigation is no different. Provide users with consistent navigation, such as site search and site maps and be sure that 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.

Keep headings and spacing simple

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

Consider that users with cognitive conditions such as ADHD may have difficulty navigating content not presented clearly and directly. Beyond that, many time-crunched users give up trying to figure out 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 hierarchy

Read | Accessibility and SEO – A perfect fit

 

Design for different platforms and views

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

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 track 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

 

Read | Differences between B2B and B2C web design

 

Offer media alternatives

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 available to users with disabilities. Bravo if your content team produces alternative forms of content.

Make it easy for users to access this content by grouping the content and links to alternative forms for users. Links to audio transcripts, audio described version of videos, and captions or text explanations of complicated tables should be easy to locate.

accessibility video controls

Read | An accessible website should not be cost prohibitive

 

Give users control

That carousel or image slider looks beautiful. The stunning video on autoplay may have cost thousands to produce. Users with cognitive limitations, however, may not comprehend the information quickly enough before the view changes or the video ends. Other users may want to start over or 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 the 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 produces websites that meet or exceed  WCAG 2.1 AA compliance in design and function. Let’s talk about how we can help you reach more people with accessible design.