Inclusive, by Design

Derek Featherstone gave a talk on being inclusive, by design, the recording of the talk is also published on aneventapart.com. Disabilities come in many forms and include but are not limited to blindness, deafness, physical disabilities, and autism; and we need to intentionally include people with disabilities.

Having a disability can make technology very difficult or even impossible to use unless the team creating the app is able to plan ahead and accommodate for users with disabilities. Designing and developing to accommodate for disabilities is called Accessibility, and is a very important part.

We need to be reminded that we are temporarily-able, and our current state of ability could change at any time. We hear people say emphatically,

“We aren’t intentionally excluding people with disabilities!”

but the reality is that many teams aren’t intentionally including them either.

Some designers specialize in creating solutions specifically for people with disabilities. During this talk, we watched a 2 minute video from BBC: Project Life that told the story of two designers who created a playground intentionally designed for a blind boy. Eight year old Josh was born blind and he has lots of friends, but he has a difficult time playing with them outside at the current school playground. He describes the experience of using the playground stating,

“it’s too big, and I can’t find my friends.”

Designers worked with the boy at home to brainstorm how to use his other senses of touch and hearing to create a new outdoor space that would allow him to play with his classmates. As a result, Josh and his mum were thrilled that he was finally able to play with his friends. While this was a relatively small accommodation, it allowed Josh to be included in play time instead of being isolated due to his disability.

Video from BBC #BigLifeFix

People with disabilities often take matters into their own hands to create their own solutions since many companies do not have an adequate accessibility solution for them. For example, Xbox studied how people with disabilities were hacking and re-designing game controllers to create an adaptive controller that makes gaming accessible to people with a broad range of disabilities. They were even able to re-design the packaging to make it accessible as well, which is yet another design problem that people with disabilities can struggle with. For more information on these innovative solutions, watch the promo video of the Xbox Adaptive Controller.

Another brilliant example comes from a deaf engineer at Microsoft who discovered she could lip read better when someone’s face is isolated from the background images, so she created a background blurring feature instead of her parents having to dim the lights. Now the popular “Blur Background” feature has been helpful for all of us working from home with messy backgrounds.

Photo of “Blur Background” on a laptop

People with autism sometimes struggle with unpredictability and tend to have higher success when presented with a plan. In Canada, autistic individuals who are traveling through the airport can now get a special sticker on their boarding pass and the airport team will give them checklists to follow for every step of the flying process. Having these expectations through checklists can make flying significantly less stressful for people with autism. Again, we see a very simple yet effective solution that has improved the experience of flying.

Going to the Gate checklist (check your gate number, ask if you need help, walk to gate, all done)
At the Gate checklist (Wait for your turn to board, choose an activity, listen for your turn to board, all done)

So how can we do better at intentionally including those with disabilities? As designers, we should spend more time including people with disabilities and exploring the problem space instead of waiting to be inclusive in the solution space. Use this checklist that Derek Featherstone created as a reminder to intentionally include people with disabilities when conducting user research:

The Tool Inventory checklist for conducting user research

Making Motion Inclusive

Another excellent presentation from the An Event Apart series was about making motion and animation inclusive to those with disabilities. Animation is yet another place in which people with disabilities have been excluded. Val Head gave a talk about making motion inclusive, watch the full talk published on aneventapart.com.

App and website animations can be small when scrolling through a page to draw attention to an element or tapping a button. Animations help with visual continuity, reducing cognitive load, guiding tasks, and connecting across contexts. However, we need to design in a way that offers multiple ways to participate so that everyone can benefit.

We’ll decode the Web Content Accessibility Guidelines (WCAG) together, it was developed in cooperation with individuals and organizations around the world, with a goal of providing a single shared standard for web content accessibility that meets the needs of individuals, organizations, and governments internationally. The WCAG documents explain how to make web content more accessible to people with disabilities.

Three items in WCAG that relates to animation

1. Pause, Stop Hide

  • Provide a way to pause, stop or hide any moving, blinking, scrolling content that lasts more than 5 seconds, unless that content is an essential activity
  • Common places where this might apply:
  • Auto-advancing carousels
  • Autoplaying videos
  • Animated background videos or animations

2. Three flashes or below threshold

  • Don’t include anything that flashes more than three times in a second, unless the flashing is below the general flash threshold.
  • How to help:
  • Opt-in message, ex. “By clicking on “Let’s Play” you accept the use of cookies to start this game, warning this game is not recommended for people with photosensitive epilepsy.”

3. Animation from interactions

  • Motion animation triggered by interaction can be disabled unless the animation is essential for functionality or the information being conveyed.
  • Triggers are:
  • Very drastic scaling & zooming
  • Spinning & vortex
  • Multi-speed & direction
  • Parallax scrolling
  • Constant animation near text
  • Endless looping
  • Large movies
  • Videos
  • GIFs

How to meet this criteria?

  • Avoid using unnecessary animation
  • Provide a control for users to turn off non-essential animations from user interaction
  • Take advantage of the reduce motion feature in the user-agent or operating system. There’s a setting in iOS & Windows, most browsers support (Safari > 10.1, iOS Safari > 10.3, Firefox > 63, Chrome > 74) to reduce where needed.
CSS @media (prefers-reduceded-motion: reduce) { /* alternative behaviour */ }

What animations are acceptable for all users?

  • Animated color changes
  • Opacity fades
  • Small movements

More info on AnEventApart

AnEventApart has held a conference four times a year for fifteen years now and is still ongoing, the topics range from design, code, and content and are mainly intended for those in UX and front-end experts. You can watch past talks, read their articles, and more resources are listed, and find out about future conferences on aneventapart.com.