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

LOWER LITERACY: IT’S NOT THE USER, IT’S THE PRODUCT A11y Meetup • Berlin, Germany • July 2, 2019

Photo by iam Se7en on Unsplash

Photo by Tamarcus Brown on Unsplash

Photo by Praveen Gupta on Unsplash

Photo by Peter Lawrence on Unsplash

Photo from The Gender Spectrum Collection

Hi! 👋 I’m Damien.

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

So! Let’s talk about readability.

But first, why?

Reading is not an easy thing. A11y Berlin • July 2019 • @iamhiwelo

The Web is mainly text-based And a text is not accessible per se. A11y Berlin • July 2019 • @iamhiwelo

There is two groups of reading impairments A11y Berlin • July 2019 • @iamhiwelo

Vision impairments Blindness Eye infection Hay’s fever Visual distraction Microsoft icons A11y Berlin • July 2019 • @iamhiwelo

Cognitive impairments Dyslexia Hyperlexia (Autism/ADHD) Fluency Stressful context Microsoft icons A11y Berlin • July 2019 • @iamhiwelo

A quick focus on dyslexia

± 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 A11y Berlin • July 2019 • @iamhiwelo

Commonly associated with ADHD, autism or dyscalculia. A11y Berlin • July 2019 • @iamhiwelo

Not always since childhood: it can appear after traumatic brain injuries and strokes. A11y Berlin • July 2019 • @iamhiwelo

Dyslexia is not only about reading. A11y Berlin • July 2019 • @iamhiwelo

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 A11y Berlin • July 2019 • @iamhiwelo

How do we read?

Reading is about sounds. Reading is about music. A11y Berlin • July 2019 • @iamhiwelo

Reading is mainly a phonological process. A11y Berlin • July 2019 • @iamhiwelo

The reading experience depends a lot of the context & environment A11y Berlin • July 2019 • @iamhiwelo

Reading is not linear, we are reading by saccades. A11y Berlin • July 2019 • @iamhiwelo

And between each saccades, we have something called fixation. A11y Berlin • July 2019 • @iamhiwelo

During a fixation, everything except the focus is blurry. § A11y Berlin • July 2019 • @iamhiwelo

And every few fixations, we need a small break. A11y Berlin • July 2019 • @iamhiwelo

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. A11y Berlin • July 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. A11y Berlin • July 2019 • @iamhiwelo

We are first analysing the paragraph before starting to read. A11y Berlin • July 2019 • @iamhiwelo

On a screen, we are not reading in a word-by-word manner. A11y Berlin • July 2019 • @iamhiwelo

Yuo cna porbalby raed tihs esaliy desptie teh msispeillgns. A11y Berlin • July 2019 • @iamhiwelo

You can probably read this easily despite the misspellings. A11y Berlin • July 2019 • @iamhiwelo

This is possible thanks to letters’ identifying features A11y Berlin • July 2019 • @iamhiwelo

These identifying features allow us to read more easily. A11y Berlin • July 2019 • @iamhiwelo

Readability READABILITY A11y Berlin • July 2019 • @iamhiwelo

problem porbelm pbleorm A11y Berlin • July 2019 • @iamhiwelo

Saccades & fixations captured during an experimentation by Nielsen Norman Group

Readability 101.

credits: Mijksenaar

Understandable even without knowledge of the language credits: Mijksenaar

Good visual information architecture credits: Mijksenaar

Size clearly adapted to the context credits: Mijksenaar

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

The 4C of readability

Continuity: repetition of the information until the endpoint

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

Consistency: keeping the same wording along the way

Clarity: the message needs to be clearly understandable

Thanks Paul Mijksenaar 👍

Readability & web content.

First, Open Dyslexia is not a solution. A11y Berlin • July 2019 • @iamhiwelo

There is no one-fits-all solution. A11y Berlin • July 2019 • @iamhiwelo

So what? A11y Berlin • July 2019 • @iamhiwelo

Micro-typography

A good contrast is primordial. A11y Berlin • July 2019 • @iamhiwelo

