Use Your Senses to Win at Designing Accessibility Standards

Navigating the web isn’t a one-directional process. It’s a sensory experience. Colors pop. Music sounds. We see the web. We hear the web. And, we even touch the web with our mouse or trackpad.

Not everyone senses the web the same way. But, everyone deserves an elegant, accessible and innovative experience. That’s a key component of our web accessibility design practice. It’s human-centered. It’s user-first. We design for people.

Creating websites that adapt to users’ needs

All people are different. Some have 20/20 vision. Others are colorblind. Some of us can hear a pin drop. Others went to one two many punk shows. Every user has varying abilities that may prevent them from fully experiencing the web. To be truly open and equal, sites need to accommodate them all.

That’s why standards are so important to our designers. Our team doesn’t simply design sites and apps that accommodate different abilities. They create elevated, functional experiences that put people — all people — first.

Accessibility standards sense

There are four major disability categories: Visual, auditory, motor and cognitive. Each ability differential can be solved with creative and empathetic design choices following standards set forth by the Web Content Accessibility Guidelines (WCAG). Within the guidelines, there are three levels of adherence websites can follow. Level A, the most straightforward to implement, all the way up to Level AAA, the most complex.

Sight

Full sight. Colorblindness. Partial or complete blindness. Astigmatism. They’re all levels of perception that must be considered in designing for the web. Text alternatives to increase a website’s perception include large print and screen reading. Contrast ratios also help to make content more distinguishable. These differ between the levels. Level AA requires a ratio of 4.5:1. Achieving a Level AAA is more difficult. A contrast ratio of 7:1 is needed. Use a contrast checker to validate. Here’s one we like.

Accessible design depends as much on your developers as your designers.

Create clean code. Lean on your developers to write code that’s easily distinguishable by screen readers. The readers should understand where the navigation ends, where the headlines fall and how the body copy is different.

Caption your photos. For those with less than superhero sight, the captions or alt tags written for the photos must be descriptive and accurate enough so the user derives the same value as the visitors who can view them fully.

Sound

Pre-recorded audio content, captions for live content and pre-recorded sign language are all criteria used to assign a Level A, AA or AAA rating for auditory content. Transcripts for multimedia content also expand the types of information users with varying levels of auditory accuracy can understand.

Styling to accommodate hearing should follow identity guidelines and leverage the latest touch techniques.

Choose high contrast colors for captions. That way the text is clearly separated from any visuals behind it. Consider adding an overlay to further the visual distinction.

Haptic feedback offers options. Imagine your user is in a large manufacturing space. Even for those with no hearing loss in quiet settings, it’s difficult to discern sound in certain environments. Now imagine your user is expecting your app to deliver an alert. Usually the alerts are accompanied by a bell. They’re easy to pick up on — unless cranes are whirring and an assembly belt is buzzing. Haptic feedback created by the app offers the chance to deliver an alternative sensory experience that still implies a sense of urgency.

Touch

The web doesn’t have a texture. It’s not fuzzy or cool. But touch is an integral component to experiencing and deriving value from it. Ensuring the keyboard can serve as a track pad alternative is one way designers can create navigable websites for users who may have temporary limitation (Help — I broke my hand) and the users who have learned to navigate with limited mobility over the course of their lives. Making the web more operable for all must include a considered for “touch.”

Cognitive

In designing to make the web more accessible for all, we can’t forget about how users understand the web. Conditions like dyslexia aren’t a rarity. It’s understood that 2 million students between ages 3-21 live with the condition. In accommodating web accessibility, consider how the website is sequenced, which can be programmatically determined.

How to keep accessibility standards top of mind

1. Create an accessibility cheat sheet and share it. Ask us about ours! We’re happy to walk you through our process.
2. Accessibility isn’t an afterthought. Bring it up in design meetings. We do. Decide whether you want to be a Level A, AA or AAA early in the process and accommodate the WCAG guidelines throughout.
3. Create a matrix to check accessibility during usability testing.
4. Run your website through a screen reader then look away. Listen. Ask yourself: Does it make sense?
5. Have your developers and QAs tab through the website. Consider the workflow. Is it easy? Are there places where your developers can provide shortcuts?

The best design puts humans — of all ability levels — first. The work isn’t flashy. It’s elegant. Functional. Empathetic. Accessibility promotes interoperability. The more people who can access your website the more applicable your value proposition becomes.

Content matter experts: Mike Hagan, MentorMate Creative Director, Anna Dehn

Photo courtesy of vadim kozlovsky.