Read this article in German

Read this article in Spanish

Read this article in Belorussian

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).

It is also helpful to keep the page background clear of unnecessary objects or movement.

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.

Some dyslexic readers prefer the Comic Sans typeface, but it can appear a bit childish to some readers.

Verdana has an open feel and is a popular choice for websites.

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!

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!

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!

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. This page is a good example of this.

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 2010)

References:

• British Dyslexia Association Dyslexia Style Guide. - The style in which this information is produced is key to facilitating comprehension for the reader. Website design must consider all the above factors together with the following points.
Research shows that readers access text at a 25% slower rate on a computer. This should be taken into account when putting information on the web. When a website is completed, check the site and information for accessibility by carrying out some simple checks.

• Web 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.

• 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 ...

• Beyond Guidelines: Advanced Accessibility Techniques.

• Usability v. Dyslexia. - Legibility guidelines for dyslexia often conflict with usability conventions for websites. My challenge was to find a way of designing a website that adhered to both sets of rules.
Just before embarking on the new website design for the British Dyslexia Association I read Steve Krug’s book ‘Don’t make me think’ on usability.

• 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.

• 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 in the Digital Age - by Ian Smythe. This book takes the reader back to basics, from understanding the needs of the dyslexic individual to getting the most from available technology. It does this by providing frameworks from theoretical perspectives and following this through to practical implementation, including reviews of the most common types of software. There is plenty of practical advice on how to support dyslexic individuals using technology, including how to get the most out of what is available. It highlights state of the art, and what more still needs to be done to make the technology truly enabling for all dyslexics.
USA | UK.