Lower literacy: it’s not the user, it’s the product!

A presentation at A11yNYC - Accessibility New York City in June 2019 in New York, NY, USA by Damien Senger

Slide 1

Slide 1

LOWER LITERACY: IT’S NOT THE USER, IT’S THE PRODUCT A11yNYC Meetup • June 4, 2019

Slide 2

Slide 2

Photo by iam Se7en on Unsplash

Slide 3

Slide 3

Photo by Tamarcus Brown on Unsplash

Slide 4

Slide 4

Photo by Praveen Gupta on Unsplash

Slide 5

Slide 5

Photo by Peter Lawrence on Unsplash

Slide 6

Slide 6

Photo from The Gender Spectrum Collection

Slide 7

Slide 7

Hi! 👋 I’m Damien.

Slide 8

Slide 8

Hi! 👋 I’m Damien. I am a digital designer, specialised in accessibility. I work for Castor EDC in Amsterdam as a Design systems & Accessibility Lead. Oh, and I use they/them pronouns.

Slide 9

Slide 9

Slide 10

Slide 10

Also, good to know: The slides of this talk are available: https:!//speaking.raccoon.studio/ZIbn9M

Slide 11

Slide 11

So! Let’s talk about readability.

Slide 12

Slide 12

But first, why?

Slide 13

Slide 13

Reading is not an easy thing. A11yNYC • June 2019 • @iamhiwelo

Slide 14

Slide 14

The Web is mainly text-based And a text is not accessible per se. A11yNYC • June 2019 • @iamhiwelo

Slide 15

Slide 15

There is two groups of reading impairments A11yNYC • June 2019 • @iamhiwelo

Slide 16

Slide 16

Vision impairments Blindness Eye infection Hay’s fever Visual distraction Microsoft icons A11yNYC • June 2019 • @iamhiwelo

Slide 17

Slide 17

Cognitive impairments Dyslexia Hyperlexia (Autism/ADHD) Fluency Stressful context Microsoft icons A11yNYC • June 2019 • @iamhiwelo

Slide 18

Slide 18

A quick focus on dyslexia

Slide 19

Slide 19

± 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 A11yNYC • June 2019 • @iamhiwelo

Slide 20

Slide 20

43% of the U.S. population has low-literacy. U.S. Department of Education’s National Assessment of Adult Literacy, 2013 A11yNYC • June 2019 • @iamhiwelo

Slide 21

Slide 21

Commonly associated with ADHD, autism or dyscalculia. A11yNYC • June 2019 • @iamhiwelo

Slide 22

Slide 22

Not always since childhood: it can appear after traumatic brain injuries and strokes. A11yNYC • June 2019 • @iamhiwelo

Slide 23

Slide 23

Dyslexia is not only about reading. A11yNYC • June 2019 • @iamhiwelo

Slide 24

Slide 24

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 A11yNYC • June 2019 • @iamhiwelo

Slide 25

Slide 25

How do we read?

Slide 26

Slide 26

Reading is about sounds. Reading is about music. A11yNYC • June 2019 • @iamhiwelo

Slide 27

Slide 27

Reading is mainly a phonological process. A11yNYC • June 2019 • @iamhiwelo

Slide 28

Slide 28

The reading experience depends a lot of the context & environment A11yNYC • June 2019 • @iamhiwelo

Slide 29

Slide 29

Reading is not linear, we are reading by saccades. A11yNYC • June 2019 • @iamhiwelo

Slide 30

Slide 30

And between each saccades, we have something called fixation. A11yNYC • June 2019 • @iamhiwelo

Slide 31

Slide 31

During a fixation, everything except the focu blurry. A11yNYC • June 2019 • @iamhiwelo

Slide 32

Slide 32

And every few fixations, we need a small break. A11yNYC • June 2019 • @iamhiwelo

Slide 33

Slide 33

The size of our saccades and the duration of fixations depend of the type of reading. When browsing websites, we are mainly using our exploratory reading pattern. A11yNYC • June 2019 • @iamhiwelo

Slide 34

Slide 34

Web Content Accessibility Guidelines (WCAG) is developed through the W3C process in coopera individuals and organizations around the world, with a goal of providing a single shared standard for accessibility that meets the needs of individuals, organizations, and governments internationally. A11yNYC • June 2019 • @iamhiwelo

Slide 35

Slide 35

We are first analysing the paragraph before starting to read. A11yNYC • June 2019 • @iamhiwelo

Slide 36

Slide 36

On a screen, we are not reading in a word-by-word manner. A11yNYC • June 2019 • @iamhiwelo

Slide 37

Slide 37

Yuo cna porbalby raed tihs esaliy desptie teh msispeillgns. A11yNYC • June 2019 • @iamhiwelo

Slide 38

Slide 38

You can probably read this easily despite the misspellings. A11yNYC • June 2019 • @iamhiwelo

Slide 39

Slide 39

