Inclusive Design: How to Design for Accessibility

Learn the essentials of inclusive and accessibility design, or subscribe for early access to Designing UX: Learning the Fundamentals to read this article + more in ebook format 🤓

Get early access

Quick summary

Accessibility design is about designing UIs for disabled users. 19% of the world is disabled in some way, so neglecting inclusive design is the same as excluding one-fifth of our key audience.

What you'll learn

  • Why design for accessibility
  • Why inclusive design
  • Different types of disabilities
  • Designing for low-vision/color blindness
  • Designing for motor disabilities
  • Designing for reading + hearing disabilities

What is Accessibility?

Accessibility refers to how easy a user interface is to use for those with disabilities. Broadly speaking, about 19% of the world is disabled in some way, so its fair to say that neglecting accessibility design will surely impact bottom lines. While low-vision is what diminishes most user’s ability to engage with our content, UX designers also need to consider those who have trouble hearing, reading, or physically interacting.

Let’s start with seeing.

Seeing

Designing for visual impairments (e.g. low-vision, color blindness, et cetera) should be one of the core focuses when thinking about accessibility design, because even though VUIs (Voice User Interfaces) are rapidly surging in popularity, we mostly interpret user interfaces with our eyes, and it’s likely to stay that way for the foreseeable future.

Accessibility design for screens

Low-Vision Blindness

While there is a medical definition of what constitutes as “low-vision”, what we mean in the context of accessibility is those who experience visual impairments beyond color blindness. The extraordinary thing about designing for low-vision accessibility, is that even those with optimal visual acuity (also known as “20/20 vision”) can benefit from improved accessibility. We can make user interfaces more accessible to the eyes by:

  • Making text larger
  • Increasing contrast
  • Optimizing proximity

Blindness is different in every case, so there’s no real “minimum” font size to adhere to, however the browser default is 16px and it’s generally recommended not to use font sizes any smaller than that for important blocks of text—this default covers your bases.

Contrast refers to how easy it is for the user to distinguish one element from another element nearby (i.e. to see it clearly, and to understand how important it is in relation to other elements and the layout as a whole). Effective contrast design can be achieved by considering these three important factors—color, size, depth, and depending on how much we want to blur the lines on the definition of contrast, proximity as well.

Below: the website of Tobias van Schneider (decent sizing and color contrast).

Clear contrast and website accessibility

Further reading: we covered the essentials of contrast, color, and proximity in our article last week—Getting to Grips with the Basic Principles of Design.

Color Blindness

Colors have meaning, for example, yellow can mean either optimistic or cheerful. By “can”, we mean that colors can have different meanings to different cultures or scenarios, for instance yellow can also be used as a cautionary color, meaning “hazardous”. Color is used in branding to portray the personality of a business.

However4.5% of the world experiences color blindness, or to use the correct term “color vision deficiency”. Color vision deficiency is described by Wikipedia as “the decreased ability to see color or differences in color”. It’s worth noting that men are far more likely to have a color vision deficiency (for example, Red—Green color blindness affects 8% of males, but only 0.5% of women), so always consider your audience.

Getting into the gritty details of color blindness might be excessive for a beginner article on accessibility, although we’ll quickly run through the different types.

Red—Green color vision deficiencies:

  • Protanomaly: 1% of males will see warm colors appear more green
  • Protanopia: 1% of males see red as black, and warm colors as yellow
  • Deuteranomaly: yellow and green appear warmer, affects 5% of males (very common)
  • Deuteranopia: 1% of males see reds as brownish-yellow, and greens as beige

Blue—Yellow color vision deficiencies:

  • Tritanomaly: blue appears greener, and it’s difficult to tell warm colors from pink*
  • Tritanopia: blue appears green, and yellow appears light grey or violet*

*Tritanomaly and Tritanopia affects men and woman equally, but is extremely rare.

Complete color blindness:

  • Cone monochromacy: when two cones don’t work, so the brain can’t see contrast
  • Rod monochromacy or achromatopsia: cannot see any color (extremely rare)

