Readability & Web: Let’s build great inclusive projects

A presentation at Abstractions II in August 2019 in Pittsburgh, PA, USA by Damien Senger

Slide 1

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

Slide 2

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

Slide 3

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

Slide 4

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

Slide 5

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

Slide 6

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

Slide 7

Hi! 👋 I’m Damien.

Slide 8

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.

Slide 9

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

Slide 10

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!

Slide 11

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?

Slide 12

Buckle up! Let’s talk about readability.

Slide 13

But first, why?

Slide 14

Slide 15

Reading is a complex cognitive process.

Slide 16

Literacy is an acquired skill requiring an important learning curve.

Slide 17

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

Slide 18

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

Slide 19

There is two groups of reading impairments

Slide 20

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

Slide 21

Cognitive impairments Dyslexia/Alexia Hyperlexia Autism ADHD Fluency Stressful context

Slide 22

A quick focus on dyslexia

Slide 23

± 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

Slide 24

Commonly associated with ADHD, autism or dyscalculia.

Slide 25

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

Slide 26

Also, dyslexia is not only about reading.

Slide 27

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

Slide 28

How do we read?

Slide 29

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

Slide 30

Reading is mainly a phonological process.

Slide 31

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

Slide 32

Reading is not linear, we are reading by saccades.

Slide 33

And between each saccades, we have something called fixation.

Slide 34

During a fixation, everything except the focus is blurry.

Slide 35

And every few fixations, we need a small break.

Slide 36

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

Slide 37

Slide 38

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

Slide 39

Yuo cna porbalby raed tihs esaliy desptie teh msispeillgns.

Slide 40

You can probably read this easily despite the misspellings.

Slide 41

This is possible thanks to letters’ identifying features

Slide 42

These identifying features allow us to read more easily.

Slide 43

Readability READABILITY

Slide 44

problem porbelm pbleorm

Slide 45

Saccades & fixations captured during an experimentation by Nielsen Norman Group

Slide 46

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

Slide 47

Readability 101.

Slide 48

Slide 49

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

Slide 50

Good visual information architecture

Slide 51

Size clearly adapted to the context

Slide 52

Icons, hierarchy & wording consistency across the whole journey

Slide 53

The 4C of readability

Slide 54

Continuity: repetition of the information until the endpoint

Slide 55

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

Slide 56

Consistency: keeping the same wording along the way

Slide 57

Clarity: the message needs to be clearly understandable

Slide 58

Thanks Paul Mijksenaar 👍

Slide 59

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

Slide 60

Readability & web content.

Slide 61

First, Open Dyslexia is not a solution.

Slide 62

There is no one-fits-all solution.

Slide 63

So what?

Slide 64

Micro-typography

Slide 65

🎨 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

Slide 66

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

Slide 67

↔ 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

Slide 68

Slide 69

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

Slide 70

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