This is possible thanks to letters’ identifying features A11yNYC • June 2019 • @iamhiwelo

Slide 40

Slide 40

These identifying features allow us to read more easily. A11yNYC • June 2019 • @iamhiwelo

Slide 41

Slide 41

Readability READABILITY A11yNYC • June 2019 • @iamhiwelo

Slide 42

Slide 42

problem porbelm pbleorm A11yNYC • June 2019 • @iamhiwelo

Slide 43

Slide 43

Saccades & fixations captured during an experimentation by Nielsen Norman Group

Slide 44

Slide 44

Readability 101.

Slide 45

Slide 45

credits: Mijksenaar

Slide 46

Slide 46

Understandable even without knowledge of the language credits: Mijksenaar

Slide 47

Slide 47

Good visual information architecture credits: Mijksenaar

Slide 48

Slide 48

Size clearly adapted to the context credits: Mijksenaar

Slide 49

Slide 49

Icons, hierarchy & wording consistency across the whole journey credits: Mijksenaar

Slide 50

Slide 50

The 4C of readability

Slide 51

Slide 51

Continuity: repetition of the information until the endpoint

Slide 52

Slide 52

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

Slide 53

Slide 53

Consistency: keeping the same wording along the way

Slide 54

Slide 54

Clarity: the message needs to be clearly understandable

Slide 55

Slide 55

Thanks Paul Mijksenaar 👍

Slide 56

Slide 56

Readability & web content.

Slide 57

Slide 57

  1. First, Open Dyslexia is not a solution.

Slide 58

Slide 58

There is no one-fits-all solution. A11yNYC • June 2019 • @iamhiwelo

Slide 59

Slide 59

So what? A11yNYC • June 2019 • @iamhiwelo

Slide 60

Slide 60

  1. Micro-typography

Slide 61

Slide 61

A good contrast is primordial. A11yNYC • June 2019 • @iamhiwelo

Slide 62

Slide 62

But too much contrast can create a blur effect. A11yNYC • June 2019 • @iamhiwelo

Slide 63

Slide 63

But too much contrast can create a blur effect. A11yNYC • June 2019 • @iamhiwelo

Slide 64

Slide 64

Try shades of black for chars, and beige for backgrounds. 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 A11yNYC • June 2019 • @iamhiwelo

Slide 65

Slide 65

Font types have an impact on readability of dyslexic folks. Good Fonts for Dyslexia L Rello, R Baeza-Yates - Proceedings of the 15th international ACM, 2013 - dl.acm.org A11yNYC • June 2019 • @iamhiwelo

Slide 66

Slide 66

Sans-serif are the most readable fonts, especially Helvetica, Courier and Arial. A11yNYC • June 2019 • @iamhiwelo

Slide 67

Slide 67

Sans-serif, roman and monospaced fonts increase reading performance. Italic fonts are doing the opposite. A11yNYC • June 2019 • @iamhiwelo

Slide 68

Slide 68

The most optimal font-size is somewhere around 14 pt. An eye tracking study of how font size, font type, and pictures influence online reading. D. Beymer, D. M. Russell, and P. Z. Orton - Proceedings INTERACT 2007, pages 456–460, 2007. Size Matters (Spacing not): 18 Points for a Dyslexic-friendly Wikipedia L Rello, M Pielot, MC Marcos, R Carlini - Proceedings of the 10th …, 2013 - dl.acm.org A11yNYC • June 2019 • @iamhiwelo

Slide 69

Slide 69

Size Matters (Spacing not): 18 Points for a Dyslexic-friendly Wikipedia L Rello, M Pielot, MC Marcos, R Carlini - Proceedings of the 10th …, 2013 - dl.acm.org A11yNYC • June 2019 • @iamhiwelo

Slide 70

Slide 70

Line-spacing appears to have few impact on readability. Size Matters (Spacing not): 18 Points for a Dyslexic-friendly Wikipedia L Rello, M Pielot, MC Marcos, R Carlini - Proceedings of the 10th …, 2013 - dl.acm.org A11yNYC • June 2019 • @iamhiwelo

Slide 71

Slide 71

“ The results can be summarised as size matters, spacing doesn’t. — Luz Rello Web Research Group & NLP Research Group Universitat Pompeu Fabra Barcelona, Spain

Slide 72

Slide 72

Spacing doesn’t matter… except when it does. A11yNYC • June 2019 • @iamhiwelo

Slide 73

Slide 73

White space is your best friend. We need resting space. 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 A11yNYC • June 2019 • @iamhiwelo

Slide 74

Slide 74

Dyslexic-friendly guidelines for web text: Line spacing: 1.4 Paragraph spacing: 2 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 A11yNYC • June 2019 • @iamhiwelo

Slide 75

Slide 75

Column width is complex: Narrower is better for readability, Wider is decreasing the perception of complexity. 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 A11yNYC • June 2019 • @iamhiwelo

Slide 76

