drawing of a square-bodied stick person presenting a drawing of a square light bulb on a flipchart board

Accessible Design for a Neurodiversity-Friendly Web

Caren Launus-Gamble of KreativeInc

Caren Launus-Gamble

Around 15% of the UK population is considered neurodiverse. So, accessible design for a neurodiversity-friendly web is a must if we don’t want to exclude one in seven website users.

Neurodiversity stands for variations in mental functions. You can compare it with having a different operating system where the user interfaces work in different ways.

It includes cognitive conditions such as autism, dyslexia, dyspraxia and ADHD, to name a few.

Here are some tips on how your design can become neurodiversity-friendly:

Choosing the right Font, Text Spacing & Size

Font choice is an important design decision for your neurodiverse site visitors as they can be sensitive to certain typefaces. Your choice of font type can significantly impact their level of readability.

Here’s how you can get it right:

  • Choose sans serif fonts: Serif fonts can make it harder to set letters apart due to their decorative extensions. Neurodiverse readers prefer Sans serif fonts. Good examples are Arial, Verdana or Open Sans. Also, try to avoid using Italics. They can be hard to read too.
  • Ensure good spacing: It’s good practice to increase the spacing 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.
  • Make the size large enough: This benefits neurodiverse users and people with low vision. The best size is between 12 and 14 points, and the heading should be at least 20% bigger than the body text.

Making Your Content Understandable

Using clear language for your website content is essential for all site visitors, particularly for a neurodiverse audience.

Writing in plain language makes your website accessible for all site visitors, including people with dyslexia, ADHD, and other types of neurodiversity. It doesn’t make you look less professional if you write in simple terms. However, it would be best if you still considered the intended audience. For example, a website for dog breeders can use simple words as well as industry-specific terminology.

Here are some points on what makes website content more accessible:

  • Make your text easy to read: Dividing large blocks of text into smaller paragraphs and bullet points enables the reader to focus better, especially those with limited attention spans and visual stress conditions. It’s less overwhelming to read the text in stages rather than being confronted with a large chunk of text.
  • Avoid ambiguity: Autistic people often struggle with ambiguity. They can interpret instructions and text that is unclear in several ways and get easily confused. They also have trouble understanding abstract figures of speech, such as metaphors or idioms. By conveying your message clearly, you make it easier for neurodiverse people to understand it.
  • Use clear descriptions for buttons: Describe the button’s purpose instead of saying ‘click here’ or ‘read more’. For example: ‘Download the Report here’, ‘Read the full blog post’. This is a simple but effective way to aid navigation and reduce ambiguity for autistic people.
  • Stick to the active voice: Sentences in the active voice are shorter and easier to understand. This helps all site users, but particularly those with ADHD, dyslexia and autism.
  • Check your text with automated tools: You can use some excellent free tools to see if your website copy has plain language. Two of them are Grammarly and Hemingway Editor.

Choosing the right Colours and Contrasts

Autistic and other neurodiverse people are more sensitive to sensory stimulation and quickly become overwhelmed or distracted by intense colour schemes. Choosing a consistent colour scheme with a good contrast ratio is the best option.

  • Make the right colour choices: There is a lack of research for web design colour choices. However, as autistic web designers, we have experienced that most colours are acceptable for a neurodiverse audience if they are consistent. You should not mix intense colours above a ratio of two. E.g., you could mix purple with yellow if the only other colour used is white to add a calming effect. We found that the best colour scheme is an intense colour paired with white and black. This colour combination makes it also possible to stick to the colour contrast ratio required to make a website accessible.
  • Check your colour contrast: Getting the contrast ratio right is crucial for people with dyslexia, autism, colour blindness and low vision, to name a few. There are a lot of preferences as the neurodiverse spectrum is vast. Sometimes, a black-and-white contrast, for example, can be too extreme for highly sensitive people despite having an excellent contrast ratio.  Fortunately, there are free tools to help the user with setting up display preferences and the proper contrast on your website – please see the links below.

Considering Sensory Difficulties

You cannot get it right for everybody on the neurodiversity spectrum; some people with autism are easily overwhelmed, whereas others with ADHD crave more stimulation. However, you can be considerate and follow some general rules:

  • Limit the use of animations: Animations can be startling and overwhelming for some people on the autistic spectrum. You should limit the use of animated elements and only them when they serve a clear purpose. And if you use them, you should ensure that they are not too invasive.
  • Avoid autoplay: Videos, audio and animations, etc., that start playing without being triggered by the user can be startling, overwhelming or too stimulating and distracting. Ensure that the user can control media content and animations.
  • Always add captions: As neurodiverse users can find it hard to process sound or visuals, you should provide alternatives, such as closed captions for videos, text transcripts for podcasts and alternative text descriptions (alt text and captions) for images. However, some users will prefer visuals over text. So, the following point is important to note too.

Providing Visual Alternatives, Hierarchy and Consistency

Providing visual alternatives to text content and keeping a consistent hierarchy improves the overall user experience for everybody, not just for the neurodiverse.

  • Provide visual alternatives: The neurodiverse spectrum is wide-ranging, as mentioned above. To ensure the inclusion of most preferences, it is good practice to add simple icons next to labels and headers. These cues can break up text into readable chunks and are also helpful in making information easier to process and remember.
  • Keep to a consistent & uncluttered layout: Autistic people often feel safe with a clear structure and have an increased need for consistency and tidiness. It would be best if you labelled the navigation of a website and links in the same way across the entire website. Make the design look tidy by providing generous spacing between sections and design elements.
  • Use a clear visual hierarchy: Autistic, dyslexic, dyspraxic, and other neurodiverse users can have trouble concentrating. A clear visual order on the site helps them with focussing on and processing the information much better. Use headings, colours and styles that convey a clear hierarchy throughout the website.

WCAG Standards and Resources

The Web Content Accessibility Guidelines (WCAG) of the W3C have a range of guidelines and tools to give you further information and help you design neurodiversity-friendly websites.

The very comprehensive Cognitive Accessibility Guide will help you further with designing for neurodiverse audiences. This is a reliable and up-to-date source.

Inclusive Design is the First Step towards an Inclusive World!

At the design stage of a website, anticipating and accommodating different access needs right from the start does not create much more work for you but has a massive impact on the audience.

As mentioned above, in the UK, more than one in seven people are neurodivergent. Why would we want to exclude such a large audience from using our digital platforms?

The social model of disability argues that the barriers and standards within society create disability rather than impairment or difference.

Making your web design accessible means accommodating the variations in mental functions and removing these barriers. Anticipating a variety of different access needs makes the web more inclusive and accessible for everyone.

You can find more information on why you should be very bothered about web accessibility in our blog post (see the link below).