How-to: Design for Dyslexia Part I

Dyslexia is a medical condition affecting the perception and decoding of symbols including text and digits, making reading, writing and spelling difficult. It is a learning disability unconnected with intelligence  - in fact most of the dyslexics I know are of above-average intelligence.

It is a common learning difficulty in a range of conditions which could affect as many as 15-20% of the population, could we but diagnose, measure and classify these conditions better.

Which, meantime, leaves us web-designers - and so many of use are web-designers now - with the challenge of designing for those with reading difficulties.

I have a renewed challenge with a client site which has a red, white and mid-grey colour scheme that is reportedly a dyslexia nightmare. White text on a red background (and the reverse) are particularly bad, I'm told. It means that the typography and layout of the site need more care and consideration.

I can't emulate exactly how dyslexics view text; among the effects are diffused focus on spacing over the words, the so-called 'river effect' where the white-space dominates the text, the inability to focus on letters and letter combinations in which they can appear to be blurred, reversed or moving. Dyslexia is not a uniform condition and it lacks uniform solutions.

It's a challenge in which the legibility guidelines for dyslexia often conflict with usability guidelines for websites. It is difficult, but not impossible to adhere to both.

We don't just mean persistent and violently bad design errors. Anyone still commiting 1990's style faux-pas such as flashing, flickering & strobing text or images (or both combined) should be taken outside and shot. We include unnecessary animations. Not only is it bad design and distracting, but can cause photo-epileptic seizures in epileptics and other susceptible individuals.

The same goes for blinking and marquee (ticker-tape) text, even if you give users the option to close or immobilise them. And woe to anyone who combines two or more of these effects together.

Usability versus Dyslexia
For example, consider usability 'best practice' in providing standard visual cues to navigation; this often serves dyslexics poorly. Classic underlining of links makes words harder to read.

The choice of your base colour scheme makes a huge difference; that does not mean, as in 'normal' design, the highest contrast colour scheme you can find. Pure black text on a pure white background is not dyslexia-friendly.

Clarity of text has to take precedence over our fancy-pants design. In fact, the most important part is the ability for the dyslectic to make as many of their own choices over presentation, which, as all good web designers (and some bad ones) know, is best achieved by separating the presentation from the content by using separate Cascading Style Sheets (CSS).

There are some things that deyslexics can do for themselves, starting with the attempt to circumvent the issue completely; the use of text-to-speech screen readers available in most modern operating systems or as add-on programs.

Secondly, the range of colour and font settings available in Windows, Android, iOS  and other operating systems; changing the default theme for a custom theme with more readability.

Thirdly, there is the choice of colour settings available in-browser  for IE, Firefox, Chromium and Safari specifically to deal with life on-line.

But none of those, in throwing the issue back onto the user, tackles the central issue that you as web-designer need to address; the design and usability of your site.

Moreover, if you take the time and trouble to design for the reading-impaired, you will be doing huge favours for conventionally literate users as well.

In part II, we'll look at some of those design measures for readability. RC