1 in 10 people have dyslexia. The world has about 7.8 billion people living it in, so there are around 780 million people who are dyslexic.
In other words, there are hundreds of millions of potential users who may encounter barriers when interacting with our products. As designers, we have a responsibility to make our designs accessible and inclusive for everyone, including people with dyslexia.
This is by no means a comprehensive list, so I encourage you to read through some of the resources linked and implement the guidelines into your work. Everything listed in this article is the result of extensive research and the collection of web resources, rather than first-hand experience testing with dyslexic users.
There are different types and levels of dyslexia, there isn’t a single guide or solution that fits millions of unique and diverse people.
User testing is the key to creating inclusive and accessible products. For now, let’s take a look at some general guidelines to follow while designing for users with dyslexia.
Dyslexia is a common learning disability that affects how people process written language. People with dyslexia may have difficulties with reading, spelling, writing, and comprehension. Dyslexia can also affect other cognitive skills, such as memory, attention, and organization. Dyslexia is not a sign of low intelligence or laziness, but rather a different way of learning.
Some people with dyslexia describe it as letters seeming to swap out of place. There is actually a dyslexia simulator (made by Victor Widell) that you can check out to see what reading like for some people with dyslexia.
I don’t know about you, but I had a tough time reading that. Some commenters on Widell’s blog mentioned that this is too easy, since the first and last letters in the simulation stay the same.
“To be clear, Widell’s simulation is not perfect. There are many forms of dyslexia and not everyone diagnosed with it experiences reading this way. But seeing nonexistent movement in words and seeing letters like “d”, “b”, “p”, “q” rotated is common among people with dyslexia. Some commenters on Widell’s blog said his text mirrored their experience; others said theirs was slightly different or even more difficult.” — CNN Health
So, then, how we can design our products to be more accessible for users with dyslexia?
Use fonts with distinguishable and clear letters. We should avoid fonts that are too small, too large, too thin, too bold, too fancy, or too similar in shape. Sans serif fonts are the go-to, since letters can appear less crowded. Some great fonts include Arial, Verdana, and Open Sans.
There are even specially made dyslexia-friendly fonts like OpenDyslexic or Dyslexie. These fonts are specifically designed to improve readability for dyslexic users.
Text should be have a font size of at least 12-14 points. Some users, however, may want a larger font. You can solve this by making sure all of your text can be properly resized without loss of function or content. This also benefits users with vision impairments!
In addition, larger text tracking (the spacing between characters) improves readability. It should ideally be around 35% of the average letter width. Careful, though, because too much spacing between letters can reduce readability.
Ensure a high contrast between the text and background in order to enhance readability.
- Use single color backgrounds. As aesthetic as a photo or patterned background may be, it makes the text less readable.
- It’s preferred to use a dark colored text on an off-white or lighter colored background, not pure black and white. There are many people with dyslexia who are sensitive to the high contrast of pure black text on a pure white background. A creme colored background with dark blue text is a great example.
“Participants without dyslexia tend to prefer color pairs with a higher color and brightness contrast while people with dyslexia read faster when color pairs have lower contrasts. For instance, the color pair which was the fastest to read by the participants with dyslexia was black & creme … while black text over yellow background presents the largest fixation duration mean…” — W3C
Chunking information and using bullet points is great for everyone. The Nielson Norman Group defines chunking as “a concept that originates from the field of cognitive psychology. UX professionals can break their text and multimedia content into smaller chunks to help users process, understand, and remember it better.”
You can chunk text by using short paragraphs, short lines of text, bullet lists, and having clear visual hierarchy.
For example, consider how we break up phone numbers:
4487324534 vs (448) 732-4534
The broken up phone number is mush easier to visualize and remember. It’s the same information, but scannable.
Adding image, video, and audio alternatives are a great way to help with dyslexia. Not only that, but they are beneficial to everyone else!
An option to have an article read to you, for example, can benefit all kinds of people. Maybe someone is on the go and would rather listen. Maybe someone is visually impaired and can’t easily read the text (or read it at all). Maybe they just want to read along.
Ensure that your web page is screen reader friendly, regardless of whether you include a feature for content to be read aloud to the user. This is a step that can make your product accessible to a much wider range of users.
Having different ways to interact with all of the information on a page can enhance comprehension and help it stick in the brain. Just be sure that the visuals don’t distract from the main message.
It’s all about being scannable. Users need to know where to find what they need and what is important on the page.
- Headings should be at least 20% larger than the body text. If some extra emphasis is needed, use bold text.
- Utilize white space to remove clutter near text. Add in extra space around between paragraphs and around headings.
- For long documents/articles/text sections try to break up the text with section headings. If there are multiple pages of text content, use a table of contents.
- Make sure hyperlinks look different from headings and normal text. Many websites will use a simple color change, but it might not be visible to someone with colorblindness. A colored, underlined link is good practice.
- Use unjustified, left aligned text. This formatting makes it easier to find the start and finish of each sentence and ensures even spacing between words.
- Stick with a single column of text. Multiple columns, like in newspapers, can make the page seem overcrowded with information.
- Write short, simple sentences. Stick to 60-70 characters per sentence if you can. As someone who used to be a serial run-on sentence creator, I’ve become much more mindful of this one.
Incorporating user testing into your design process is the most valuable and important thing you can do as a UX designer. It enables us to validate our assumptions, pinpoint issues, and enhance our solutions.
By actively involving dyslexic users in user testing, we can get invaluable insights into how they interact with our products and the challenges they may encounter.
Be sure to recruit a diverse group of dyslexic users who represent different types and levels of dyslexia. Dyslexia affects people differently depending on their age, education, background, and a slew of other things. It’s important to include a variety of perspectives and experiences.
By designing for dyslexic users, we are not only making our products more accessible for them, but also for other users who might have similar difficulties or preferences. For example, users who are not native speakers of the presented language, users who have visual impairments, or users who are in a hurry or distracted.