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.
[Related: Designing for seniors]
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:
Language
Plain language is one of the greatest allies of neurodiversity. It is defined by the US government as “writing that is clear, concise, well-organized, and follows other best practices appropriate to the subject or field and intended audience.”
The intended audience part is crucial here. What is plain to an audience of lawyers may be completely unclear to the general audience. Some UX writers, however, are concerned that plain language will have a negative impact on their authority.
Writing in simple terms doesn’t make you sound less professional. On the contrary – it makes your writing more accessible, as it considers a part of the audience that’s usually not included. A language that’s helpful for people with dyslexia, ADHD, and other types of neurodiversity is also friendly for all readers.
Here’s what you should consider – and why:
Stick to active voice: This makes life easier for virtually everyone. Sentences in the passive voice are longer and harder to comprehend. Users with ADHD will get bored, dyslexics will have even more trouble reading, and so will readers on the spectrum.
Avoid metaphors: People who fall on the autism spectrum usually have trouble understanding metaphors, such as idioms and other abstract figures of speech. Instead of calling it a day, it’s more inclusive to say that something is done.
Format your writing: Divide large chunks of text into smaller paragraphs. Longer ones are frustrating and make it impossible to focus, especially for those with limited attention spans. Using bullet points also helps, just like we’re using them here.
Use descriptive buttons: Instead of using vague microcopy, such as Click here, describe the purpose of the button. Some examples: Upload images, Register, Download the e-book. This simple change makes navigation smoother and reduces anxiety.
Last but not least, you can test your text with free automated tools. It’s a quick way to see if your website copy is written in plain language. Check out our suggestions at the end of this article.
Top creative directors share how they design for inclusion.
Microsoft chief accessibility officer Jenny Lay-Flurrie
Executive director of the Inneract Project Maurice Woods
Google head of product inclusion Annie Jean-Baptiste
Color palette and contrast
The Living Autism initiative of the UK suggests using soft, mild colors in neurodiversity-friendly web design. As people on the spectrum are more sensitive to sensory stimulation in general, they also tend to be overwhelmed by very bright colors. Studies suggest that children with ASD, particularly boys, prefer brown and green to yellow, as the latter may be considered too intense.
So, what is the right color scheme? There is still a lack of research focused specifically on web design. When it comes to the physical environment, a group called GA Architects tested a range of colors with a group of children on the spectrum. Here’s what happened to be the preferred palette:
As one might expect, the preference for blue and green hues is clearly visible. The colors are not fully saturated, which makes them less stimulating and therefore potentially distracting. These findings may serve as inspiration for your next neurodiversity-friendly color palette.
That’s it for the colors, now what about the contrast?
Getting it right is crucial for people with dyslexia. Surprisingly, the classic black-and-white contrast can sometimes be too extreme (again, think about users on the spectrum and highly sensitive audiences in general). Paul Crichton of UserZoom mentions that he’s been working with a dyslexic user who preferred a combination of red and pale pink. At the end of this article, you’ll find a list of free tools to help you set up the right contrast on your website.
Sensory stimulation
This part can be tricky. While users on the autism spectrum have heightened sensory awareness, people with ADHD will be looking for more stimulation. Keeping the right balance here can be challenging, yet there is a set of general rules to go by:
Be careful with animations: Too much stimulation can induce anxiety in people on the autism spectrum, which may even lead to physical pain, withdrawal, or meltdown. What seems a mere inconvenience to you may be a challenging experience for someone with ASD. Use of animated elements should be limited to instances when it serves a purpose. Also remember not to make them too invasive.
Avoid autoplay: Unexpected movement is surprising and scary, not to mention the sound! Not only is it too stimulating but also distracting – while users on the spectrum will be overwhelmed, the ADHD group will find it hard to focus. To gain a deeper understanding of this, we talked to one of the users of HCM Deck, a learning and development platform. The user, who has an attention deficit disorder, told us that even a small distraction on a website often makes him lose track completely.
Add subtitles and captions: Sometimes neurodiverse users can find it hard to understand sound or visuals. To convey meaning effectively, it makes sense to provide an alternative, such as a caption for the image or subtitles for the video. Of course, it works the other way round, too – it pays off to provide a picture to illustrate the text. This brings us to another aspect – the visual cues:
Visual cues, hierarchy, and consistency
Consistent hierarchy creates a feeling of safety and improves the overall user experience, not just for the neurodiverse. Here’s how to achieve that:
Visual indicators: As mentioned above, be sure to convey information through different means. For example, it’s a good practice to add icons next to labels and headers. These cues are helpful when the users are scanning text, and they also make information easier to remember. Just one note: remember to choose simple icons to avoid overstimulation.
Consistency: We all prefer consistency in web design, yet the lack of it becomes even more problematic for the neurodiverse audience. The National Autistic Society of the UK states that autistic people have an increased need for consistency. Among other things, they advise designers to make sure that navigation mechanisms and links are always indicated in the same way across the website.
Hierarchy: Clear visual hierarchy helps all groups of neurodivergent users, from the ones on the spectrum, to the dyslexics and the people who have trouble concentrating. Using consistent headings, colors, and styles helps them follow through and understand the content without much trouble.
How to make sure your web design is neurodiversity-friendly
You don’t need to figure out all of these aspects yourself. There’s a range of guidelines and tools to help you out:
WCAG standard and cognitive accessibility
WCAG (Web Content Accessibility Guidelines) are the decalogue of inclusive web design. It’s a widely acclaimed resource for good practices, and it also has a part dedicated specifically to neurodiversity.
Their Cognitive Accessibility guide is a goldmine of information about web design for neurodiverse audiences. The page is constantly being updated thanks to Coga TF, which is short for Cognitive and Learning Disabilities Accessibility Task Force. If you’re looking for a reliable and up-to-date source, this is the best choice.
Contrast checkers
There’s plenty of free contrast checkers available online, such as the one provided by WebAIM. You can use them to see if your website meets different kinds of WCAG standards, such as WCAG AA and AAA.
If you’d like to use a dedicated plugin for your design tool (whether you use Figma, Sketch, or Adobe XD), you’re sure to enjoy Stark. This add-on comes with a range of different accessibility compliance tools.
Plain language tools
Hemingway will help you make sure that your website copy is easy to understand. The web app version is free to use and it underlines all the parts that can be improved to make the text clearer.
Some parting words
As mentioned at the beginning of this article, neurodiversity is not just a rare exception. As designers, we need to be catering to all different types of people, instead of marginalizing certain users. We hope that these tools and knowledge will provide you with a new perspective on web design. Why not make your next project a bit more inclusive for everyone?
.jpg)
