Insights

Accessibility and Empathy: Creating the Best Digital Experience for Disabled Users

Blog Accessibility And Empathy V1

By John Thompson

User Experience Designer

To build accessible websites and applications, there are a lot of conformance rules and guidelines to follow. You may learn them faster if you start by gaining empathy for people with disabilities so you can understand why the rules and guidelines were created in the first place.

Spectrum of ability

We all have different abilities and disabilities, some short-term, some long-term. Rachael Scdoris, a legally blind sled dog racer, put it another way, “We are all temporarily abled.”

Some disabilities are permanent, or become permanent as we age or experience an illness. We may be blind or have poor eyesight. We may be deaf or hard of hearing. We may have cognitive or learning disabilities such as Alzheimer’s. We may be dyslexic. We may be wheelchair-bound. We may have photosensitive epilepsy.

Some disabilities are temporary. We may have undergone eye surgery such as LASIK. Our hearing aid might be broken. Our arm or leg might be broken. We may have an ear infection. We may be running on little-to-no sleep.

And some disabilities are situational. We may have protective eyewear on. We may wear gloves as we tap and swipe a screen. We may be distracted while we drive. We may be at a loud venue. We may be overwhelmed with stress.

Empathizing and improving

We may not experience being disabled, but we can at least empathize or at least try to experience the same or similar feeling with one another.

There are a few things you can do right away to understand how to design, develop, understand and plan with accessibility in mind.

Don’t start by trying to memorize all 61 WCAG 2.0 success criteria, the industry standard for accessibility guidelines. First understand POUR, the four principles of accessibility:

  • Perceivable: We must be able to see it, hear it and feel it.
  • Operable: We must be able to use it.
  • Understandable: We must be able to get it.
  • Robust: We must be able to access it as technology advances.

Then try simulating how those people with disabilities may experience your website or app:

Familiarize yourself with the business case, legal matters and statistics:

Once you’re ready to take steps toward improving accessibility in your websites and apps, try some of the following steps.

If you’re a content strategist or writer:

  • Be consistent in page layout and writing style. Section headings should be organized like a table of contents.

  • Write simply, and try to follow WCAG 2.0 success criterion 3.1.5. The highest level of conformance, WCAG 2.0 AAA, suggests an 8th grade reading level, which you can spot-check using Hemingway.

  • Write clear, descriptive link and button text.

  • Add appropriate alt text for meaningful, non-decorative images.

  • Add transcripts for audio and video content. Microsoft Inclusive Design shows some great examples of accessible videos.

If you’re a designer:

  • Never rely on color alone to convey meaning.

  • Check color contrast before deciding on a palette. Evaluate brand colors and text styles and decide whether a separate web accessible palette and font set is needed. Try Color Safe and Accessible-colors.com.

  • Never rely on mouse, keyboard or speech alone for interactions and user input. Design alternatives to drag and drop.

  • Include or start with a content outline when designing web pages and app screens.

  • Consider the focus order of your designs and how your design linearizes or reflows into a single column.

  • Make text bigger, such as 16-20 pixels for body copy with a minimum of 14 pixels. WCAG 2.0 success criteria 1.4.3 defines “large text” as 18 or 14 points and bold, but modern websites and applications more often use 16 pixels as a base font size. Medium even sets their body copy size at 21 pixels.

  • Design focus, hover and active states for buttons, links and navigation.

  • When designing for mobile, follow Apple iOS and Google Material Design human interface guidelines, and try to stick to native components and conventions.

  • Collaborate with frontend developers and quality assurance (QA) engineers to ensure your designs are implemented with accessibility in mind.

  • Avoid hiding important content inside tabs, modals, tooltips and other components. Keep it simple and show it.

Accessible interaction states for links and buttons.

This is an example of accessible link and button interaction states.

If you’re a developer:

  • Ensure the code is semantic with a logical flow.

  • Use native elements as much as possible.

  • Do not remove CSS focus state outlines.

  • Learn when and how to use ARIA.

  • Work with your designers!

If you’re a quality assurance (QA) engineer:

First know the scope in which to think about accessibility, who it affects and how. Consider how users who are permanently, temporarily or situationally disabled experience what you are creating and learn new ways to include accessibility as part of your process.

A more accessible product for one group of people improves that experience for everyone else. Accessibility is more than designing and developing for people with disabilities — it’s about building things that everyone can use and enjoy.

Want to learn more about accessibility?

Published on 08.22.17