Accessibility in Design

Written By Kim Ellsworth
Research and Workshop by Kim Ellsworth and Danni Schmitz Martin

In western society especially, we have been conditioned to overlook people with disabilities. We ignore disability so as to avoid the (outdated) social faux pas of noticing people with disabilities. In doing so, we risk neglecting an essential user group that is engaged with digital products for work and play, for community, and for navigating their physical world. 

1 in 7 people are disabled.

That’s 15% of the world’s population! If you have lingering doubts, you should know that anyone can become disabled at any time. For those of us who are lucky enough to grow old, we are likely to develop visual, auditory, motor, and cognitive disabilities.

To increase our awareness and empathy, TAILORU held an internal workshop to dive deeper into disabilities and how we can optimize our research and design processes by including accessibility for all.

Video of the Tailoru collective teaching and learning about accessibility in tech.

What disabilities are we talking about?

When we think of disabilities, there are four categories to consider: Visual, Auditory, Cognitive, Motor. As an additional pseudo-categories, there are temporary disabilities which a user may recover from. We’ve provided some examples to broaden awareness of the kinds of disabilities our users may have. 

IMPORTANT! An individual with a disability has the right to determine the language they use to describe their disability, so as designers we need to respect our users!

Black line icons of an eye, ear, brain, and hand.

Black line icons of an eye, ear, brain, and hand.

Common Visual Disabilities (Non-Exhaustive List)

  • Color Blindness (1 in 12 men are color blind!)

  • Eye Muscle Disabilities, from “Lazy Eye” to shaky eyes (also motor)

  • Poor or weakening vision

  • Astigmatism

  • Night Blindness

  • Floaters

  • Blindness - from lights and shadows to complete blindness

  • Dyslexia and dysgraphia (also cognitive)

Common Auditory Disabilities (Non-Exhaustive List)

  • Tinnitus

  • Complete or partial hearing loss

  • Auditory Processing Disorder

  • High/Low Frequency hearing loss

  • Hyperacusis

Common Cognitive Disabilities and Disorders (Non-Exhaustive List)

  • Dyslexia and dysgraphia (also cognitive)

  • Autism

  • ADHD

  • OCD

  • Anxiety

  • Depression

  • Tourettes (also motor)

  • Epilepsy (also motor)

Common Motor Disabilities (Non-Exhaustive List)

  • Eye Muscle Disabilities, from “Lazy Eye” to shaky eyes (also visual)

  • Tourettes

  • Epilepsy

  • Paralysis, from specific joint to full-body

  • Arthritis

  • Cerebral palsy

  • Muscular dystrophyMultiple sclerosis

  • Spina bifida

  • ALS (Lou Gehrig's Disease)

  • Parkinson's disease

  • Meniere's Disease

Common Temporary Disabilities (Non-Exhaustive List)

  • Broken or sprained limbs

  • Pushing strollers

  • Recovery from Surgery

  • Dilated eyes from a standard checkup at the optometrist

  • Illness that causes loss of a sense (i.e. Covid-19 causing loss of smell)

  • Migraines

  • And more

Tactical Tips for Accessible User Research

  • Include people with disabilities in your research!

  • Interviews: Provide survey or base questions ahead of time

  • Heuristics Analysis - many heuristic principles naturally include accessible practices! Two frameworks, one accessible approach!

  • Conducting user tests:

    • Allow users to use their own devices so that they have access to any assistive technology they may need to use

    • When sourcing testers on Social media, use #a11y

    • Confirm participant needs before testing, so any adjustments can be made in advance and ensure participants are comfortable and engaged during the test

Tactical Tips for Accessible UX/UI Design

Incorporate accessibility in every stage of the design process

  • Follow Web Content Accessibility Guidelines (WCAG)

    • WCAG is an international standard, to learn more about laws in your country for accessibility go to Web Accessibility Laws & Policies 

    • Using heuristics will account for the majority of these

  • Left Hand Test

    • Try navigating websites using only TAB

    • Websites that pass an informal left hand test increase navigation for most disabled and users without disabilities

  • Include Closed Captioning for video content:

    • Inclusive of deaf users, non-native language speakers, many cognitive disabilities and disorders, and others

    • Don’t be Clubhouse

Accessible Font / Typography Design

These tips will help users focus, reduce the chance of mistaken letters, and improve readability for all users.

  • While there are no clear guidelines for the appropriate font size, the recommended minimum for body text is 16 px

  • All page content should be resizable up to 200% without assistive tech. Make sure to remind/call this out to your developers

  • Use fonts where each letter is unique as this supports people with dyslexia

  • Use Text hierarchy by creating a typography design system

Help Screen Readers

  • For all images include Alternative (Alt) Text in the code and captions on the page. Remind your developers to include alt text!

  • When designing form fields, include the label outside of the form field. Screen readers often cannot read the label if it is in the “placeholder text” position.

  • Text Hierarchy enables users with screen readers to quickly scan the page and jump to the part that they are most interested in

  • Avoid disruptive pop ups (looking at you, pop up ads!) as these force the screen reader to reload the page and jump back up, causing the user to leave their place.

Colors

Designing for color accessibility makes our designs inclusive for users with low vision, color blindness, and fully abled viewers!

Additionally, consistency in color use and application assists users’ ability to focus and minimizes cognitive load which is important for users with cognitive disabilities.

  • Where applicable allow users to control the colors and font size. A great example of this is light vs dark mode preferences.

  • Provide visual indicators other than colors and shadows, i.e. patterns and outlines

  • Color should be redundant to function - users should be able to determine the functionality of the page, button, form, etc without relying on the color. 

  • At minimum, achieve a color contrast of 4.5:1

Tools:

  • Chrome Extensions

Reduce Cognitive Load

By using a combination of previously mentioned tips, we can reduce cognitive load which is an existing best practice!

  • Use headings, subheadings, and lists to improve readability

  • Keep text to 70-80 characters per line to maintain user attention

  • Have clear and consistent button hierarchy to help users focus

  • Apply colors (which are redundant to function and have the appropriate contrast settings!) consistently.

  • Utilize white space

Well structured information assists scanability for cognitive and visual impairments and assistive tech. Improved ability to skim the data on your webpage improves usability!

References:

TAILORU Education is part of the TAILORU Group, along with TAILORU Technology and TAILORU Collective. Our mission is to advance humanity through design, technology, and education.

Kim Ellsworth
Previous

Experimental by Design: How to Start Building Products with Confidence
Next

Building MVP for entrepreneurs workshop