Inclusive by DesignJuly 3, 2011
Good Design Practices Offer Better Readability
By adhering to good design practices, a web designer can make websites accessible to those with reading difficulties
Smart web designers take into account the reader who has reading problems or dyslexia. In order to make web content accessible to the dyslexic population, the designer will have to avoid certain design practices. To get a better understanding of what this entails, the designer should try to see the webpage from the perspective of those with reading difficulties.
When the person with dyslexia reads text, there may be certain visual distortion effects. Not every person has the same kind of distortions and the effects vary from individual to individual. While specific design practices make reading difficult for anyone, they tend to cause visual distortion effects for those with dyslexia. Here we explain three visual distortion effects and detail design practices that may cause these distortions:
1. River Effect—when large gaps peek through consecutive lines of text, the effect is of a river of white flowing down the page. These rivers of white space are created when the designer uses justified text or double-spacing after periods. Both of these practices create uneven spaces between letters and words. The river effect causes the dyslexic reader to lose his place in the text over and over; a source of great frustration. Choose left aligned text, and single spacing after periods, instead.
2. Blur Effect—for some people with dyslexia, blurred text is a problem. The blur effect makes reading tiresome. A good designer can help reduce the blur effect by avoiding the use of pure black (#000000) text on a pure white (#FFFFFF) background. The high contrast between these two “colors” makes the text brighter and can lead to an effect in which the words swirl into each other or blur. White with a touch of gray mixed in can help cut the glare, as can the use of dark gray for text.
Another way to reduce blurring is to keep paragraphs short. The dyslexic reader finds it hard to keep his place in a long paragraph. Stick to one idea per paragraph to make reading easier for both typical and dyslexic readers.
3. Washout Effect—for some dyslexic readers, a distortion known as the washout effect makes the text fainter and indistinct. This effect slows reading and forces the dyslexic user to guess at words since seeing the words is so difficult. Avoid serif fonts and italicized text to help prevent the washout effect. The decorative hooks on the ends of the serif letter strokes obscure letter shapes for those with dyslexia and make the letters seem to run together. A sans-serif (hook-less) font makes the letters appear more distinct. No hooks mean greater space between letters which helps make the words easier to distinguish.
The jagged line of italicized text is hard for dyslexics to read. The letters also have a slight tilt making it difficult for the dyslexic to read words with accuracy. When italics are used together with small-sized letters, for all intense purposes, the text becomes illegible to the dyslexic user. Instead of using italics to highlight words, choose bold text. The letters remain distinct and there is better contrast.
The dyslexic user pass on using a website that contains the above design flaws since it is difficult or impossible for him to read the text therein. Yet all of these flaws are fast and easy to fix. Getting the word out about these issues is just a matter of time and then dyslexic readers will no longer have to fight to read blogs and webpages: they will be afforded the reading pleasure they deserve as they surf the web.
- The Ultimate Non-Designers Guide to Branding (whereisjenny.com)
- Sylvias Maker Show: Super simple screenprinting (mt-soft.com.ar)
- 3 Clues It’s Time To Redesign Your Website (solaswebdesign.net)