But too much contrast can create a blur effect. A11y Berlin • July 2019 • @iamhiwelo

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 A11y Berlin • July 2019 • @iamhiwelo

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

Sans-serif are the most readable fonts, especially Helvetica, Courier and Arial. A11y Berlin • July 2019 • @iamhiwelo

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

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 A11y Berlin • July 2019 • @iamhiwelo

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 A11y Berlin • July 2019 • @iamhiwelo

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 A11y Berlin • July 2019 • @iamhiwelo

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

Spacing doesn’t matter… except when it does. A11y Berlin • July 2019 • @iamhiwelo

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 A11y Berlin • July 2019 • @iamhiwelo

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 A11y Berlin • July 2019 • @iamhiwelo

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 A11y Berlin • July 2019 • @iamhiwelo

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 A11y Berlin • July 2019 • @iamhiwelo

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 A11y Berlin • July 2019 • @iamhiwelo

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 A11y Berlin • July 2019 • @iamhiwelo

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 A11y Berlin • July 2019 • @iamhiwelo

When reading a paragraph, users should be able to highlight text. A11y Berlin • July 2019 • @iamhiwelo

Avoid the use of too generic content, be specific for links A11y Berlin • July 2019 • @iamhiwelo

🎨 Having a good contrast is essential, but careful 💛 Using yellowish/beige background can help 🔤 Sans-serif and monospaced for the win 📏 White space is your friend, use it wisely 🚨 Use colours & weights to attract attention role=drinks • June 2019 • @iamhiwelo

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 2.

Text alignment is super important. A11y Berlin • July 2019 • @iamhiwelo

Left-align text in left-to-right languages. A11y Berlin • July 2019 • @iamhiwelo

Avoid justification and centered-text. A11y Berlin • July 2019 • @iamhiwelo

Multi-columns content can be confusing. A11y Berlin • July 2019 • @iamhiwelo

Heading & Information hierarchy A11y Berlin • July 2019 • @iamhiwelo

Always include the most important points in the first two paragraphs. A11y Berlin • July 2019 • @iamhiwelo

Start headings with the words carrying most information A11y Berlin • July 2019 • @iamhiwelo

Break up the content with regular section headings. A11y Berlin • July 2019 • @iamhiwelo

Offer an outline and a summary for long content. A11y Berlin • July 2019 • @iamhiwelo

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

Keeping consistent layout motivates our users to read more when looking for an information. A11y Berlin • July 2019 • @iamhiwelo

Users should have two ways to access an information. A11y Berlin • July 2019 • @iamhiwelo

A11y Berlin • July 2019 • @iamhiwelo

↔ Prefer left alignment for texts in LtR languages 📢 Use headings to make the information clearer 💻 Use semantic markup & design accordingly 🎛 Create consistency in the layout 🗺 Provide two ways to access content role=drinks • June 2019 • @iamhiwelo

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

Use an active voice rather than passive voice 📢 Use short & simple sentences in direct style 🌅 Use images & medias to support your content ▪ A list is always clearer than a paragraph 🛠 Avoid jargon-specific language and abbreviations role=drinks • June 2019 • @iamhiwelo

Propose distraction-free experiences

You know… this kind of really useful distractions

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

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

The last, but not the least… +1

✂ A11y Berlin • July 2019 • @iamhiwelo

It’s time to remove unnecessary content. A11y Berlin • July 2019 • @iamhiwelo

How to experiment with your projects?

Using recording tools showing mouse position heat-maps A11y Berlin • July 2019 • @iamhiwelo

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

Using a screen reader and tools like the Web Rotor. A11y Berlin • July 2019 • @iamhiwelo

A11y Berlin • July 2019 • @iamhiwelo

Calculate your readability score A11y Berlin • July 2019 • @iamhiwelo

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

Some good examples.

Definitely not perfect (why such a painful green OMG 😅), but interesting and distraction-limited experience.

Readability and content grouping with in clear way

Tack! 5 Merci beaucoup ! 3 Bedankt! 6 Thank you! 4 Vielen danke! 7 @iamhiwelo

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