Web design for neurodiversity: Creating a more inclusive web

Profile picture of Kalina Tyrkiel

{date}

{#hash1}

{#hash2}

Illustrations by {name}

Neurodiverse users shouldn’t be seen as edge cases. Here’s how we can make our online experiences more inclusive for everyone.

8 min read

An illustration of many web design elements, including check boxes, popup windows and more creating a distractive web environment for neurodiverse users

Stay informed on all things design.

Thanks for submitting!

Shaping Design is created on Editor X, the advanced web design platform for professionals. Create your next project on Editor X. 

Get our latest stories delivered straight to your inbox →

It’s high time we started considering neurodiverse individuals as an integral part of the general audience and not just as a bunch of edge cases. According to Google Trends, the term neurodiversity has gained traction particularly rapidly since 2018, and it’s never been as popular as it is today.


Making your design accessible for neurodiverse users makes it more accessible for everyone. If you’re not yet familiar with this term, here’s an introduction to the concept and a run-through of how to apply key principles to your web design.



What is neurodiversity?


To understand the idea behind neurodiversity, it’s best to start by explaining two basic medical approaches. Although it seems like we’re digging deep, it’s actually quite simple.


When we hear that someone is dealing with a medical condition, we tend to focus on what caused it. This approach is known as pathogenesis – looking for the origin and the mechanism that caused a disease.


Salutogenesis, on the other hand, has an entirely different focus. Instead of finding the reasons behind a disease, this approach centers around the factors that support health and good functioning. The term was coined by Aaron Antonovsky, who also claimed that there is no such thing as the healthy-ill dichotomy. Instead, he describes the relationship between health and disease as a continuum.


The concept of neurodiversity, coined by Judy Singer and Harvey Blume (quoted above) in the 1990s, is rooted in the salutogenic approach. Instead of categorizing ADHD and autism as diseases, it refers to them as variations in mental functions, without treating them as a pathology or a deficit. What’s more, it’s also based on the social model of disability, that argues that it’s the barriers and structures within society that make an individual disabled, rather than their physical condition.



A more inclusive environment


Did you know that around 15% of the general population is considered neurodiverse, yet only half of this group is aware of it? Even if you’re working in a rather small team, it’s quite likely that one of your colleagues is a neurodiverse person. This is where the title of this article comes from: roughly 15 people in a group of 100 falls somewhere on the neurodiversity spectrum.

The concept of neurodiversity in design is typically raised in the workplace context. Take dyslexia, for example. It is estimated that around 700 million people worldwide live with dyslexia, and many of them are successful entrepreneurs – think Richard Branson or Jamie Oliver. Employees who fall on the autism spectrum are very likely to succeed in a wide range of tech-related fields, including programming and analytics.


These factors encourage many companies to create more inclusive offices so that all employees can reach their full potential.


Equally as important is the way we approach designing for neurodiverse users. With roughly one out of seven people being neurodiverse, this is far from an edge case. In this piece, we’re going to focus on the aspect that extends beyond the workplace: the web.


Here’s how you can make your web design more neurodiverse:



What to consider when designing for neurodiversity



Typography



The choice of font is a crucial design decision in terms of aesthetics, yet it’s even more important for your neurodiverse audience. Here’s what you should keep in mind:


  • Stick to sans serif typefaces: Sans serif fonts (like the one on this page) tend to be the most popular choice for website body text, and are also preferred by dyslexic users. Serifs make it harder to differentiate letters, especially pairs like d and b, or p and q. Some of the recommended fonts include Arial, Verdana, Open Sans, or Lato. And a fun fact: although Comic Sans is the greatest enemy for many designers, it’s actually considered dyslexia-friendly!

  • Keep a safe distance: If you really need to use a serif font, it’s better to limit it to the headings only and increase the kerning between letters. The British Dyslexia Association suggests 35% as the ideal letter width, with the inter-word spacing being at least 3.5 times bigger than the letter width. Just remember the numbers 35 and 3.5 and you’ll get it right.

  • Make it large enough: This matters not only for neurodiverse users, but also for people with vision impairments. The suggested size is between 12 and 14 points, while the heading should be at least 20% bigger than the body text.


Now that you know about typography, moving on to language is a natural next step:



Typography for neurodiversity in web design design


Language