Designing For Dyslexia
This information in this article has been taken from a number of sources:
- The Royal National Institute of the Blind (RNIB)
- Issue 35 of Dyslexia Parent magazine
- The British Dyslexia Association
- The University Of Manchester’s Web Accessibility Guidelines
- WebAIM (Web Accessibility In Mind)
- my own prior knowledge.
What problems would a dyslexic user face?
People with dyslexia frequently experience discomfort when reading because they find it more difficult to ‘decode’ the words on the page, and can also find it difficult to remain focussed on a particular piece of text. Some people may also have to concentrate more to remember what they have already read, which means they will tire more easily.
So how do we help?
- Text size – the minimum recommended font size for users with dyslexia is 12pt. Printed material should always be made available at this size.
- Text scaling – on a website you may wish to use a default size smaller than 12pt. If so, use a font size which scales easily, such as percent (%) or em. This way users with dyslexia (or poorer vision) can adjust their own settings to increase the font size. Note that if you start with a base font size of around 80% (used by a lot of websites), Internet Explorer will allow a font size increase to over 12pt at the largest setting, but at 70%, a user with Internet Explorer will not be able to reach a font size of 12pt.
- Font style – use a rounded font that is easy on the eye. Use a sans-serif style font (i.e. without curly bits). Commonly used fonts for this purpose are Arial, Comic Sans, Verdana, Helvetica, Tahoma and Trebuchet. It is important to note that not every dyslexic user dislikes serif fonts: many have no problem with them provided the line spacing is sufficient.
- Capitalisation – avoid the use of capitalisation for emphasis. All capitals can make text more difficult to read and gives the impression of ’shouting’.
- Background – an off-white background can be easier to read from than a ’shiny’ white background. Text is also harder to read on a patterned or tiled background.
- Spacing – use line spacing between paragraphs to break up text.
- Justification – don’t right justify text. This leads to variable spacing between words and can create visual patterns of white space which are difficult to ignore and are sometimes termed ‘rivers of white’ running down the page making it extremely difficult to read.
- Italics – avoid them. They make text more difficult to read.
- Paragraphs – keep them short.
- Bullets – use lists to bullet point items rather than presenting continuous prose. Number menu items where appropriate.
- Writing style – use short words where possible, and write in simple sentences. Refer to the reader as ‘you’.
- Navigation – ensure your navigation is simple and stays the same across the site. It is helpful to include a site map and a search facility.
- Moving text – this creates problems for dyslexic users and users with other visual impairments. Don’t use it.
- Columns – Dyslexic people find that the further text is presented from one side of the screen to the other, the more difficult it becomes to read. Ideally a column should be no more than 70-80 characters wide.
- Pictures – where a picture will aid comprehension, use one.
- Document structure – as a general rule, the more structured your document is, the easier it will be to understand. Use headings, bulleted lists, numbered lists and indented quotes where appropriate.
- Abbreviations – always expand the first occurrence of any abbreviation on a page. For subsequent occurrences, consider use of <acronym> and <abbr> elements to aid understanding.
You can follow any responses to this entry through the RSS 2.0 feed.
You can leave a response, or trackback from your own site.
Joe Clark says:
March 23rd, 2007 at 8:22 pm
So we can’t use italics for their actually necessary purposes in English even with designed italic typefaces? I beg to differ.
And don’t be recommending Comic Sans for Web pages, please.
JackP says:
March 23rd, 2007 at 8:48 pm
I didn’t say don’t use italics. I said avoid them. Frequently, italicised text is more difficult to read. Highlighting words (such as if you use
<em>on this site), or following typographic conventions (for example the names of ships) is less of a problem than whole paragraphs in italics.And why don’t you like Comic Sans? I don’t particularly like it on web pages, but that’s more because I don’t like the look of it. I have seen it used on pages written by dyslexics, with it being recommended as a clear font (unfortunately as this post is about 15 months old I can’t remember where). If there are accessibility — rather than personal preference — reasons for not using it, let me know and I’ll update the article.
[Edit: don't think this was the original location, but the British Dyslexia Association don't seem to have a problem with Comic Sans:
…although this is a general reference, rather than a "specifically for the web" one]
JackP says:
March 23rd, 2007 at 10:01 pm
I’ve asked a web designer I know with dyslexia to review this list for me and he has kindly provided his comments on my designing for dyslexia article. Thanks for that, Phil
phil says:
March 23rd, 2007 at 10:25 pm
Sorry Joe, but your wrong, and Jack’s right. Italics should be avoided, and for good reason. And Comic Sans may not suit many sites, but its readability is excellent.
Re italics, there are a great many ‘proper’ uses of English, which are adverse in their effect upon the the fluentcy, of acquisition, of text-based content. Like the sentence I just wrote. Avoiding unecessary barriers to access, including for those with cognitive differences/difficulties, is incredibly important.
If I’m confronted with a large page of text, most of which is in italics, the chances are I’ll not stop to read it without A.T. handy. I’m typical of ~10% of the population. You can signify that content is quoted by useing quotes. Styleing it in a div. Changing its colour and tone and lableing it as such. Putting it in a cite tag, etc… No need to take up a page with inaccessible text. I’m not clear on the current legal status of dyslexia in the States and Canada but in the UK its covered by the DDA, and as such making such accomodations is not just good business sense (10% is a big chunk of a market to spurn), or a moral standing, its a legal consideration to be made also. (I’m dyslexic and have worked in the field for ~10 years)
phil says:
March 24th, 2007 at 9:54 am
“Re italics, there are a great many ‘proper’ uses of English, which are adverse in their effect upon the the fluentcy, of acquisition, of text-based content. Like the sentence I just wrote. ”
Apart from the fact I made some mistakes of course
So not exactly proper. Bordering on irony there… But I hope you get my point.
Mary says:
January 16th, 2008 at 11:19 am
Not only do the Dyslexia Association recommend Comic Sans, but in the PTLLS teacher-training course, which I’ve just finished, Comic Sans is recommended for all visual aids and handouts. It might not be your personal taste, but that shouldn’t really take precedence over inclusiveness.
David Hamill says:
October 22nd, 2008 at 6:24 pm
Comic Sans is ugly but a good font for some dyslexics. This is because it is fatter than Arial and Verdana. I prefer to provide the ability to change font and colours. This allows you to provide some pretty yucky settings that may not look great but could be pretty helpful to dyslexics.
I also recommend providing the option clearlt and behind a ‘trigger word’ link. On my own site I use “Change colors and fonts”. This is because it links with what the dyslexic user wants to do. In my view it’s a lot better than hiding it in an accessibility page that nobody reads. I deliberately use the American spelling of colour as it is more phonetic.
Terry Ball says:
December 10th, 2008 at 5:39 pm
Because dyslexics have such a difficult time deciphering text, and they all seem to have their own idiosyncracies (some like this font, some like that; others need a pastel background, others prefer grey, etc), surely the pressure groups that have lobbied for the DDA legislation would have been better advised spending their time and resources in actually training dyslexics to set the preferences of a web browser so that web pages are rendered according to their particular needs, perhaps even training them to create their own style sheets that can be use to override the styling of any particular web site that is not to their liking?
JackP says:
December 11th, 2008 at 9:38 am
Terry,
it rather depends on what the situation is.
If you are designing a site for the general public, you may wish to take on board less of these measures than if you were designing a site specifically for dyslexic users.
Yes, it’s a benefit if people know how to change their browser configurations — that’s why a lot of organisations point people at stuff like My Web, My Way.
However, legislation is necessary. You can only reach so many people with the carrot; the stick is necessary for those who would not otherwise comply, and allows for redress for disabled people who have been discriminated against on the grounds of their disability (and there is an awful lot more to the DDA than ‘the internet’, in fact it is mentioned very little).
Monique says:
August 13th, 2009 at 9:33 pm
Hi,
I’am dyslexic and I confirm that all that items cause difficulties for me.
I would add the spaces between letters and words too poorly differentiated as well as a text too dense (spaces between the lines) or too long.
Best regards,
Monique