Improving text readability for dyslexic users with skip-ink underlines
Designing an accessible interface is not only working on contrasts and colours for users with visual impairment. An accessible interface is built to be used by all kinds of users, including dyslexic people.
As designers, we can help dyslexic users to read more easily our content and interfaces without too much technical requirements.
A quick reminder on dyslexia
Dyslexia is a reading disorder with a lot of different reality for our users. Problems may vary from difficulties in spelling words, reading quickly and easily, reading aloud or understanding what other people read.
It can be important to understand that dyslexia is not a visual or hearing problem but a learning disability affecting 3 to 7% of the world population.
When you design an interface easily-readable for dyslexic users, you will face the same issue as designing for autistic users: there is no unique solution resolving any situations.
The most important thing to keep in mind is to ensure readability by avoiding any object to interact with the shape of a letter or a word.
How skip-ink underlines can increase readability
The shape of a word is essential to understand quickly the meaning.
This is mainly the reason why strike-through or uppercase text can be challenging for people with a reading disorder.
But these two text decoration features are not the only ones to avoid to improve the readability of your content.
You can have the same issue with underline and overline.
We are using underline texts a lot on Internet to indicate links in our interfaces. For other accessibility reasons, it is important to continue using underline text to indicate an interactive part of a content even if it can be challenging for some users.
You can see in these two examples how the underline can interact with the shape of the letter and decrease the readability of the text.
For some dyslexic people in these cases, it can be hard to really identify the letter g and p because of the line going through the glyph descenders.
Skip-ink underlines and overlines are text decoration features allowing overlines and underlines to be hidden when they pass over glyph ascenders or descenders.
Lately, you can see this feature in Sketch for example every time you are trying to underline a text. Unfortunately, even if this feature is integrated in the produced designs, there is only a few number of developers implementing this good practice in the final interface.
In the last example, you can see how the skip-ink underline solution can solve this issue by preserving the shape of every letter and word in the sentence.
You can quickly identify all letters with glyph descenders like g and p.
For example, p is less likely confusable with q or o because of the underline.
By avoiding any interaction with glyph ascendant and descendant, you keep the shape of every words in the sentence and you help the users’ brain quickly identify the meaning of a word.
This solution is even better than the border-bottom underline solution.
Most of the time, when we underline a text with a border-bottom CSS solution, the line is too far from the text and it decreases the readability of a paragraph.
With the skip-ink underline, you are compliant with the proximity principle — from the Gestalt laws of grouping — which is a good practice to design user interfaces accessible to people with cognitive disabilities.
Skip-ink underlines: the technical part
Despite the importance of this feature, we don’t have a fully functional CSS property to implement skip-ink underlines easily on our projects, yet.
As the time of writing this article, only Chrome Canary and Opera 50 are supporting the text-decoration-skip-ink CSS property. Hopefully, other browsers will follow quickly.
Other resources about dyslexia
Karwai Pun is an interaction designer currently working on Service Optimisation to make existing and new services…accessibility.blog.gov.uk
Lately there has been a focus on accessibility recommendations and guidelines for people who are visually impaired, and…medium.com