This is third of a series of three articles. In Parts 1 (one) and 2 (two) of this series of articles I’ve been looking at the issues created by dyslexia and discussed, in detail, how colour contrast can adversely affect page readability. However, there is far more to designing dyslexia-friendly pages than just reducing colour contrast. On the plus side, it is likely that these changes will have a positive effect on page readability for all users.
Everyone has problems trying to read long lines of unbroken text that stretch across a wide screen. The point of vision can be easily lost. This is especially so when it’s time to move back to the left to pick up the next line. As might be expected, this is a particular problem for dyslexics.
Shorter line lengths and narrower text columns make reading easier. Consider setting a percentage width for text areas and set the margins to “0 auto” via CSS. The page side margins will then increase proportionately on wider screens.
Line height is the vertical distance between two corresponding positions in two adjacent lines of text. In other words, it’s the amount of white space between your lines of text.
Most browsers have a default line-height of around 1em. This normally results in closely packed lines of text. Increasing the line-height to around 1.3em immediately makes longer lines of text easier to read. Likewise, ensure that paragraphs are visibly separated.
Don’t be afraid of white space. Use it to enhance readability.
The smaller the text, the more difficult it will be to read. Specify font size in absolute units and you’ll also remove the user’s ability to resize the text within their browser. Unfortunately, this also includes declaring font size in pixels. Some browsers will not resize text that has a font size set in pixels. Stick to percentages or ems.
If possible, use a sans-serif font. The decorative “hooks” on the main strokes of serif letters may create additional problems for dyslexic users. Recognisable letters within a word may appear to be too far apart to “see” the whole word. This can also be compounded by the spacing between words being overly small for easy reading.
If you have to use a corporate serif font, consider reducing the letter-spacing slightly so that the letters within a word lie closer together but increasing the word-spacing to create a slightly larger distance between individual words.
Justified Or Not?
Justified text can produce a pleasing visual effect. However, it achieves its nice straight lines on either side of the text by introducing variable spacing between individual words.
The problem here is that the brain is a pattern-recognising machine. The uneven word spacing disrupts that pattern recognition. For most people, the effect is minimal when reading printed text. After all, we’re used to justified text in books. But reading from a screen is generally accepted to be more difficult than reading print. Consequently, this effect can become more significant as soon as you move from print to screen.
For a dyslexic reader, it can be catastrophic! The uneven spaces between words, creates visual distractions which are hard to ignore. As a result the reader loses his/her place repeatedly. Unjustified text, although less attractive at first glance. is far easier to read.
Use Italics Sparingly
When italic fonts are used on a web page, the individual letters can have a slightly jagged line compared to a non-italic font. This “pixelation,” coupled with their “lean to the left” makes them hard for a dyslexic person to read. The effect is compounded if the text is also small.
Use italics sparingly and consider bold text for important words. They’ll be far easier to read.
The user experience is always enhanced if there are pictures to look at. People absorb information in a number of ways. So it makes sense to maximise communication by using multimedia.
Photographs, charts and icons can convey a great deal of information regarding the topic of a page. Graphics can break the page up into smaller chunks. They can also provide visual memory aids and support comprehension for dyslexics.
As a bonus, graphics also support readers who trying to understand a non-native language — such as sign language users or non-English visitors on an English language page.
Text Boxes and Lists
Text boxes can be used to emphasise or highlight important points. They are especially effective if they incorporate slightly different background colours to the main page text. However, don’t over use them. Too many different boxes on a page will only lead to distraction and confusion.
Dyslexics often have poor organisational skills. Lists can help them by organising information into small, logical chunks. Again, good use of additional white space between list items will increase overall readability.
Unfamiliar abbreviations can confuse us all. However, even the most common abbreviations are likely to confuse a dyslexic reader. The fact that abbreviations are usually uppercase only makes matters worse.
Always expand the first occurrence of any abbreviation on a page. Use the title attribute with the
abbr, element to provide the fully expanded term. Or use the expanded term initially with the abbreviation version immediately after.
In a word: Don’t. Well, not unless you really have to.
Constantly moving images distract everyone. Animated adverts that scream for our attention actually impede our ability to read the rest of the page.
How many times have you found your eyes being drawn back to an animation again and again until you give up in disgust? Or found that the constant flickering in the corner of your eye is particularly annoying? My guess is that people rarely stay on such pages for any length of time.
The dyslexic readers probably won’t even stop and look. From their perspective, the page may be unusable. Anything that is likely to interfere with their precious concentration is a problem,
Obviously, there are times when an animation is worth a thousand words. This is especially so if you are trying to convey a difficult concept to a group who may have problems reading text. Try looping the animation once and then stopping it. Or allow visitors to stop or start the animation at will.
Dyslexics tend to have poor information processing skills. So it is relatively easy to overload them by literally providing too much information on one page.
Consider breaking complex pages down into two or three smaller pages. Within a page, use headings to sub-divide the page logically and visually. Adding coloured heading backgrounds or borders will act as further support.
Don’t overload pages with links. This is especially true of home pages where there seems to be an over-riding compulsion to link to everything on the site and display every fragment of news.
Keep in mind the old email adage: “Be conservative in what you send out” and remember that “less often means more.”
When designing a web site, we are often trying to create a virtual 3-dimensional structure using two-dimensional tools. In reality, there is no “Up,” “Down,” “Back,” or “Next” on a web site. Yet these are concepts that we often rely upon communicating to site visitors as an integral part of basic site navigation. The designer often “sees” the site as a three-dimensional tree. Site navigation techniques are then used to try and build that same image in the minds of visitors.
However, many dyslexics have a poor sense of direction. Complex navigation systems will often leave them confused, lost and bewildered.
Keep site navigation simple and logical. Make sure that the Home page is easily reachable from any part of the site. Try not to “hide” this important link in a logo. Part of feeling secure in where you are depends upon knowing how to get back to the start again.
Plain, Simple, and Short
Long sentences often contain more than one idea. Dyslexic readers need more “breaks” between ideas than non-dyslexics. So long complex sentences can present a problem for dyslexics. Why not break long sentences down into two or more shorter sentences?
Do you use long technical phrases rather than plain English? Why? What is your primary goal? To impress someone with your grammatical skills? Or to communicate information effectively? Similarly, keep paragraphs short and to the point.
Many designers do not realise that some screen reader users can see perfectly well. It is not uncommon for dyslexics to use screen readers to support their reading.
This may create problems where text has been positioned off screen. The assumption is that the screen reader user will not be able to perceive the difference between what is being “spoken” and what is actually visible on the screen. Dyslexic screen reader users will!
Off screen positioning may create some confusion for this group. This is why I’m currently wary of using CSS to position, for example, form labels off screen. The question has to be asked “If it’s important enough to be on a page, shouldn’t it also be visible?”
If you do make use of off screen positioning, try to do so sympathetically. Consider the viewpoint of those who can both hear the screen reader and see the page. Ask yourself if you’re potentially creating confusion.
Check Your Spelling
Dyslexics may not have good spelling skills. However, good spelling and punctuation does support them when they are reading. This is especially true if they use screen reading software for additional support.
Don’t be overly tempted to invent your own new buzzwords. You won’t impress anyone if they can’t understand you.
I’ve tried to include all of the page design issues that I am aware of. However, I do not claim to be aware of every issue that can adversely affect dyslexics. There will almost certainly be factors that I haven’t even considered. If so, I’d really like to hear about them.
This series of articles is not intended to provide all the answers. Ideally, the topics covered will go some way towards increasing overall awareness of the issues facing dyslexics on the web. I also hope they will promote some discussion within the web accessibility sector. Debate is healthy and challenging preconceptions is one of the few ways in which we can all learn new ideas.
Would you like to view comments on this article?