Readability on the Web

A presentation at Dutch Digital Accessibility Congress 2019 in May 2019 in Driebergen, Driebergen-Rijsenburg, Netherlands by Damien Senger

Slide 1

Slide 1

Readability on the Web • NCDT 2019 • May 16, 2019

Slide 2

Slide 2

Photo of a woman reading a book on a couch in a living room. Photo by iam Se7en on Unsplash

Slide 3

Slide 3

Photo of a man reading a book in a park, sitting on the grass. Photo by Tamarcus Brown on Unsplash

Slide 4

Slide 4

Photo of a woman reading a coffee place. Photo by Praveen Gupta on Unsplash

Slide 5

Slide 5

Photo of a subway with people reading newspapers. Photo by Peter Lawrence on Unsplash

Slide 6

Slide 6

Photo of a non-binary person reading on a smartphone. 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

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

Slide 10

Slide 10

So! Let’s talk about readability.

Slide 11

Slide 11

But first, why?

Slide 12

Slide 12

Reading is not an easy thing.

Slide 13

Slide 13

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

Slide 14

Slide 14

There is two groups of reading impairments

Slide 15

Slide 15

Vision impairments Blindness Eye infection Hay’s fever Visual distraction

Slide 16

Slide 16

Cognitive impairments Dyslexia Hyperlexia (Autism/ADHD) Fluency Stressful context

Slide 17

Slide 17

A quick focus on dyslexia

Slide 18

Slide 18

Up to 7% of the global population.

Slide 19

Slide 19

Commonly associated with ADHD, autism and dyscalculia.

Slide 20

Slide 20

Can also appear after traumatic brain injuries and strokes.

Slide 21

Slide 21

How do we read?

Slide 22

Slide 22

Reading is mainly a phonological process.

Slide 23

Slide 23

The reading experience depends a lot of the context & environment

Slide 24

Slide 24

Reading is not linear, we are reading by saccades.

Slide 25

Slide 25

And between each saccades, we have something called fixation.

Slide 26

Slide 26

During a fixation, everything except the focus is blurry.

Slide 27

Slide 27

And every few fixations, we need a small break.

Slide 28

Slide 28

The size of our saccades and the frequency of fixations are depend of the type of reading. On screens, we are mainly using our exploratory reading pattern.

Slide 29

Slide 29

Web Content Accessibility Guidelines (WCAG) is developed through the W3C process in cooperation with individuals and organizations around the world, with a goal of providing a single shared standard for web content accessibility that meets the needs of individuals, organizations, and governments internationally.

Slide 30

Slide 30

We are first analysing the paragraph before starting to read.

Slide 31

Slide 31

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

Slide 32

Slide 32

Yuo cna porbalby raed tihs esaliy desptie teh msispeillgns.

Slide 33

Slide 33

You can probably read this easily despite the misspellings.

Slide 34

Slide 34

This is possible thanks to letters’ identifying features

Slide 35

Slide 35

These identifying features allow us to read more easily.

Slide 36

Slide 36

Readability READABILITY

Slide 37

Slide 37

problem porbelm pbleorm

Slide 38

Slide 38

Saccades & fixations, experimentation by Nielsen Norman Group

Slide 39

Slide 39

Readability 101.

Slide 40

Slide 40

Photo of a hallway in an airport with giant signs. credits: Mijksenaar

Slide 41

Slide 41

The 4C of readability

Slide 42

Slide 42

Continuity: repetition of the information until the endpoint

Slide 43

Slide 43

Conspicuity: being easily seen or noticed

Slide 44

Slide 44

Consistency: keeping the same wording along the way

Slide 45

Slide 45

Clarity: the message needs to be clearly understandable

Slide 46

Slide 46

Thanks Paul Mijksenaar 👍

Slide 47

Slide 47

Readability & web content.

Slide 48

Slide 48

  1. First, Open Dyslexia is not a solution.

Slide 49

Slide 49

There is no one-fits-all solution.

Slide 50

Slide 50

So what?

Slide 51

Slide 51

  1. Micro-typography

Slide 52

Slide 52

A good contrast is primordial.

Slide 53

Slide 53

But too much contrast can create a blur effect.

Slide 54

Slide 54

But too much contrast can create a blur effect.

Slide 55

Slide 55

Try shades of black for chars, and beige for backgrounds.

Slide 56

Slide 56

White space is your best friend. We need resting space.

Slide 57

Slide 57

Align to the centre is for title. Justify text should be avoid.

Slide 58

Slide 58

In paragraph, users should be able to highlight text.

Slide 59

Slide 59

Bold important content

Slide 60

Slide 60

Avoid the use of too generic content, be specific for links

Slide 61

Slide 61

Use HTML and design accordingly. (yeah, dl exists and it’s amazing)

Slide 62

Slide 62

Basically, please be semantic.

Slide 63

Slide 63

  1. Use a heading hierarchy (so users can navigate quickly where the content they are looking for is)

Slide 64

Slide 64

Always include the most important points in the first two paragraphs.

Slide 65

Slide 65

Start headings with the words carrying most information

Slide 66

Slide 66

Group small related content with a strong visual system

Slide 67

Slide 67

  1. Take care of your layout

Slide 68

Slide 68

Keeping consistent layout motivates our users to read more when looking for an information.

Slide 69

Slide 69

Users should have two ways to access an information.

Slide 70

Slide 70

Video of a user going through the homepage of my portfolio with pages accessible from the navigation and from the content itself.

Slide 71

Slide 71

  1. Propose distraction-free experiences

Slide 72

Slide 72

You know… this kind of really useful distractions

Slide 73

Slide 73

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

Slide 74

Slide 74

And please… let your users the time they need to read.

Slide 75

Slide 75

+1 The last, but not the least…

Slide 76

Slide 76

+1 ✂

Slide 77

Slide 77

+1 Remove unneeded content.

Slide 78

Slide 78

How to experiment with your projects?

Slide 79

Slide 79

Using recording tools showing mouse position heat-maps

Slide 80

Slide 80

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

Slide 81

Slide 81

Using a screen reader and tools like a Web Rotor.

Slide 82

Slide 82

Video of a user going on my portfolio and using the WebRotor feature of my screen reader to see the heading hierarchy.

Slide 83

Slide 83

Some good examples.

Slide 84

Slide 84

Except the contrast (😅), this is readable and distraction-limited.

Slide 85

Slide 85

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

Slide 86

Slide 86

A good grid and a good hierarchy is everything.

Slide 87

Slide 87

Readability and content grouping with in clear way

Slide 88

Slide 88

A nice & clearly readable design, must-have for webshop

Slide 89

Slide 89

Merci beaucoup ! Thank you! Tack! Bedankt!

Slide 90

Slide 90

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