Dyslexia is a learning disability which is often overlooked while designing accessible websites. However dyslexia is fairly common among young users and should be definitely considered while designing sites which might cater to children. Dyslexia also occurs among adults and hence designing for it should also be a factor while designing any site irrespective of whether it caters to children or adults.
So what exactly is Dyslexia?
The British Dyslexia Association defines dyslexia as:
“A combination of abilities and difficulties that affect the learning process in one or more of reading, spelling and writing.
Accompanying weaknesses may be identified in areas of speed of processing, short-term memory, sequencing and organization, auditory and/or visual perception, spoken language and motor skills. It is particularly related to mastering and using written language, which may include alphabetic, numeric and musical notation.”
So how do I design for dyslexic users?
When asked to design for accessibility, designers are overawed by the large number of requirements and expected levels of compliance which are needed to make a site accessible.
While it is of critical importance that your site should be accessible to provide a uniform experience to all users despite them being differently abled, designing for dyslexic users is relatively simpler provided some design principles are adhered to as elaborated below:
1. Avoid using justified text
Justified text was introduced while designing for print as the straight line of each margin can guide the eye across columns of text and the aligned columns help define the different areas of text creating a logical flow of words, thus enhancing readability.
That said, justified text in the web causes large uneven spaces between letters and words making it hard for people to read and even more harder for dyslexic users. When these words line up above one another, a distracting river of whitespace appears which causes dyslexic users to lose their bearing while reading content. This is called the river effect.
2. Avoid double spacing after periods
While browsers eliminate redundant spaces, additional spaces present between the HTML content tags are retained. Hence double spacing after periods can confuse dyslexic users, as they can create “rivers” within text that make it difficult for users to find the end of sentences.
3. Avoid extremely high contrast between the text color and the background
While high contrast does enhance readability, extremely high contrast such as pure black text (#00000) on a white background (#FFFFFF) is hard for dyslexic users are they are sensitive to the brightness that high contrast colors cause resulting in the words to swirl around or blur for them.
To avoid this, ensure the text color is a lighter shade of black like dark grey to ensure dyslexic users are not affected by the contrast.
This W3C article has good recommendations on the recommended contrast while designing for people with dyslexia.
4. Avoid using moving images
While moving images and flashy animations are distractions for everyone, they are even more severe for dyslexic users as they constantly distract them from their focus on the page and almost make the page unreadable for them. Hence while designing pages with animations, make sure they are very subtle and don’t distract the user from the content. However if possible avoid using animations at all.
5. Break your content down
While long lines are text are hard for users to read, it’s even harder for dyslexic users as they suffer from low concentration and can lose their place while reading long lines of text. Hence break down the text into smaller manageable pieces with a lot of white space and a suitable heading. To quote this research article on document design for dyslexic users
“Text should be chunked into groups according to subject matter. This breaks up long groups of text into more easily read sections. Chunked text should usually be grouped under a heading and spaced out, so the reader can easily tell apart each chunk. “
An excellent example is how apple does it
6. Choose your font correctly
While there are a number of font options available while designing for dyslexic users, If possible, use a sans-serif font. The decorative “hooks” on the main strokes of serif letters may create problems for dyslexic users.
This is because Serifs tend to obscure the shapes of letters, making the letters run together. But a sans-serif font would allow dyslexic users to see the shapes of letters clearer. This is because a lack of hooks increases the spacing between letters and makes them more distinguishable
Hence dyslexic users might see words with a washout effect as shown below:
Some good font choices while designing for dyslexic users are
- Century Gothic
- Lexia Readable ( free font designed specifically for dyslexic users)
- Dyslexie (free font designed specifically for dyslexic users)
- Sassoon (paid font designed for dyslexic children)
- Sylexiad (paid font designed for dyslexic adults)
Designing for dyslexic users does not involve significant effort and if some preliminary efforts are taken during the design phase, you can make it so much easier for someone with dyslexia to view the site without frustration. It’s not easy to get information when you read with visual distortion. Everyone has the right to information, whether they’re dyslexic or not.
By: Mervin John Singh