The 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 white/yellow text 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, intuitions and empathy 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 especially to pages which are intended specifically for dyslexic readers. The examples given show bad practice, and the layout of this article is intended to show good 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)

Far preferable is a narrow column width like the page this article is written on (60-70 characters). 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 background 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, flow charts and pictograms 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.

Text boxes or bubbles.

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, and paragraphs - even of only one line - should always be spaced out with an empty line between each paragraph.(Bad example.)

Writing for text-reading software.

Severely dyslexic readers may well be reading your web-page using a text-reading browser such as Web Talkster. Whilst highly recommended, such software programs have their limitations, such as the inability to distinguish where headings end. The following five guidelines will help to accommodate these shortcomings:

1. use full stops after headings to make the program's voice pause and drop in tone;
   
   
2. use semi-colons, commas or full stops after bullet points to separate each point, which may otherwise be read as continuous text:
   
   
3. do not write words purely in upper-case/capital letters as they may be read out as single letters by the program;
   
   
4. separate bullet points with an extra space;
   
   
5. Use a full stop after a link to separate it from the following text, e.g.:
   
   

   Dyslexia Adults Link. Dyslexia College.

   
   

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.

Feedback, additional references, books and other comments would be greatly appreciated, to me at this e-mail address.

John Bradford
(revised February 2005)

References:

• British Dyslexia Association Dyslexia Style Guide. - The style in which this information is produced is key to facilitating comprehension for the reader. Presenting information in a format which makes it easily accessible is vital, if the information it contains is to be understood by everyone.

• A Dyslexic Perspective on e-Content Accessibility. - covers the four main areas of accessibility: presentation, content, structure and navigation.

• Ten Guidelines for Improving Accessibility for People with Dyslexia. - principles for enhancing readability and accessibility for people with dyslexia.

• Dyslexia Style Guide. - discusses some of the principles of web design for people with dyslexia.

• Web Accessibility Myths. - This article attempt to put a stop to the misinformation that has been thrown around and tell you the truth behind web accessibility.

• Concise, Scannable, and Objective: How to Write for the Web. - studies of how users read on the Web found that they do not actually read: instead, they scan the text ...

• Usability and Accessibility articles - Bunnyfoot.

• Beyond Accessibility: Treating Users with Disabilities as People.

• Beyond Guidelines: Advanced Accessibility Techniques.

• Current Issues in Web Usability .

• Web Accessibility Initiative.

• Designing More Usable Web Sites.

• Designing For Dyslexia. 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.

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.

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.