Readability & Accessibility by design

A presentation at Inclusive Design & Accessibility Meetup in March 2019 in Rotterdam, Netherlands by Damien Senger

Slide 1

READABILITY & ACCESSIBILITY BY DESIGN Inclusive Design & Accessibility • March 21, 2019

Slide 2

Damien Senger Digital designer • accessibility advocate raccoon.studio • @iamhiwelo Raccoon Studio Castor EDC

Slide 3

Damien Senger Digital designer • accessibility advocate raccoon.studio • @iamhiwelo yes, I love raccoons! Raccoon Studio Castor EDC

Slide 4

Damien Senger Digital designer • accessibility advocate raccoon.studio • @iamhiwelo and we’re recruiting! Raccoon Studio Castor EDC

Slide 5

Good to know: This talk slides are available on Noti.st. https:!//noti.st/hiwelo/0Jj6nm and if you like it, don’t hesitate to invite me to your meetup or conference to talk about inclusive design, accessibility or queer representation in design

Slide 6

READABILITY & ACCESSIBILITY BY DESIGN

Slide 7

Readability, why?

Slide 8

Reading is not an easy thing. Inclusive Design & Accessibility meetup • March 2019 • @iamhiwelo Reading is complex. It requires our brains to connect letters to sounds, put those sounds in the right order, and pull the words together into sentences and paragraphs we can read and comprehend.

Slide 9

The Web is mainly text-based, and a text is not accessible per se. Inclusive Design & Accessibility meetup • March 2019 • @iamhiwelo And there is two good reasons behind that: [next slide]

Slide 10

Vision impairments Blindness Eye infection Hay’s fever Visual distraction Microsoft icons Inclusive Design & Accessibility meetup • March 2019 • @iamhiwelo

Slide 11

Cognitive impairments Dyslexia Hyperlexia (Autism/ADHD) Fluency Stressful context Microsoft icons Inclusive Design & Accessibility meetup • March 2019 • @iamhiwelo

Slide 12

There is several types of reading impairments Inclusive Design & Accessibility meetup • March 2019 • @iamhiwelo • • • • Dyslexia Attention disorder ASD Lack of knowledge of a language

Slide 13

Let’s focus on dyslexia. Inclusive Design & Accessibility meetup • March 2019 • @iamhiwelo People with dyslexia have trouble matching the letters they see on the page with the sounds those letters and combinations of letters make. And when they have trouble with that step, all the other steps are harder.

Slide 14

Language comprehension Phonological deficit Processing speed & accuracy Inclusive Design & Accessibility meetup • March 2019 • @iamhiwelo

Slide 15

And also on attention-related impairments Inclusive Design & Accessibility meetup • March 2019 • @iamhiwelo

Slide 16

Dyslexia, ASD & ADHD is a lifelong impairment. Inclusive Design & Accessibility meetup • March 2019 • @iamhiwelo Dyslexia can’t be “cured” – it is lifelong. But with the right supports, dyslexic individuals can become highly successful students and adults.

Slide 17

Dyslexia, ASD & ADHD are strongly linked together and more common than expected. Inclusive Design & Accessibility meetup • March 2019 • @iamhiwelo Dyslexia is also very common, affecting 20 percent of the population and representing 80–90 percent of all those with learning disabilities. Scientific research shows differences in brain connectivity between dyslexic and typical reading children, providing a neurological basis for why reading fluently is a struggle for those with dyslexia. About 50 to 60 percent of people with ADHD also have a learning disability. The most common of these is dyslexia, a language-based learning disability that affects reading. Eight to 17 percent of the population is affected by dyslexia, and it is vastly misunderstood.

Slide 18

How do we read?

Slide 19

The reading experience depends a lot of the context & environment Inclusive Design & Accessibility meetup • March 2019 • @iamhiwelo It’s shaped by our surroundings (am I in a loud coffee shop or otherwise distracted?), our availability (am I busy with something else?), our needs (am I skimming for something specific?), and more. Reading is not only informed by what’s going on with us at that moment, but also governed by how our eyes and brains work to process information. As our eyes move across the text, our minds gobble up the type’s texture—the sum of the positive and negative spaces inside and around letters and words. We don’t linger on those spaces and details; instead, our brains do the heavy lifting of parsing the text and assembling a mental picture of what we’re reading. Our eyes see the type and our brains see Don Quixote chasing a windmill.

Slide 20

Reading is not linear, we are reading by saccades. Inclusive Design & Accessibility meetup • March 2019 • @iamhiwelo

Slide 21

And between each saccades, we have something called fixation. Inclusive Design & Accessibility meetup • March 2019 • @iamhiwelo

Slide 22

During a fixation, everything except the focus is blurry. Inclusive Design & Accessibility meetup • March 2019 • @iamhiwelo

Slide 23

And every few fixations, we need a small break Inclusive Design & Accessibility meetup • March 2019 • @iamhiwelo

Slide 24

Saccades, fixations, breaks… there is nothing linear (at all) Inclusive Design & Accessibility meetup • March 2019 • @iamhiwelo

Slide 25

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. Inclusive Design & Accessibility meetup • March 2019 • @iamhiwelo

Slide 26

We are mainly using shapes to identify words when reading. Inclusive Design & Accessibility meetup • March 2019 • @iamhiwelo

Slide 27

