skip to main content
X
Your Version of Internet Explorer Is Not Supported
Please update to a modern browser to keep exploring all that our Customer Experience agency has to offer. More info here.
share
Twitter
Facebook
LinkedIn
Email
Close
May 17, 2018   |   4 min read

ADA in Action | The Creative Approach to Accessible Design

How our designers solve web accessibility challenges.

Lately, ADA Compliance seems to be getting more coverage in the design community—and that’s a good thing. These web accessibility standards play a very important role in helping those with disabilities navigate the internet. One thing we’ve taken away from our recent ADA projects is a great deal of empathy for anyone who might not be able to see their screen with clarity, or hear the voice prompts of a video. Using the internet can quickly become defeating.

On May 17th, the world celebrates Global Accessibility Awareness Day. It’s a two-pronged effort to not just educate people about digital access and inclusion, but to consider disability from a different vantage point. We know that the rules around ADA Compliance can be intimidating, dense and often puzzling—our team experienced these learning pains in the beginning, too. They can also seem intimidating to any team already working within tight parameters (which is a hurdle creatives encounter daily).

Here are some of the ways we solve web accessibility challenges. Learn about things to keep in mind, perspectives less explored and how to make projects as successful as possible without creatively limiting yourself. Sections on compliance-focused web design have been broken down by Visuals and Navigation.



ADA Website Compliance from a visual standpoint.

Revisiting fundamentals taught in your Principles of Design class.



COLOR CONTRAST

This is the first thing you look at when working on a site. Designers are often given brand standards that have set colors and ways to use them. Following these while staying ADA-Compliant can be tough. For Level AA, the contrast must be 4.5:1 for text smaller than 18pt (or smaller than bold 14pt text). And it must be 3:1 for larger text. Also, consider how icons or other info visuals will be impacted by guidelines.

There are plenty of great color contrast tools out there for checking—some more aesthetically pleasing than others. Check out the ones our design team turns to most often:



TEXT SIZE

Text size should be big enough and spaced for optimal readability. One common rule is to have body copy no smaller than 16pt. This obviously depends on the typeface, so use good judgement. You can also consider adding controls that adjust the type size for audiences with visual impairments—like the elderly for example. And keep line lengths short, especially for blocks of text.



BUTTON SIZE

From mobile to desktop, button size should be big enough for a user to easily click on even if they have limited mobility. 40-48px is the go-to size for an appropriate amount of clickable space. Now this doesn’t mean that the icon or text itself must be oversized, just that the area is clickable. Links that get too close to each other can make it difficult for a user to select what they intended.



VISIBLE FORM FIELDS

These are a must-have when making your site accessible. We all know that forms can be boring to design sometimes. This leads designers to create unique variations that strive to break the mold. That’s not a bad thing by any means if you still follow the ADA website accessibility guidelines. Explore some quick tips for doing just that:

  • Ensure labels are clearly visible even after you’ve started entering text into the field.
  • Design required fields and error states that don’t rely solely on color.


Tips on creating a site anyone can navigate.

With greater accessibility comes an improved user experience.



CLEAR NAVIGATION

When it comes to ADA Compliance, this is a best practice that can’t be stressed enough. Take a step back and think of everything that contributes to a complicated user experience. There’s an implication behind every button you add, or every piece of visual content and copy block. Think wisely about how you approach navigation:

  • Keep navigation consistently placed and named across the site.
  • Don’t hide essential parts of navigation, plus provide a secondary way of navigating the site (like a site map).
  • Add breadcrumbs or similar cues to show users exactly where they are in the experience of a larger site.


PREDICTABLE UI ELEMENTS

Today’s sites tend to incorporate a lot of movement. Carousels, videos, dropdown menus, hover states—the list never ends. These should all have easy-to-identify controls. And if you design an arrow to be used one place, use that same arrow style across the whole site to indicate a similar action.



HIERARCHY

How could we leave off this fundamental web design principle? Hierarchy matters in a big way to accessibility. Your H1 should be as descriptive as possible. From there, headlines and subheads should be consistently styled for quick skimming by a user or their screen-reader. One easy rule to follow is placing elements on the page in the order of their importance, and keeping related items close to each other.



Need some help with site accessibility?

Learn more and get in touch! We’re happy to speak with you about the many benefits of making your website ADA-Compliant, which range from customer satisfaction to legal piece of mind.

Related Posts

071318_Blog_Thumbnailx2
050319_Blog_Thumbnailx2