Reading Time: 5 minutes

Albert Einstein DyslexiaIn theory, if you design websites for ‘accessibility’, it will be clear for everyone. Let’s put it to the test!

First of all, lets clear up a few myths about dyslexia. I’ve attended an NLP lecture where the speaker declared dyslexia is a self-limiting belief and doesn’t exist. I walked out.

I’m not dyslexic. However, I’ve met enough highly skilled and driven people who are, to know this practitioner was talking nonsense.

Popular Misconceptions

1. It’s a visual issue , where children reverse letters or write backwards.
Dyslexia isn’t a problem with vision or seeing letters in the wrong direction.

2. It’s due to lack of intelligence
Many have struggled with dyslexia, before becoming highly successful:

  • Albert Einstein (His dyslexia is disputed, but is good as a featured image)
  • Pablo Picasso
  • Richard Branson
  • Tom Cruise
  • Steven Speilberg
  • …and there’s more >

What is Dyslexia?

Hampering reading, the lifelong condition, is the most common learning issue. Depending on how you measure it, on average 5-15% of people are dyslexic.

Dyslexia’s mainly a problem with reading accurately and fluently. So, a child with dyslexia may struggle to answer questions, about something they’ve read. However, when it’s read to them, they may have no difficulty.

Challenging areas of difficulty may include: comprehension; spelling; writing and Mathematics.

Dyslexia. A Design Checklist

Based on the 2018 British Dyslexia Association (BDA) official guidelines, this will also improve clarity for all users (and Google).

  • Use active rather than passive voice. Google ranks pages lower if more than 10% of sentences are passive.
    Active: Dave emailed the contract
    Passive: The contract was emailed by Dave
  • Be direct. Use short sentences and paragraphs. Applies to all visitors. Deliver information in small bite-sized chunks, as online, visitors are distracted and tend to scan >
  • Use bullet points and numbering, rather than continuous prose. Applies to all visitors. However there’s an art to writing good bullet points. Here’s a great guide from copyblogger >

BDA recommend adequate contrast between text and background. Too extreme and text dazzles. Due to screen glare, this also applies online. Using various colour combinations, W3.org’s detailed study, was inconclusive.

However, BDA recommend using dark coloured text on a light background (not white). This also applies online. Avoid white text, other than for large headings.

Avoid distracting background images or patterns and surrounds. Colour tints can knock back backgrounds improving clarity to overlaid text. Colour blindness will be covered in the future.

With dyslexia, serifs (see above) on typefaces make reading difficult. This is also true online, due to screen glare.

Use sans serif typefaces such as Lato & Opens Sans used here.

This font size is 15 pixels. BDA recommends :

  • a minimum of 16 pixels font size
  • up to 19 pixels font size, depending on typeface.

Visitors may magnify, for fonts set to 13 pixels or even 12 pixels. However, it’s more likely, visitors will abandon reading if type is too small.

  • Headings should be at least 20% larger than the normal text. If further emphasis is required, then use bold. This is good general design practice. It establishes a clear hierarchy.
  • Add extra space around headings and between paragraphs. Good design practice. Gives enough ‘white space’ around sections for clarity.
  • Ensure hyperlinks look different from headings and normal text. Called ‘affordance’ in UX design, this is important to clarify what is a link.

Referred to in typography as leading, line spacing is the horizontal space between each line. To improve readability, BDA recommend the space between each line should be 150% height of the font.

Shown here, this provides adequate line spacing, without looking too spread out.

The font size here is sixteen pixels with a line height of 150% font size.

Use bold for emphasis.

Alternative methods hamper reading due to letter crowding, such as italics or underlining. Underlining is unacceptable online, as it looks like a hyperlink.

BDA also recommends avoiding making EVERYTHING UPPERCASE or SMALL CAPS. Usability studies explain this impairs readability, due to the similarity in shape of uppercase compared to lowercase characters.

Use images to support text. This also applies when enticing visitors online. Infographics and flowcharts can also help. Just avoid overburdening. It should summarise, not confuse like this!

Further Reading

BDA’s Dyslexia Style Guide

Simulation as seen through a child’s eyes. Pick an age and experience dyslexia through these simulations by understood.org.

OpenDyslexic A font for dyslexia. Apart from being fugly, writing about OpenDyslexic, Jessica Wery states,

“Using a font with claims to improve reading for individuals with dyslexia without evidence to support this claim could result in further frustrations by teachers, parents, and individuals with dyslexia when no differences is observed after changing fonts used.” Read More >