Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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 ...
Clinical diagnoses
• Dyslexia
• Learning
disabilities
• ADD / ADHD
• Brain injury
• Dementia
• Alzheimer’s
• Aphasia
• Dow...
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 provid...
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 subordi...
- What Jakob Nielsen meant
“Use short and simple sentences.
Sentences with more than one idea
strain users’ short-term mem...
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...
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...
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...
BLACK TEAS: ASSAM,
DARJEELING, AND
CEYLON. READ MORE.
GREEN TEAS: DRAGON’S
WELL, MATCHA, AND
SENCHA. READ MORE.
HERBAL TEA...
BLACK TEAS: ASSAM,
DARJEELING, AND
CEYLON. READ MORE.
GREEN TEAS: DRAGON’S
WELL, MATCHA, AND
SENCHA. READ MORE.
HERBAL TEA...
Black teas: Assam,
Darjeeling, and Ceylon.
Read more. Green teas:
Dragon’s Well, Matcha, and
Sencha. Read more. Herbal
tea...
Black teas: Assam,
Darjeeling, and Ceylon.
Read more. Green teas:
Dragon’s Well, Matcha, and
Sencha. Read more. Herbal
tea...
Black teas: Assam,
Darjeeling, and Ceylon.
Read more. Green teas:
Dragon’s Well, Matcha,
and Sencha. Read more.
Herbal tea...
Black teas: Assam,
Darjeeling, and Ceylon.
Read more. Green teas:
Dragon’s Well, Matcha,
and Sencha. Read more.
Herbal tea...
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 tea...
Black teas
Assam, Darjeeling, and Ceylon. Read more.
Green teas
Dragon’s Well, Matcha, and Sencha. Read more.
Herbal teas
...
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...
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
• Ch...
Black teas
• Assam
• Ceylon
• Darjeeling
Green teas
• Dragon’s Well
• Matcha
• Sencha
Herbal teas
• Chamomile
• Peppermint...
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 o...
Forms
• Limit visual noise
• Remove distractions
Forms
• Error messages should be specific
• Put errors messages in context
• Warn users when an action has
permanent conse...
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
Writing for Every Reader
Writing for Every Reader
You’ve finished this document.
Download and read it offline.
Upcoming SlideShare
What to Upload to SlideShare
Next
Upcoming SlideShare
What to Upload to SlideShare
Next
Download to read offline and view in fullscreen.

5

Share

Writing for Every Reader

Download to read offline

Our amazingly complex brains all process information differently. Knowing this, we can use language, structure, and media in ways that make our writing reach everyone.

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

