Writing for
Every Reader
https://developer.mozilla.org/Web/Accessibility
Cognitive disabilities
- http://webaim.org/articles/cognitive/
“In loose terms, a person with a
cognitive disability has greater
difficulty with one or more types of
mental tasks than the average
person.”
Clinical diagnoses
• Dyslexia
• Learning
disabilities
• ADD / ADHD
• Brain injury
• Dementia
• Alzheimer’s
• Aphasia
• Downe syndrome
• Autism spectrum
Functional effects
Functional effects
• Permanent
• Temporary
• Situational
Memory
Memory
• Short term
• Long term
• Working
Attention
Comprehension
Comprehension
• Reading
• Verbal
• Linguistic
• Math
• Visual
Problem-solving
Functional effects
• Memory
• Attention
• Comprehension
• Problem solving
Make reading easier.
Make reading easier.
• Readability
• Understandability
• Legibility
• Structure
Readability
Readability
• Short sentences
• Simple words
Advantageous
Facilitate
Leverage
Good
Help
Use
→
→
→
Readability
• Short sentences
• Simple words
• Avoid adverbs
Ran quickly
Said suddenly
Carefully balanced
Screamed loudly
Sprinted
Blurted
Balanced
Screamed
→
→
→
→
Readability
• Short sentences
• Simple words
• Avoid adverbs
• Active voice
The tea will be poured by Stephanie.
→ Stephanie will pour the tea.
Cookies will be provided by Maria.
→ Maria will provide cookies.
Readability
• Short sentences
• Simple words
• Avoid adverbs
• Active voice
• 8th grade reading level
HemingwayApp
- Jakob Nielsen being a bad example
“Avoid convoluted sentence structures,
especially compound sentences with
many subordinate clauses and
conjunctions that put a strain on users’
short-term memory, which is a
notoriously weak point.”
- What Jakob Nielsen meant
“Use short and simple sentences.
Sentences with more than one idea
strain users’ short-term memories.”
Understandability
Understandability
• No idioms
• No sarcasm or rhetorical questions
• No pop culture or slang
• Avoid jargon
“QuickReg getting you down? We
don’t want that, do we? Sidle up to
the SS desk and we’ll see you leave
happy as a clam.”
“QuickReg getting you down? We
don’t want that, do we? Sidle up to
the SS desk and we’ll see you leave
happy as a clam.”
“QuickReg getting you down? We
don’t want that, do we? Sidle up to
the SS desk and we’ll see you leave
happy as a clam.”
“QuickReg getting you down? We
don’t want that, do we? Sidle up to
the SS desk and we’ll see you leave
happy as a clam.”
“If you are having trouble registering
for courses come to the Student
Services desk. We can help you
register.”
Understandability
• Be literal
• Say what you mean
Legibility
Legibility
• Large text
• Sans-serif font
• Enough contrast
• Left align
• No italics
Legibility
• Use sentence case
• Increase line-heights (150%)
• Increase margins
• Restrict line-length (50-75 chars)
Legibility
• Place text on a solid colour
background
Legibility
• Use semantic HTML
BeeLine Reader
- https://en.wikipedia.org/wiki/Tea
B L A C K T E A S : A S S A M ,
D A R J E E L I N G , A N D
C E Y LO N. R E A D M O R E .
GREEN TEAS: DRAGON’S
W E L L , M A T C H A , A N D
S E N C H A . R E A D M O R E .
H E R B A L T E A S :
C H A MO M I L E , RO O I BO S,
AND PEPPERMINT. READ
MORE.
BLACK TEAS: ASSAM,
D A R J E E L I N G , A N D
CEYLON. READ MORE.
GREEN TEAS: DRAGON’S
WELL, MATCHA, AND
SENCHA. READ MORE.
H E R B A L T E A S :
CHAMOMILE, ROOIBOS,
AND PEPPERMINT. READ
MORE.
BLACK TEAS: ASSAM,
D A R J E E L I N G , A N D
CEYLON. READ MORE.
GREEN TEAS: DRAGON’S
WELL, MATCHA, AND
SENCHA. READ MORE.
H E R B A L T E A S :
CHAMOMILE, ROOIBOS,
AND PEPPERMINT. READ
MORE.
BLACK TEAS: ASSAM,
DARJEELING, AND
CEYLON. READ MORE.
GREEN TEAS: DRAGON’S
WELL, MATCHA, AND
SENCHA. READ MORE.
HERBAL TEAS:
CHAMOMILE, ROOIBOS,
AND PEPPERMINT. READ
MORE.
BLACK TEAS: ASSAM,
DARJEELING, AND
CEYLON. READ MORE.
GREEN TEAS: DRAGON’S
WELL, MATCHA, AND
SENCHA. READ MORE.
HERBAL TEAS:
CHAMOMILE, ROOIBOS,
AND PEPPERMINT. READ
MORE.
Black teas: Assam,
Darjeeling, and Ceylon.
Read more. Green teas:
Dragon’s Well, Matcha, and
Sencha. Read more. Herbal
teas: Chamomile, Rooibos,
and Peppermint. Read
more.
Black teas: Assam,
Darjeeling, and Ceylon.
Read more. Green teas:
Dragon’s Well, Matcha, and
Sencha. Read more. Herbal
teas: Chamomile, Rooibos,
and Peppermint. Read
more.
Black teas: Assam,
Darjeeling, and Ceylon.
Read more. Green teas:
Dragon’s Well, Matcha,
and Sencha. Read more.
Herbal teas: Chamomile,
Rooibos, and
Peppermint. Read more.
Black teas: Assam,
Darjeeling, and Ceylon.
Read more. Green teas:
Dragon’s Well, Matcha,
and Sencha. Read more.
Herbal teas: Chamomile,
Rooibos, and
Peppermint. Read more.
Structure
Structure
• Use headings and lists
• Make small chunks of content
• Put most important information first
Structure
• Use headings and lists
• Make small chunks of content
• Put most important information first
Black teas: Assam, Darjeeling, and Ceylon.
Read more. Green teas: Dragon’s Well,
Matcha, and Sencha. Read more. Herbal teas:
Chamomile, Rooibos, and Peppermint. Read
more.
Black teas
Assam, Darjeeling, and Ceylon. Read more.
Green teas
Dragon’s Well, Matcha, and Sencha. Read more.
Herbal teas
Chamomile, Rooibos, and Peppermint. Read
more.
Black teas
• Assam
• Ceylon
• Darjeeling
Read more
Green teas
• Dragon’s Well
• Matcha
Use media thoughtfully.
Images
• Use images
• Only use appropriate images
• Don’t just use images
<figure>
<img src="tea.jpg" alt=“” />
<figcaption>
In Britain black teas are
usually served hot with
milk and sugar on the
side.</figcaption>
</figure>
Alternate text
• Be accurate and equivalent
• Keep it short
• Don’t repeat information
• Don’t start with "picture of ..."
Icons
• Also display text
• Use SVG
Videos
• Provide transcripts
• Keep it short
• Never autoplay or loop
JWPlayer
Amara.org
Label interactions.
Links
• Use key words that describe the
page being linked to
• Put keywords at the front of the link
Black teas
• Assam
• Ceylon
• Darjeeling
Read more
Green teas
• Dragon’s Well
• Matcha
• Sencha
Read more
Herbal teas
• Chamomile
• Peppermint
• Rooibos
Read more
Black teas
• Assam
• Ceylon
• Darjeeling
Green teas
• Dragon’s Well
• Matcha
• Sencha
Herbal teas
• Chamomile
• Peppermint
• Rooibos
Forms
• Left align labels, fields, and buttons
• No reset / clear button
Forms
• Break big tasks into smaller steps
• Let users go away and come back
• Give them lots of time
• Make the purpose of the form clear
on each page
Forms
• Limit visual noise
• Remove distractions
Forms
• Error messages should be specific
• Put errors messages in context
• Warn users when an action has
permanent consequences
Summary
Summary
• Memory
• Attention
• Comprehension
• Problem solving
Summary
• Make reading easier
• Use media thoughtfully
• Label interactions
I Like To Make Websites
Everyone Can Use
@stephaniehobson
stephaniehobson.ca

Writing for Every Reader