Article: How to Design with Dyslexia in Mind

Dyslexia is a learning disability that affects 3-7% of the population, and up to 20% may have some degree of the symptoms. It is not an intelligence problem, but considered a cognitive disorder that primarily affects learning, memory, perception, and problem solving. Specifically, it impairs a person’s ability to read. As web designers, we need to be aware of the design choices we make so we don’t make it harder for people with dyslexia to read a website.

Dyslexia Design Decisions

When making design choices we need to consider the needs of the following two groups:

Dyslexic people who use computer speech output technology: Like many visually-impaired users, many dyslexics now rely on computers to read the text to them. Thus pages should be designed to be compatible with most screen readers. All important information should be conveyed in text, as computers can not read or interpret graphic images.

Dyslexics who need clear graphics and distortion-free text: Other dyslexic individuals, who are reading your site on their own, will appreciate clear, simple, and consistent graphic navigational icons. They will be troubled by flashing text, variations in fonts, distracting sounds or animations, and textured or patterned backgrounds.

Considerations for Designing for Dyslexia

The following is a list of suggestions that was compiled from several resources. Please read through the list of articles at the bottom for further explanations and insight in how people with dyslexia view a web page.

British Dyslexia front page site design.
Site Navigation: Keep it simple. Make sure the Home page is accessible from every page. Use icons to help with navigation between pages. Include a text alternative or alt tag for people who rely on screen readers. Clearly label and categorize the content of the site and provide several options for finding specific content on the page.

Backgrounds and Text Colors: Pure white backgrounds and black text can cause words to swirl or blur together. Use an off-white color for the background and a dark gray for your text. Keep away from textured and patterned backgrounds.

Moving Images: Use them only if you really have to in order to make your point. Try looping the animation once and then stopping it, or allow visitors to turn on/off animation. Avoid flashing text and animation.

Line Width: Short line lengths and narrow text columns make it easier to read. Use a percentage width for text areas and set margins to “0 auto”.

Line Height: Increase line height to around 1.3em to create more white space between sentences.

Font Size: Keep away from small text. Give the reader the ability to resize text in their browser by using percentages or ems for sizing text, not pixels.

Font Face: Stick with sans-serif fonts which are easier to read. If using a decorative font, reduce the spacing between the letters and increase the spacing between the words. Better yet, list a dyslexia font as the first font in a CSS document.

Accessibility Toolbar: Consider adding an accessibility toolbar so users can customize the site to the way it works for them. This will be appreciated by many people.Example of an accessibility toolbar.
Information Overload: Break long pages down into two or three pages. Use headings to break up the text. Keep paragraphs short and express one idea per paragraph. Also, keep sentences simple and short.

Text Alignment: Justified text creates uneven spacing between words which is difficult to read and creates visual distractions. Left aligned text is easier to read.

Italics: If you must use italics, use them sparingly. A better choice is emphasizing words with bold.

Page design for dyslexia.Links: Place links at the top or bottom of the page or paragraph instead of within the paragraph. This makes it easier to find the information without needing to read all the text. Use titles to describe the type of information or site the link will take the reader to.

Graphics: Support your topic with graphics, charts or graphs. These help break the page up and provide visual memory aids.

Text Boxes and Lists: Use solid colored backgrounds for text boxes with good contrast between the font color and background. Provide lists when possible to organize information.

Abbreviations: Spell out abbreviated words and add the abbreviation after the word.

Test for Accessibility Issues

When developing a website test it with accessibility evaluation programs and/or use an accessibility checklist. Not only will these guidelines be appreciated by a disabled user, the non-disabled user will also benefit from a simple, easy to use, and easy to read site.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s