Writing for Every Reader

  1. 1. Writing for Every Reader
  2. 2. https://developer.mozilla.org/Web/Accessibility
  3. 3. Cognitive disabilities
  4. 4. - 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.”
  5. 5. Clinical diagnoses • Dyslexia • Learning disabilities • ADD / ADHD • Brain injury • Dementia • Alzheimer’s • Aphasia • Downe syndrome • Autism spectrum
  6. 6. Functional effects
  7. 7. Functional effects • Permanent • Temporary • Situational
  8. 8. Memory
  9. 9. Memory • Short term • Long term • Working
  10. 10. Attention
  11. 11. Comprehension
  12. 12. Comprehension • Reading • Verbal • Linguistic • Math • Visual
  13. 13. Problem-solving
  14. 14. Functional effects • Memory • Attention • Comprehension • Problem solving
  15. 15. Make reading easier.
  16. 16. Make reading easier. • Readability • Understandability • Legibility • Structure
  17. 17. Readability
  18. 18. Readability • Short sentences • Simple words
  19. 19. Advantageous Facilitate Leverage Good Help Use → → →
  20. 20. Readability • Short sentences • Simple words • Avoid adverbs
  21. 21. Ran quickly Said suddenly Carefully balanced Screamed loudly Sprinted Blurted Balanced Screamed → → → →
  22. 22. Readability • Short sentences • Simple words • Avoid adverbs • Active voice
  23. 23. The tea will be poured by Stephanie. → Stephanie will pour the tea. Cookies will be provided by Maria. → Maria will provide cookies.
  24. 24. Readability • Short sentences • Simple words • Avoid adverbs • Active voice • 8th grade reading level
  25. 25. HemingwayApp
  26. 26. - 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.”
  27. 27. - What Jakob Nielsen meant “Use short and simple sentences. Sentences with more than one idea strain users’ short-term memories.”
  28. 28. Understandability
  29. 29. Understandability • No idioms • No sarcasm or rhetorical questions • No pop culture or slang • Avoid jargon
  30. 30. “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.”
  31. 31. “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.”
  32. 32. “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.”
  33. 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. 34. “If you are having trouble registering for courses come to the Student Services desk. We can help you register.”
  35. 35. Understandability • Be literal • Say what you mean
  36. 36. Legibility
  37. 37. Legibility • Large text • Sans-serif font • Enough contrast • Left align • No italics
  38. 38. Legibility • Use sentence case • Increase line-heights (150%) • Increase margins • Restrict line-length (50-75 chars)
  39. 39. Legibility • Place text on a solid colour background
  40. 40. Legibility • Use semantic HTML
  41. 41. BeeLine Reader - https://en.wikipedia.org/wiki/Tea
  42. 42. 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.
  43. 43. 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.
  44. 44. 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.
  45. 45. 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.
  46. 46. 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.
  47. 47. 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.
  48. 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. 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. 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. 51. Structure
  52. 52. Structure • Use headings and lists • Make small chunks of content • Put most important information first
  53. 53. Structure • Use headings and lists • Make small chunks of content • Put most important information first
  54. 54. 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.
  55. 55. 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.
  56. 56. Black teas • Assam • Ceylon • Darjeeling Read more Green teas • Dragon’s Well • Matcha
  57. 57. Use media thoughtfully.
  58. 58. Images • Use images • Only use appropriate images • Don’t just use images
  59. 59. <figure> <img src="tea.jpg" alt=“” /> <figcaption> In Britain black teas are usually served hot with milk and sugar on the side.</figcaption> </figure>
  60. 60. Alternate text • Be accurate and equivalent • Keep it short • Don’t repeat information • Don’t start with "picture of ..."
  61. 61. Icons • Also display text • Use SVG
  62. 62. Videos • Provide transcripts • Keep it short • Never autoplay or loop
  63. 63. JWPlayer
  64. 64. Amara.org
  65. 65. Label interactions.
  66. 66. Links • Use key words that describe the page being linked to • Put keywords at the front of the link
  67. 67. Black teas • Assam • Ceylon • Darjeeling Read more Green teas • Dragon’s Well • Matcha • Sencha Read more Herbal teas • Chamomile • Peppermint • Rooibos Read more
  68. 68. Black teas • Assam • Ceylon • Darjeeling Green teas • Dragon’s Well • Matcha • Sencha Herbal teas • Chamomile • Peppermint • Rooibos
  69. 69. Forms • Left align labels, fields, and buttons • No reset / clear button
  70. 70. 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
  71. 71. Forms • Limit visual noise • Remove distractions
  72. 72. Forms • Error messages should be specific • Put errors messages in context • Warn users when an action has permanent consequences
  73. 73. Summary
  74. 74. Summary • Memory • Attention • Comprehension • Problem solving
  75. 75. Summary • Make reading easier • Use media thoughtfully • Label interactions
  76. 76. I Like To Make Websites Everyone Can Use @stephaniehobson stephaniehobson.ca
  • MajaKralji

    Oct. 6, 2017
  • roelvangils

    Oct. 2, 2017
  • webaxe

    Sep. 30, 2017
  • dotjay

    Sep. 29, 2017
  • aidantierney

    Sep. 28, 2017

Our amazingly complex brains all process information differently. Knowing this, we can use language, structure, and media in ways that make our writing reach everyone.

Views

Total views

3,048

On Slideshare

0

From embeds

0

Number of embeds

379

Actions

Downloads

22

Shares

0

Comments

0

Likes

5

×