A presentation at Inclusive Design & Accessibility Meetup in in Rotterdam, Netherlands by Damien Senger
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.
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
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
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
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
Reading is not an easy thing. It is complicated for people with reading or cognitive impairments but also for everybody depending of the context. Luckily for our all our users, there is a lot of small improvements and tips every designer, content-writer and developer can do in a project to improve the life all our users.
Here’s what was said about this presentation on social media.
for free. You
can too.