Dyslexia, and how it affects your web design
Lately there has been a focus on accessibility recommendations and guidelines for people who are visually impaired, and it strikes a chord with me because I have a younger sister who is dyslexic and it directly affects how often she uses the web and which mediums she prefers. For example, print in a book is un-editable, but we do have more freedom in controlling the look of text and layout on a webpage.
A quick explanation of what dyslexia is and how it works: A lot of people think it involves seeing letters backwards like mixing up a b and d, but realistically there are plenty of forms of dyslexia that involve mixing phonetically similar sounds, as well as v and f. It significantly slows down the reading and comprehension of any block text.
Dyslexia affects 10% of the population to some degree; it’s a varying spectrum. While there are WCAG requirements for people with visual impairments, this is considered more of a mental impairment, and there really aren’t any requirements in place. However, it’s still nice to design a webpage with this part of the population in mind. And if you design a webpage with the lens of clarity for dyslexics, you get the added bonus of a more clear and clean design in general.
Some ways to ensure that your content is dyslexic-friendly is to pay attention to the text spacing (used as a broad term including kearning, line height, line length or measure and alignment, font size, weight, case, and color). The more space around a letter, the easier it is to process.
Other, more tangible ways to be dyslexic friendly is to bake it right into your code. Avoid white backgrounds with black text, as heavy contrast can be tough to read. Use sans serif fonts, as serif tails add more visual weight to process.
Allowing the user to edit the size and type of text on a page (via settings) is another option. Also, have an explanatory summary or tag line so the user doesn’t have to read the entire body of text if it’s not what they’re looking for saves them time and frustration. Most websites that successfully translate information to dyslexics usually have a landing page with a specific call to action, explanatory headlines, and images or demo videos to replace bodies of text. And despite a lot of these cases being on a case-by-case basis, one consistency was to always have a link back to the homepage on every page so the user can get back to the start if they start feeling confused, as they can have trouble processing and organizing the hierarchy of information.
Lastly, its important to note the aids that people with dyslexia will use to browse the web more efficiently. Some of them will use a screen reader while there are also plugins available that change all block text to a more readable font (usually designed specifically for dyslexics, as the font tends to be bubbly and anchored at the bottom to stop letters from ‘jumping around’). Some examples of these are Dyslite, and Dyslexia Unscrambled.
More information can be found at the following links:
Sources:
http://vanseodesign.com/web-design/legible-readable-typography/
http://www.creativebloq.com/netmag/how-design-dyslexia-41411383
http://decodingdyslexiaoh.org/what-is/what-is-dyslexia/
https://www.noodle.com/articles/7-google-chrome-extensions-that-help-students-with-dyslexia
http://www.uxbooth.com/articles/designing-for-dyslexia-part-2/