Slide 76

Column width is complex: A good compromise is around 75-80 chars per line. 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 A11yNYC • June 2019 • @iamhiwelo

Slide 77

Slide 77

Use bold and colours for important content 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 A11yNYC • June 2019 • @iamhiwelo

Slide 78

Slide 78

Avoid underlining and italics, these tend to make the text appear to run together. British Dyslexia Association Guidelines for Web Design, 2019 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 A11yNYC • June 2019 • @iamhiwelo

Slide 79

Slide 79

Avoid text in uppercase or small caps, it is less familiar to the user and harder to read. British Dyslexia Association Guidelines for Web Design, 2019 A11yNYC • June 2019 • @iamhiwelo

Slide 80

Slide 80

When reading a paragraph, users should be able to highlight text. A11yNYC • June 2019 • @iamhiwelo

Slide 81

Slide 81

Avoid the use of too generic content, be specific for links A11yNYC • June 2019 • @iamhiwelo

Slide 82

Slide 82

  1. 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 83

Slide 83

Text alignment is super important. A11yNYC • June 2019 • @iamhiwelo

Slide 84

Slide 84

Left-align text in left-to-right languages. A11yNYC • June 2019 • @iamhiwelo

Slide 85

Slide 85

Avoid justification and centered-text. A11yNYC • June 2019 • @iamhiwelo

Slide 86

Slide 86

Multi-columns content can be confusing. A11yNYC • June 2019 • @iamhiwelo

Slide 87

Slide 87

Group small related content with a strong visual system A11yNYC • June 2019 • @iamhiwelo

Slide 88

Slide 88

Heading & Information hierarchy A11yNYC • June 2019 • @iamhiwelo

Slide 89

Slide 89

Always include the most important points in the first two paragraphs. A11yNYC • June 2019 • @iamhiwelo

Slide 90

Slide 90

Start headings with the words carrying most information A11yNYC • June 2019 • @iamhiwelo

Slide 91

Slide 91

Break up the content with regular section headings. A11yNYC • June 2019 • @iamhiwelo

Slide 92

Slide 92

Offer an outline and a summary for long content. A11yNYC • June 2019 • @iamhiwelo

Slide 93

Slide 93

Basically, use HTML and design accordingly. (yeah, dl exists and it’s amazing) A11yNYC • June 2019 • @iamhiwelo

Slide 94

Slide 94

Keeping consistent layout motivates our users to read more when looking for an information. A11yNYC • June 2019 • @iamhiwelo

Slide 95

Slide 95

Users should have two ways to access an information. A11yNYC • June 2019 • @iamhiwelo

Slide 96

Slide 96

A11yNYC • June 2019 • @iamhiwelo

Slide 97

Slide 97

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

Slide 98

Slide 98

Use active voice rather than passive voice. A11yNYC • June 2019 • @iamhiwelo

Slide 99

Slide 99

Use short & simple sentences in a direct style. A11yNYC • June 2019 • @iamhiwelo

Slide 100

Slide 100

Use images, graphics & rich media to support your content. A11yNYC • June 2019 • @iamhiwelo

Slide 101

Slide 101

A list is always clearer than a paragraph. A11yNYC • June 2019 • @iamhiwelo

Slide 102

Slide 102

Avoid abbreviations, domain-specific jargon and double negatives. A11yNYC • June 2019 • @iamhiwelo

Slide 103

Slide 103

  1. Propose distraction-free experiences

Slide 104

Slide 104

You know… this kind of really useful distractions

Slide 105

Slide 105

Hey buddy! You looks friendly but… no thank you!

Slide 106

Slide 106

Slide 107

Slide 107

And please… do not make assumption on the time needed by a user to read a content.

Slide 108

Slide 108

bonus The last, but not the least…

Slide 109

Slide 109

bonus ✂

Slide 110

Slide 110

bonus It’s time to remove unnecessary content.

Slide 111

Slide 111

How to experiment with your projects?

Slide 112

Slide 112

Using recording tools showing mouse position heat-maps A11yNYC • June 2019 • @iamhiwelo

Slide 113

Slide 113

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

Slide 114

Slide 114

Using a screen reader and tools like the Web Rotor. A11yNYC • June 2019 • @iamhiwelo

Slide 115

Slide 115

A11yNYC • June 2019 • @iamhiwelo

Slide 116

Slide 116

Calculate your readability score A11yNYC • June 2019 • @iamhiwelo

Slide 117

Slide 117

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

Slide 118

Slide 118

Some good examples.

Slide 119

Slide 119

Definitely not perfect (😅), but interesting and distraction-limited experience.

Slide 120

Slide 120

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

Slide 121

Slide 121

Readability and content grouping with in clear way

Slide 122

Slide 122

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

Slide 123

Slide 123

Merci beaucoup ! % Thank you! & @iamhiwelo Tack! ’ Bedankt! (

Slide 124

Slide 124

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