Measuring Color Contrast and Color Blindness

In the article mentioned above, we recommended some tools to help measure color contrast against the WCAG 2.0 and conduct accessibility testing without the need for user testers. One of these tools—Stark—has an added bonus: it shows us what it’s like to see our design through the eyes of different color vision deficiencies. There are too many different types of color blindness for us to actively design for them, but we can use these tools to test the overall accessibility of our design for color blind users.

In the example below, we’re testing through the eyes of somebody with deuteranopia.

Observing deuteranopia with Stark

Night Shift Mode

Apple devices (macOS/iOS) have a feature that makes it easier to read at night by switching blue light (light that keeps us awake and damages our eyes, FYI) to red light. When working on a design that might involve a lot of reading, especially a night, this is something to consider—red will appear even redder with Night Shift mode activated.

Reading

Designing for Dyslexia

About 5–17% of individuals have dyslexia (the number is so wild because it’s a relatively obscure disability). People with dyslexia find it hard to interpret words/letters. This doesn’t mean that designs need a dyslexic-friendly font, but some fonts are clearer than others, and this is something to consider when thinking about inclusive design.

Write Simple Language

Consider using simple language as well. Although we love to sound smart, and use copy that stands out and wows users, using simple sentences makes digesting content easier for those with reading disabilities, and even those who speak a different tongue.

Follow Typography Best Practises

As well as the contrast tips we’ve already discussed, UI designers should also consider text legibility (as defined by the WCAG 2.0 specification for “Visual Presentation”):

  • Don’t “justify” text (align to both the left and right).
  • Define line spacing at least a space and a half
  • Paragraph space at least 1.5 times larger than the line spacing
Legibility for better accessibility

Interacting

People with motor disabilities such as cerebral palsy, muscular dystrophy, multiple sclerosis, ET, and even arthritis and other afflictions that tend to come with old age, can experience decreased muscle movement and involuntary movement—meaning they can have difficulty using a mouse or interacting with touchscreens using gestures.

Although these types of disabilities are often best overcome using assistive technology, adaptive keyboards, and the like, following standard usability best practises can be extremely helpful (for everybody). This includes designing tap targets at an appropriate size (at least 44px in height, and making sure they’re accessible to thumbs and fingers).

Hearing

Most user interfaces don’t typically use sound as their primary method of interaction (although sound can totally add to the experience). This, and the fact that only 0.38% of the world is functionally deaf (half of which are over the age of 65), means that it’s unlikely that we’ll need to consider hearing disabilities for better accessibility design.

Rare cases include:

  • Products aimed at elderly users
  • Products aimed at deaf users (i.e. speech therapy)
  • Products where sound is required (i.e. learning languages)

Provide a clear visual indicator of what the sound means, for example a satisfying “ding!” upon completion of a todo could be accompanied by a checkmark.

Here’s a fantastic Apple Watch example by Todoist:

Interaction and sound design example from Todoist

Conclusion

Inclusive design means to design websites, apps, and other user interfaces that are accessible and usable by almost everyone without the need for those users to (or feel like they have to) adapt, or for us to design specialized interfaces for those users.

Being disabled is very normal and very common; in fact, many of us are at least less-abled in some way. Not only that, but the advantage of designing for accessibility is that the benefits are significantly rewarding for those that aren’t disabled as well.

This article forms part of our “UX fundamentals” series. Subscribe to our Product Hunt campaign to be notified of when our ebook, Designing UX: Learning the Fundamentals is released. Plus, you’ll also get a free 1-year .design domain!

Daniel Schwarz

Daniel Schwarz

Daniel Schwarz is a digital designer, web developer, and maker by background, but a writer, editor, 3x author, and teacher at heart. Currently a design blog editor at Toptal and SitePoint, writer at .net Magazine and Web Designer Magazine, but occasionally a collaborator with top design companies such as Adobe and InVision.