Designing web pages for dyslexic readers

John Bradford outlines the principles of good web-page design for a dyslexic audience.

Background color: Off White Gray Cream Green Blue Pink Yellow Lavender

The fairly recent arrival of the World Wide Web on our computer monitors means that it suffers from the faults of any new medium: websites are often hastily put together; web designers are often new to the skill; text is often presented in unreadable formats, even on black backgrounds; finding your way around a website is often difficult; some advertisers will do anything, however irritating, to attract attention to their little box; many designers view web pages from the point of view of a computer expert rather than from the point of view of the ordinary people who will read their pages; it is assumed that everyone viewing web pages is skilled at using a computer; designers are tempted to do anything to hold people within their own sites (making them 'sticky' is the expression they use), rather than to provide helpful links to information which may lie beyond their site; and, last but not least, web pages are mostly put together almost exclusively by men! Perhaps there is a need for some feminine perceptions and intuitions about human behaviour! You may have other criticisms of the present state of the World Wide Web. This article will attempt to lay out some of the principles of good web design, which apply to most web pages, but expecially to pages which are intended specifically for dyslexic readers.The examples given show bad practice. Column width There is nothing worse to read than unbroken text stretching right across your screen. As the eyes try to scan across, it is extremely difficult to read on to the next line. The point of vision gets lost in a sea of text.(Example) (Example) (Example) Far preferable is a narrow column width like the page this article is written on. This is the sort of width used by newspapers, and it allows much easier scanning along the lines of print. Justified or not? Justified text is where the words are spaced out by the word processor so that both the left and the right sides of each column are straight lines. Unjustified text - like the text on this page - leaves a ragged edge down the right hand side. For a dyslexic reader, justified text, with its uneven spaces between words, creates visual patterns of white space which are hard to ignore. They distract the reader, who loses the place. Unjustified text is far easier to read, although it is unfortunately not fashionable in some design-led magazines. Background color Many 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. This difficulty can be avoided if pure white is not used for the page background color. A slightly off-white color can easily be achieved (with the code BGCOLOR="#FFFFE5"). Text is also harder to read on a patterned or tiled background. (Example) For pages which are heavily used by dyslexic adults or teenagers, a backgound color changer can be added to a page, like the one at the top of this page (which may be freely copied by any other web designer). Type face Unfortunately, most computer programs are set up to use Times New Roman as the 'default' typeface. This is a traditional typeface, associated with printing, and it looks like this: abcdefg hijklm nopqrstu vwwxyz You will notice that Times New Roman has lots of decorative bits added to letters (serifs), making them more complex to read. Also, the letter 'g' is more like a number 8. The typeface 'Arial' being used on this page is clearer, is more like the letters we all learned at school, and is preferable. Print size Screen sizes are getting larger, but many people still view webpages on smaller monitors. This makes reading any size smaller than 'size 2' difficult without a magnifying glass! This sentence is written in size 1, and deserves the description of 'small print'.Unfortunately, as web designers try to squeeze more and more information onto their pages,assuming that their viewers have the same large monitor screens that they themselves have, it is becoming more commonly used. 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. When the text size is reduced to size 1, they become virtually illegible. Italic letters should be avoided if at all possible. It is far more sensible to make important words bold. Pictures or images You don't have to be dyslexic to know that scanning a page of writing is far more pleasurable if there are pictures to look at. Pictures immediately give a sense of what the page is about. They break up the page into smaller chunks, and, for a dyslexic reader, provide an immediate visual stimulus and a visual memory for the future. You can see the look of disappointment on a child's face if a page has no pictures. Unfortunately, as we grow up, we are encouraged to develop the opinion that books with pictures are childish: grown ups read books without pictures. This may be appropriate in some circumstances, but even in a long academic article it is a relief to come to a chart or graph! (Bad example) A severely dyslexic teenager who was showing me how he used the Internet was mumbling to himself: 'Pictures . . . pictures . . . pictures . . .' as he followed the results listing for his enthusiastic search for information about motorbikes. Moving images Flickering or flashing images are distracting not only to anyone with visual problems, but to all of us. Advertisements at the top of pages seem particularly desperate to force themselves into our field of attention. If only they knew how off-putting their gimmicks are! (Bad example) There are also little effects that can make images change drastically or patterns appear around the mouse pointer. These also make it particularly distracting to people who simply want to read the information on the page. Navigation Difficulties with a sense of direction often plague dyslexic readers. How often have we all been trapped by some unimaginative web designer so that we just cannot get to the page we need on the website! 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. Short sentences Long sentences contain more than one idea. It is perfectly possible to break longer sentences up into shorter ones. This does not mean that the sentences are intellectually inferior to a passage with longer sentences. The same ideas can be conveyed equally clearly in shorter sentences. This gives a dyslexic reader a break after each sentence. There is a limit to the length of a complicated sentence that anyone can take in before our mind gives out! (Good example) Short paragraphs Newspaper stories are good examples of how text can be broken up to improve readability. It is very common for newspaper articles and reports to be set out so that there is a paragraph break after each sentence. This may not fit in with conventions about correct English or essay-writing, but that is another issue. The priority when reading a newspaper or web-page should be easy readability.(Bad example) Summary The whole point of the presentation of text is for the meaning to be easily digested. This can best be achieved on a web-page by having a paragraph break every sentence or two.Clear, well-spaced pages of unjustified text, broken up with illustrative pictures, can make surfing the web a far easier experience for dyslexic readers. Before finishing, I must say that these are aims that we are all trying to achieve in the World of Dyslexia websites. I feel guilty now that you will now look at some of our web pages and see the kind of faults that I have been decrying! My apologies in advance, as I know that this will be the case in some instances. I just thought that it would be good to set out best practice so that the web designers among us will think twice about readability issues for dyslexic readers before putting text on our pages! Feedback and other comments would be greatly appreciated, to me at this e-mail address. John Bradford Email: office@dyslexia-parent.com March 2000 Flat screens or standard screens? Do you know if LCD flat screen monitors can be sufficiently beneficial over standard CRT monitors for dyslexic students? I'm doing volunteer work in a private elementary school to set up learning-disabled students with assistive technology. I am in the process of writing a grant to purchase Dragon voice activated software and a computer to run it. I will have limited money to work with, and am debating on whether to put some of the resources towards an LCD flat screen monitor. (K.N.) A flat screen has less glare than a normal screen, and I would recommend it, particularly with the brightness and contrast of the screen lowered a little. The voice-activated software, of course, is excellent, provided that people put in extra time at the start training the program by reading out additional passages and letting the program look through their 'My Documents' folder to see the words they use most commonly. Books: • Web Accessibility for People with Disabilities - by Michael Paciello. A resource for those who face the challenge of providing access to the Web for people with disabilities. It has examples demonstrating techniques for adjusting HTML tags, scripts and other codes, and identifies research and development in the area of access for disabled people. UK | USA • Building Accessible Websites - by Joe Clark. A guide to building Web sites that are accessible on nearly every device to nearly every visitor, even those with disabilities. It teaches developers how and why to use accessibility techniques, with an emphasis on phrased accessibility that scales to the needs of different Web sites' strategies appropriate for small, medium and large budgets and sites. It takes a look at successful accessibility initiatives taken by Web developers, showing "before and after" examples. UK | USA • Maximum Accessibility: Making Your Web Site More Usable for Everyone - by John Slatin, Sharron Rush. This book provides the practical tools, design techniques, and testing methods to implement web standards without losing any of the functionality of your web site. This text provides the practical tools, design techniques, and testing methods to implement web standards without losing any of the functionality of your web site. UK | USA

Dyslexia Adults Link - information and resources for dyslexic adults.

Dyslexia Parents Resource - information and resources for parents with a dyslexic child or teenager.
Dyslexia College and University - information and resources for students at college or university.