Designing for people of different abilities
As the world becomes more connected, it’s important to design for everyone. The web is no exception, and that includes people with different abilities. This includes individuals who are dyslexic, ADHD or have a learning disability like ASD. Designing for these groups can be tricky: they may not understand what they see on the screen or how to interact with it. Here are some tips for designing websites and apps that will help all users but especially those with disabilities:
Designing for people with ADHD
If you’re designing a new website, make sure it’s easy to navigate.
- Make your homepage clear and concise.
- Use colour contrast to make text stand out from the background. For example, a dark blue font on a white background is easier for many people to read than black because it contrasts more with the light colour. Or use a high-contrast theme where some parts of the webpage are dark and other parts are light for easier readability (e.g., dark header bar above content versus white footer below). If you’re using icons or photos, consider using symbols rather than words so everyone can understand what they mean without having to decode them first (e.g., “Home” instead of “HL”). This also applies when writing instructions — provide short sentences instead of paragraphs so users don’t get bogged down by too much text at once!
When designing for a neurodivergent audience, it’s important to balance blocks of texts with images
When designing for a neurodivergent audience, it’s important to balance blocks of text with images. This can be done in a variety of ways:
- Use images to break up the text. A good rule of thumb is to have at least one image per paragraph or section of text, and more if you have more time on your hands!
- Use images to explain concepts that are difficult for people with disabilities like dyslexia or autism. For example, if you are writing about how the brain processes information from different senses (sight, taste, touch), add an illustration showing this happening inside someone’s head! You could also try including illustrations depicting actions that occur when performing certain tasks such as typing on a keyboard or playing video games with friends online. Just make sure that any visual aids do not distract from what was being said previously in the sentence before it; otherwise they may cause confusion instead by leading readers astray from what message was intended originally by its author(s).
- Use images in place where words alone cannot fully convey meaning effectively enough due only themselves without any supplemental material whatsoever.”
Choosing a font for people with ADHD
When choosing a font for your website, you may want to consider how people with ADHD or dyslexia will use it. For example, the simple Helvetica font is more readable than the more complex Univers typeface:
- Helvetica is easier for readers with dyslexia because it’s less dense and contains fewer characters per line (which means fewer distractions for these readers).
- Helvetica has been shown to increase comprehension among people with ADHD by reducing visual demands on them. The simpler letterforms create a stronger reading experience overall; this in turn makes reading easier and more pleasant for those who struggle with concentration.
In general, we know that sans-serif fonts are easier to read
Sans-serif fonts are more easily legible to people with dyslexia. This is also true for people with ADHD and other learning difficulties, who tend to be attracted by the simpler, less fussy letterforms. Sans-serif fonts can help those with dyspraxia read more easily too, since their simplified shapes often mean fewer letters need to be identified at once. In fact, it’s worth noting that most of the major web browsers now default your font size and typeface family as ‘sans-serif’.
UX Research Strategist Jennifer Keene-Moore and CX Manager Anita Cator delivered a presentation on designing for dyslexia that included these great tips:
- Allow for customisation of visual preferences (colours, fonts, and text magnification).
- Use large san serif fonts with plenty of leading (consider checking out fonts like Open Dyslexic).
- Don’t centre your text, always left justify.
- Content should be clear and concise. Use headers, short sentences, and bulleted/numbered lists.
- Use dark grey for your text. True black on a white background can create a blurred effect.
- Preferred line length is 45 characters. Maximum line length should not exceed 100 characters.
- Use visual and auditory alerts.
- Add captions on video content for the hard of hearing.
- Reinforce text with icons.
- Use bold text rather than italics or underlines for emphasis.
Too many images can confuse readers.
People with autism spectrum disorder (ASD) respond to visual stimuli entirely differently than someone without ASD. They are overstimulated by visual information, but they have a much harder time processing auditory information. As such, they are more sensitive to the volume of a sound and the color of a light — for example, fluorescent lights can be painful for some people with ASD because they’re so bright and harsh on their eyes. In addition, individuals with ASD are more sensitive to texture as well; certain textures may feel uncomfortable or irritating against their skin.
Conclusion
As you can see, there are a lot of things to consider when designing for people with these conditions. If you’re interested in learning more about creating accessible content, check out our guide on designing for dyslexia and dyspraxia.
Further reading:
👉 7 neurodivergent disorders to consider when writing and designing your UX
👉 Dyspraxia and web accessibility.
