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

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

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

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

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

READABILITY & ACCESSIBILITY BY DESIGN

Readability, why?

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.

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]

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

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

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

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.

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

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

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.

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.

How do we read?

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.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Saccades & fixations, experimentation by Nielsen Norman Group

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

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

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

Readability 101.

credits: Mijksenaar

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

Continuity: repetition of the information until the endpoint

Conspicuity: being easily seen or noticed

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

Clarity: the message needs to be clearly understandable

Thanks Paul Mijksenaar 👍

Readability & web content.

  1. Micro-typography

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

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

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

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

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

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

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

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

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

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

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

  1. Macro-typography

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

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

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

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

  1. Layout

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

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

Inclusive Design & Accessibility meetup • March 2019 • @iamhiwelo

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)

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)

The famous F-pattern

Inclusive Design & Accessibility meetup • March 2019 • @iamhiwelo

F-pattern, Z-pattern, or layer-cake-pattern? Just use a logical pattern. Inclusive Design & Accessibility meetup • March 2019 • @iamhiwelo

  1. Global experience

Propose distraction-free experiences Inclusive Design & Accessibility meetup • March 2019 • @iamhiwelo

You know… this kind of really useful distractions

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

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

The last, but not the least… Inclusive Design & Accessibility meetup • March 2019 • @iamhiwelo

✂ Inclusive Design & Accessibility meetup • March 2019 • @iamhiwelo

Remove unneeded content, actions, sections, etc. Inclusive Design & Accessibility meetup • March 2019 • @iamhiwelo

How to experiment with your projects?

Let’s take a generic text

Start by adding more hierarchy

And remember, we always need more whitespace!

Efficient but less accurate than eye tracking: Moves heatmaps

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

Using a screen reader and tools like a Web rotor Inclusive Design & Accessibility meetup • March 2019 • @iamhiwelo

Inclusive Design & Accessibility meetup • March 2019 • @iamhiwelo

Some good examples.

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

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

A good grid and a good hierarchy is everything.

Readability and content grouping with in clear way

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

Merci beaucoup ! $ Thank you! % @iamhiwelo Tack! & Bedankt! ‘

Damien Senger Product designer & accessibility advocate raccoon lover raccoon.studio • noti.st/hiwelo @iamhiwelo