1. Writing for
Every Reader

4. https://developer.mozilla.org/Web/Accessibility

6. Cognitive disabilities

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

8. Clinical diagnoses
• Dyslexia
• Learning
disabilities
• ADD / ADHD
• Brain injury
• Dementia
• Alzheimer’s
• Aphasia
• Downe syndrome
• Autism spectrum

9. Functional effects

10. Functional effects
• Permanent
• Temporary
• Situational

11. Memory

12. Memory
• Short term
• Long term
• Working

13. Attention

14. Comprehension

15. Comprehension
• Reading
• Verbal
• Linguistic
• Math
• Visual

16. Problem-solving

17. Functional effects
• Memory
• Attention
• Comprehension
• Problem solving

18. Make reading easier.

19. Make reading easier.
• Readability
• Understandability
• Legibility
• Structure

20. Readability

21. Readability
• Short sentences
• Simple words

22. Advantageous
Facilitate
Leverage
Good
Help
Use
→
→
→

23. Readability
• Short sentences
• Simple words
• Avoid adverbs

24. Ran quickly
Said suddenly
Carefully balanced
Screamed loudly
Sprinted
Blurted
Balanced
Screamed
→
→
→
→

25. Readability
• Short sentences
• Simple words
• Avoid adverbs
• Active voice

26. The tea will be poured by Stephanie.
→ Stephanie will pour the tea.
Cookies will be provided by Maria.
→ Maria will provide cookies.

27. Readability
• Short sentences
• Simple words
• Avoid adverbs
• Active voice
• 8th grade reading level

28. HemingwayApp

29. - 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.”

30. - What Jakob Nielsen meant
“Use short and simple sentences.
Sentences with more than one idea
strain users’ short-term memories.”

31. Understandability

32. Understandability
• No idioms
• No sarcasm or rhetorical questions
• No pop culture or slang
• Avoid jargon

33. “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.”

34. “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.”

35. “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.”

36. “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.”

37. “If you are having trouble registering
for courses come to the Student
Services desk. We can help you
register.”

38. Understandability
• Be literal
• Say what you mean

39. Legibility

40. Legibility
• Large text
• Sans-serif font
• Enough contrast
• Left align
• No italics

41. Legibility
• Use sentence case
• Increase line-heights (150%)
• Increase margins
• Restrict line-length (50-75 chars)

42. Legibility
• Place text on a solid colour
background

43. Legibility
• Use semantic HTML

44. BeeLine Reader
- https://en.wikipedia.org/wiki/Tea

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

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

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

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

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

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

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

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

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

54. Structure

55. Structure
• Use headings and lists
• Make small chunks of content
• Put most important information first

56. Structure
• Use headings and lists
• Make small chunks of content
• Put most important information first

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

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

59. Black teas
• Assam
• Ceylon
• Darjeeling
Read more
Green teas
• Dragon’s Well
• Matcha

60. Use media thoughtfully.

61. Images
• Use images
• Only use appropriate images
• Don’t just use images

62. <figure>
<img src="tea.jpg" alt=“” />
<figcaption>
In Britain black teas are
usually served hot with
milk and sugar on the
side.</figcaption>
</figure>

63. Alternate text
• Be accurate and equivalent
• Keep it short
• Don’t repeat information
• Don’t start with "picture of ..."

64. Icons
• Also display text
• Use SVG

65. Videos
• Provide transcripts
• Keep it short
• Never autoplay or loop

66. JWPlayer

67. Amara.org

68. Label interactions.

69. Links
• Use key words that describe the
page being linked to
• Put keywords at the front of the link

70. Black teas
• Assam
• Ceylon
• Darjeeling
Read more
Green teas
• Dragon’s Well
• Matcha
• Sencha
Read more
Herbal teas
• Chamomile
• Peppermint
• Rooibos
Read more

71. Black teas
• Assam
• Ceylon
• Darjeeling
Green teas
• Dragon’s Well
• Matcha
• Sencha
Herbal teas
• Chamomile
• Peppermint
• Rooibos

72. Forms
• Left align labels, fields, and buttons
• No reset / clear button

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

74. Forms
• Limit visual noise
• Remove distractions

75. Forms
• Error messages should be specific
• Put errors messages in context
• Warn users when an action has
permanent consequences

76. Summary

77. Summary
• Memory
• Attention
• Comprehension
• Problem solving

78. Summary
• Make reading easier
• Use media thoughtfully
• Label interactions

79. I Like To Make Websites
Everyone Can Use
@stephaniehobson
stephaniehobson.ca