Dyslexia affects over 1 in 10 people. The chances are that many of your web site users have dyslexia at some level.This article looks at common issues facing dyslexic users on the web, and how we as responsible web developers can make their experience a better one.
What is dyslexia?
Dyslexia is the most common disability, with an estimated 15-20% of the world.s population affected by it to varying degrees. It is one of a number of incurable learning difficulties (see sidebar 1) and is the common cause of reading, writing and spelling difficulties affecting an indiscriminate section of the population; regardless of their gender, race or social background. Key manifestations of dyslexia include difficulties with accurate word recognition poor spelling and decoding (reading) abilities. Other characteristics may include problems in reading comprehension and reduced reading experience that can affect the growth of vocabulary.
SideBar One: Other learning difficulties close to dyslexia.
- Dyscalculia - a mathematical disability in which a person has unusual difficulty solving arithmetic problems and grasping math concepts.
- Dysgraphia - a neurological-based writing disability in which a person finds it hard to form letters or write within a defined space.
What Dyslexia is not.
There are many common myths about dyslexia, such as children can outgrow it. This simply is not true. Many people who are dyslexic are also of average to above average intelligence. Dyslexia can affect the ability to learn, but that is dependent on conditions rather than the individual. The same applies to the web. With proper assistance through good development, web documents can be made “Dyslexia Friendly”.
Common problems associated with Dyslexia that can affect web use.
A difficulty with processing visual information is one of the biggest minefields for dyslexics in a web that is very graphical medium. Dyslexic users can have problems with poorly built navigation structures, large amounts of textual contents and features such as animated media that distract away from the main content. Small or difficult to read fonts, large expanses of text and poor color combinations can lead to problems with processing information. One detrimental effect is scotopic sensitivity that some dyslexics experience leading to a “rivers of text” experience. As illustrated below:
Short term memory, structuring and sequencing problems can lead to a loss of orientation, especially when using a larger site such as a portal that has much .buried. content. So with these potential problems in mind, what can the web-developer do to help.
How standards help.
The first thing we can do is follow the standards provided to us such as the WCAG and Section 508. Many of these guidelines cover aspects of accessible development that if followed assist dyslexic users.
Like many visually-impaired users, dyslexics can use screen-reading technology to read the text on your site to them to them. The downside of this is that if not properly represented by alternative means non-text content will be missed by these users. So, here are several key features of Section 508 and WCAG that should be implemented in your documents.
Guideline 1. Provide equivalent alternatives to auditory and visual content.
This means using alt text, long descriptions and sometimes (preferably not) text-only versions of your content. There is an article on Made For All about dealing with web graphics related to this.
Guideline 4. Clarify natural language usage.
Use the language attribute in your html tag to identify the text of your document. Identify any changes in language such as foreign phrases by wrapping them in span, blockquote or other relevant tag with use of the lang attribute. This will allow screen-readers to correctly pronounce terminology used. Also use abbr and acronym elements (see Ian Lloyd’s article on Acronyms and Abbreviations at Made For All) to identify letter formations that a screen reader may trip up over
Guideline 14. Ensure that documents are clear and simple.
Consistent page layout, recognizable graphics, and easy to understand language will benefit all users. In particular, they help people with cognitive disabilities or who have difficulty reading. If page layout changes frequently throughout your site, dyslexic users can easily become disorientated. My article about document text on evolt deals with this subject.
Styling your site for dyslexic users.
Of course, not all users with dyslexia rely on screen-reading technology. Many of them use the web exactly like you and me, even though the difficulties remain the same. So, once we have our .behind the scenes. accessibility features in place, we can move onto how we can visually tweak our site to be more “dyslexia friendly”.
Paragraph Layout.
Look at most magazines and newspapers and you will see that they very rarely span large amounts of text across a page. Instead they rely on narrower column layouts. Narrower columns make for easier reading. Using narrower paragraph widths we can help reduce the “rivers-of-text” affect described previously in this tutorial.
Also, try to avoid “trendy” justified layouts and use unjustified text. Justified text layouts leads to uneven spaces between words. Can we say again at this point see figure 1?
If you have several points to make that are related use a list rather than a paragraph. Look at the two examples below.
Example 1:
So, in summary to make documents more readable it is best to avoid using unjustified text when designing pages for dyslexic users. We should also not use justified layouts. Lists are also useful to break down content.
Example 2:
- Avoid using unjustified text;
- Use unjustified layouts;
- Use lists to break down content.
The second example looks much better than the first. Don’t you think? Notice that I have also used a numbered list. Whilst this may not be suitable in all circumstances, it give a reference point to the dyslexic reader who can easily become disorientated; especially if the list is longer.
Observant readers will also notice the semi-colon at the end of lists. Not only is this grammatically correct, but it also stops screen-readers running on to the following line immediately and creating incoherent sentences. The last item in the list uses a full-stop. Your grammar lesson is now over.
Another good rule is that if the same ideas can be conveyed equally clearly in shorter sentences, do so. This gives a dyslexic reader a break after each sentence.
Fonts
A good rule of thumb is to avoid serif fonts; they are scrappy and harder to read on the web. Fonts that under tests seem to suit dyslexic and normal readers are MS Trebuchet and Comic Sans. These fonts are standard on Windows computers and have a smooth, distinguishable faces and wider letter spacing. Verdana and Arial also seem to be very good choices for the web. Of course, not everyone has these fonts installed, (not everyone uses Windows) so specify sans-serif as your last resort font in your style sheets.
Use relative sizes as opposed to fixed sizes to keep control over the text size in the hands of the reader. Also try to avoid ridiculously small fonts. If you can hardly read it, chances are most other people can.t. Why would you do that?
Try to avoid italics. Italic letters lean over sideways, and are used in books to emphasize a point. However, when seen on a computer monitor, they are hard for a dyslexic person to read.
Use of color
Dyslexic readers are particularly sensitive to the brightness of text on a pure white background. This can cause the words to appear to move around and to blur together. However a great number of web sites use dark text on white backgrounds. Better alternatives are the use of off-white colors for a background, to soften glare, but provide sufficient contrast between the foreground and background. We are not going to suggest that every developer starts using this technique, but we would suggest (time and finances permitting) the provision of a style sheet switcher that enables a user to alter the background color. There is an excellent tutorial on style sheet switching at A List Apart.
Graphics
We already mentioned using alternative text for graphics and this is a benefit for more than just dyslexic readers. Some usability experts denounce graphics as a waste of page space and bandwidth; we disagree.
If you have a complex process to describe (for example how to fit a hard drive) a diagram, is much more useful to both dyslexic and regular users along side a text description.
Images also break up a page and provide a reference point to parts of your document. Use images but think about how to use them well.
Moving graphics are mentioned in the WCAG and Section 508. Try to avoid anything that moves on your page whatsoever. This distracts regular users and for dyslexic users can make page unreadable due to inability to concentrate. If you need moving images, give users a means of disabling them.
Navigation
The rules of navigation are an article in themselves. But there are 2 golden rules that apply to dyslexic users:
- Use consistent navigation. Don’t change your main navigation as it can easily disorientate your user.
- Use “Breadcrumb trails” on deep pages. For example, see the “You are here sub-navigation” on accessify.com.
The golden rule should be that there is a simple list of links on each individual page linking to every other page or section on that site.
Made For Dyslexia = Made For All.
Research shows that readers access text at a 25% slower rate on a computer. That is any reader; not just a reader with learning difficulties. Using the standards, guidelines and the techniques used above will help increase readability for all users of your site. More importantly they can make your site to more accessible to an estimated 15-20% of the world population. Someone you know maybe?
More resources about dyslexia
A style guide for web and print techniques to assist dyslexic readers.