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 10 to 15% 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.

A poster from the Dyslexia Scotland organisation.

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.

“Please go and grab a cup of coffee” sentence with different kinds of underline text.

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.