Readability & Web: Let’s build great inclusive projects

Readability & Web: Let’s build great inclusive projects. Talk given during Abstractions, in Pittsburgh, PA (USA) on August 22, 2019.

Photo of a person sitting on a couch reading a book by iam Se7en on Unsplash

Photo of a person sitting on a bench in a parc reading a book by Tamarcus Brown on Unsplash

Photo of a person sitting in a coffee shop, reading a book, by Praveen Gupta on Unsplash

Photo of a series of people in a crowded train reading newspapers and books by Peter Lawrence on Unsplash

Photo of a person reading on their smartphone while sitting in a couch from The Gender Spectrum Collection

Hi! 👋 I’m Damien.

I am a queer designer who codes, specialised in accessibility. I work for Castor EDC in Amsterdam, NL as a Design systems & Accessibility Lead. I use they/them pronouns.

And in general, I try never to speak with people.

Just kidding! Let’s have a chat! 💬 I am more than happy to discuss how to make the Web a better place with you. So feel free to come and discuss any topics such as accessibility, inclusive design, design systems, collaboration, team building, trains, raccoons or just your favourite coffee spot in town!

Content warnings ⚠ I am known to use a colourful language, so please pardon my French! 🤭 Some recordings of websites could trigger a bit of motion sickness. 🤒 Usually, my sense of time is really bad. And also, raccoons?

Buckle up! Let’s talk about readability.

But first, why?

Reading is a complex cognitive process.

Literacy is an acquired skill requiring an important learning curve.

Literacy is not always a life-long skill. You can acquire reading difficulties.

The thing is… the Web is mainly text-based. And a text is not accessible per se.

There is two groups of reading impairments

Vision impairments Blindness Eye infection Hay’s fever Visual distraction Microsoft icons

Cognitive impairments Dyslexia/Alexia Hyperlexia Autism ADHD Fluency Stressful context

A quick focus on dyslexia

± 10% of the global population is having a degree of dyslexia. World Health Organization, 2011 Dyslexia Research Trust, 2014 University of Gothenburg, Sahlgrenska Academy, 2014 United Kingdom NHS, 2017

Commonly associated with ADHD, autism or dyscalculia.

Not always since childhood: it can appear after traumatic brain injuries and strokes.

Also, dyslexia is not only about reading.

Studies show that improving readability for dyslexic users improve the experience for all. Ten guidelines for improving accessibility for people with dyslexia. V. Zarach - CETIS University of Wales Bangor, 2012

How do we read?

Reading is about sounds. 🎵 Reading is about rhythm. 🎶 Reading is about music. 🎼

Reading is mainly a phonological process.

The reading experience can be heavily impacted by the context & environment.

Reading is not linear, we are reading by saccades.

And between each saccades, we have something called fixation.

During a fixation, everything except the focus is blurry.

And every few fixations, we need a small break.

The size of our saccades and the duration of fixations depend on the type of reading. When browsing websites, we are mainly using an exploratory reading pattern.elo

On a screen, we are not reading in a word-by-word manner.

Yuo cna porbalby raed tihs esaliy desptie teh msispeillgns.

You can probably read this easily despite the misspellings.

This is possible thanks to letters’ identifying features

These identifying features allow us to read more easily.

Readability READABILITY

problem porbelm pbleorm

Saccades & fixations captured during an experimentation by Nielsen Norman Group

Bear with me, the lecture part of this talk is almost over. 🦝

Readability 101.

Using icons contribute to readability because it makes the content understandable even without knowledge of the language

Good visual information architecture

Size clearly adapted to the context

Icons, hierarchy & wording consistency across the whole journey

The 4C of readability

Continuity: repetition of the information until the endpoint

Conspicuity: being easily seen or noticeable, attract people’s attention

Consistency: keeping the same wording along the way

Clarity: the message needs to be clearly understandable

Thanks Paul Mijksenaar 👍

We’re done with the theory. You clearly deserve another cute raccoon. 🦝

Readability & web content.

First, Open Dyslexia is not a solution.

There is no one-fits-all solution.

So what?

Micro-typography

🎨 Having a good contrast is essential, but careful 💛 Using yellowish/beige background can help 🔤 Sans-serif and monospaced for the win 📏 White space is your friend, use it wisely 🚨 Use colours & weights to attract attention

Macro-typography & Layout Layout Guidelines for Web Text and a Web Service to Improve Accessibility for Dyslexics L Rello, G Kanvinde, R Baeza-Yates - Proceedings of the international …, 2012 - dl.acm.org

↔ Prefer left alignment for texts in LtR languages 📢 Use headings to make the information clearer 💻 Use semantic markup & design accordingly 🎛 Create consistency in the layout 🗺 Provide two ways to access content

Adopt an inclusive writing-style Based on the British Dyslexia Association Guidelines for Web Design 3.

6 Use an active voice rather than passive voice 📢 Use short & simple sentences in direct style 🌅 Use images & medias to support your content ▪ A list is always clearer than a paragraph 🛠 Avoid jargon-specific language and abbreviations role=drinks • June 2019 • @iamhiwelo

Create distraction-free experiences

You know… this kind of really useful distractions. 🚕

Hey buddy! You looks friendly but… no thanks.

And please stop making assumption about time needed by a user to read a content.

The last, but not the least… +1

It’s time to remove unnecessary content.

So, how to experiment with your projects?

You can use recording tools like pointer and move heat-maps.

You can learn what is catchy and how to optimise a page

You should test your content using a screen reader and tools like the Web Rotor.

You can calculate your readability score.

A series of algorithms help you understand the readability of your content.

Some good examples.

Definitely not perfect (why are you using such a painful green colour 😅), but interesting and distraction-limited experience.

Smashing Mag is not afraid using bold and big font-sizes

Readability and content grouping with in clear way

Even in ecommerce: a nice & readable design is a must-have for webshop

So… are you ready for this new challenge?

Bedankt! Merci beaucoup ! Tack så mycket! Thank you! Tusen takk! Vielen Dank!

Also, feel free to join me tomorrow at noon to discuss better designer/engineer collaboration through accessibility.

Damien Senger Queer designer who codes, specialised in accessibility. raccoon.studio • noti.st/hiwelo @iamhiwelo