Translation: We are not reading in a word-by-word manner. Inclusive Design & Accessibility meetup • March 2019 • @iamhiwelo

Slide 28

Yuo cna porbalby raed tihs esaliy desptie teh msispeillgns. Inclusive Design & Accessibility meetup • March 2019 • @iamhiwelo

Slide 29

You can probably read this easily despite the misspellings. Inclusive Design & Accessibility meetup • March 2019 • @iamhiwelo

Slide 30

This is possible thanks to the letters’ identifying features. Inclusive Design & Accessibility meetup • March 2019 • @iamhiwelo

Slide 31

These identifying features able us to read more easily. Inclusive Design & Accessibility meetup • March 2019 • @iamhiwelo

Slide 32

Readability READABILITY Inclusive Design & Accessibility meetup • March 2019 • @iamhiwelo

Slide 33

problem porbelm pbleorm Inclusive Design & Accessibility meetup • March 2019 • @iamhiwelo

Slide 34

Saccades & fixations, experimentation by Nielsen Norman Group

Slide 35

Two spots are with the same colour. Which ones? Inclusive Design & Accessibility meetup • March 2019 • @iamhiwelo

Slide 36

Let’s try again. Inclusive Design & Accessibility meetup • March 2019 • @iamhiwelo

Slide 37

Proximity could also help us, but this is an other topic #gestalt Inclusive Design & Accessibility meetup • March 2019 • @iamhiwelo

Slide 38

Readability 101.

Slide 39

credits: Mijksenaar

Slide 40

The 4C of readability Inclusive Design & Accessibility meetup • March 2019 • @iamhiwelo

Slide 41

Continuity: repetition of the information until the endpoint

Slide 42

Conspicuity: being easily seen or noticed

Slide 43

Consistency: keeping the same wording along the way Baggage always, not luggage, or baggage hall don’t start to be baggage claim.

Slide 44

Clarity: the message needs to be clearly understandable

Slide 45

Thanks Paul Mijksenaar 👍

Slide 46

Readability & web content.

Slide 47

Micro-typography

Slide 48

First, Open Dyslexia is not a solution. Inclusive Design & Accessibility meetup • March 2019 • @iamhiwelo

Slide 49

There is no one-fits-all solution. Inclusive Design & Accessibility meetup • March 2019 • @iamhiwelo

Slide 50

Dark grey is the new black. Inclusive Design & Accessibility meetup • March 2019 • @iamhiwelo

Slide 51

Too much contrast can create a blur effect. Inclusive Design & Accessibility meetup • March 2019 • @iamhiwelo

Slide 52

Too much contrast can create a blur effect. Inclusive Design & Accessibility meetup • March 2019 • @iamhiwelo

Slide 53

Try shades of grey for chars, and beige for backgrounds. Inclusive Design & Accessibility meetup • March 2019 • @iamhiwelo

Slide 54

White space is your best friend. We need resting space. Inclusive Design & Accessibility meetup • March 2019 • @iamhiwelo

Slide 55

Align to the centre & justify texts should be avoided. Inclusive Design & Accessibility meetup • March 2019 • @iamhiwelo

Slide 56

In paragraph, users should be able to highlight text. Inclusive Design & Accessibility meetup • March 2019 • @iamhiwelo

Slide 57

Bold important content Inclusive Design & Accessibility meetup • March 2019 • @iamhiwelo

Slide 58

Avoid the use of too generic content, be specific for links Inclusive Design & Accessibility meetup • March 2019 • @iamhiwelo

Slide 59

Macro-typography

Slide 60

Always include the most important points in the first two paragraphs. Inclusive Design & Accessibility meetup • March 2019 • @iamhiwelo

Slide 61

Use a heading hierarchy (so users can navigate quickly where the content they are looking for is) Inclusive Design & Accessibility meetup • March 2019 • @iamhiwelo

Slide 62

Start headings with the word(s) carrying most of the information Inclusive Design & Accessibility meetup • March 2019 • @iamhiwelo

Slide 63

Group small related content with a strong visual system Inclusive Design & Accessibility meetup • March 2019 • @iamhiwelo

Slide 64

Layout

Slide 65

Be semantic, and visual. (i.e. a list must be displayed as a list) Inclusive Design & Accessibility meetup • March 2019 • @iamhiwelo

Slide 66

Users should have two ways to access an information Inclusive Design & Accessibility meetup • March 2019 • @iamhiwelo

Slide 67

Inclusive Design & Accessibility meetup • March 2019 • @iamhiwelo

Slide 68

Keeping consistent layout motivates our users to read more when looking for an information. Inclusive Design & Accessibility meetup • March 2019 • @iamhiwelo A user looked almost to the bottom of a farcically long page when looking for information about whether mallard ducks dive for food, on the Fisheries and Oceans of Canada website, www.dfo- mpo.gc.ca. The consistent layout and thorough content motivated him. Not the case when people are just browsing. Nielsen Norman Group (p 22)

Slide 69

Users can be easily bored without good visual hierarchy. Inclusive Design & Accessibility meetup • March 2019 • @iamhiwelo A user looked almost to the bottom of a farcically long page when looking for information about whether mallard ducks dive for food, on the Fisheries and Oceans of Canada website, www.dfo- mpo.gc.ca. The consistent layout and thorough content motivated him. Not the case when people are just browsing. Nielsen Norman Group (p 22)