SlideShare una empresa de Scribd logo
1 de 79
Descargar para leer sin conexión
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

Más contenido relacionado

Similar a Writing for Every Reader

Communications 101Sarah Kellert, P.E.Contech Engineered .docx
Communications 101Sarah Kellert, P.E.Contech Engineered .docxCommunications 101Sarah Kellert, P.E.Contech Engineered .docx
Communications 101Sarah Kellert, P.E.Contech Engineered .docx
mccormicknadine86
 
Designing Effective PowerPoint Presentations.pptx
Designing Effective PowerPoint Presentations.pptxDesigning Effective PowerPoint Presentations.pptx
Designing Effective PowerPoint Presentations.pptx
MardyMararac
 
Jan 8 chili
Jan 8 chiliJan 8 chili
Jan 8 chili
apple00
 
Nepbe 1 er grado unit 1 1a clase
Nepbe 1 er grado unit 1 1a claseNepbe 1 er grado unit 1 1a clase
Nepbe 1 er grado unit 1 1a clase
Rol Almazan
 

Similar a Writing for Every Reader (20)

Communications 101Sarah Kellert, P.E.Contech Engineered .docx
Communications 101Sarah Kellert, P.E.Contech Engineered .docxCommunications 101Sarah Kellert, P.E.Contech Engineered .docx
Communications 101Sarah Kellert, P.E.Contech Engineered .docx
 
Make Awesome Slides
Make Awesome SlidesMake Awesome Slides
Make Awesome Slides
 
Make Awesome Slides
Make Awesome SlidesMake Awesome Slides
Make Awesome Slides
 
PPT Template A&E
PPT Template A&EPPT Template A&E
PPT Template A&E
 
Effective powerpoint presentations
Effective powerpoint presentationsEffective powerpoint presentations
Effective powerpoint presentations
 
Effective presentation
Effective presentationEffective presentation
Effective presentation
 
Basic Slide Design
Basic Slide DesignBasic Slide Design
Basic Slide Design
 
Designing Effective PowerPoint Presentations.pptx
Designing Effective PowerPoint Presentations.pptxDesigning Effective PowerPoint Presentations.pptx
Designing Effective PowerPoint Presentations.pptx
 
Design Effective PPT.
Design Effective PPT.Design Effective PPT.
Design Effective PPT.
 
Tarbiyat e Aulad (Season 2)
Tarbiyat e Aulad (Season 2)Tarbiyat e Aulad (Season 2)
Tarbiyat e Aulad (Season 2)
 
learning-the-alphabet.pptx
learning-the-alphabet.pptxlearning-the-alphabet.pptx
learning-the-alphabet.pptx
 
Team Seminar
Team SeminarTeam Seminar
Team Seminar
 
Beyond Bullets: Creating presentations that engage
Beyond Bullets: Creating presentations that engageBeyond Bullets: Creating presentations that engage
Beyond Bullets: Creating presentations that engage
 
Jan 8 chili
Jan 8 chiliJan 8 chili
Jan 8 chili
 
In at the deepend
In at the deependIn at the deepend
In at the deepend
 
Basic power point guidelines
Basic power point guidelinesBasic power point guidelines
Basic power point guidelines
 
Year 10 GCSE English Language Induction
Year 10 GCSE English Language InductionYear 10 GCSE English Language Induction
Year 10 GCSE English Language Induction
 
Lesson 13 day 4
Lesson 13 day 4Lesson 13 day 4
Lesson 13 day 4
 
present perfecto
present perfectopresent perfecto
present perfecto
 
Nepbe 1 er grado unit 1 1a clase
Nepbe 1 er grado unit 1 1a claseNepbe 1 er grado unit 1 1a clase
Nepbe 1 er grado unit 1 1a clase
 

Más de Stephanie Hobson

Más de Stephanie Hobson (8)

Flipping Tables: Displaying Data on Small Screens
Flipping Tables: Displaying Data on Small ScreensFlipping Tables: Displaying Data on Small Screens
Flipping Tables: Displaying Data on Small Screens
 
Flipping Tables: Displaying Data on Small Screens (2016-08)
Flipping Tables: Displaying Data on Small Screens (2016-08)Flipping Tables: Displaying Data on Small Screens (2016-08)
Flipping Tables: Displaying Data on Small Screens (2016-08)
 
Flipping Tables: Displaying Data on Small Screens (2016-02)
Flipping Tables: Displaying Data on Small Screens (2016-02)Flipping Tables: Displaying Data on Small Screens (2016-02)
Flipping Tables: Displaying Data on Small Screens (2016-02)
 
Web Accessibility: 
Making Websites Better for Everyone
Web Accessibility: 
Making Websites Better for EveryoneWeb Accessibility: 
Making Websites Better for Everyone
Web Accessibility: 
Making Websites Better for Everyone
 
Mobile First Is Performance First
Mobile First Is Performance FirstMobile First Is Performance First
Mobile First Is Performance First
 
Accessibility with CSS: Making Websites Better for Everyone
Accessibility with CSS: Making Websites Better for EveryoneAccessibility with CSS: Making Websites Better for Everyone
Accessibility with CSS: Making Websites Better for Everyone
 
Geolocation
GeolocationGeolocation
Geolocation
 
HTML5 Forms OF DOOM
HTML5 Forms OF DOOMHTML5 Forms OF DOOM
HTML5 Forms OF DOOM
 

Último

+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
?#DUbAI#??##{{(☎️+971_581248768%)**%*]'#abortion pills for sale in dubai@
 

Último (20)

A Beginners Guide to Building a RAG App Using Open Source Milvus
A Beginners Guide to Building a RAG App Using Open Source MilvusA Beginners Guide to Building a RAG App Using Open Source Milvus
A Beginners Guide to Building a RAG App Using Open Source Milvus
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
 
Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
 
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
 
MS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectorsMS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectors
 
A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?
 
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
 
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdfGenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
 
AXA XL - Insurer Innovation Award Americas 2024
AXA XL - Insurer Innovation Award Americas 2024AXA XL - Insurer Innovation Award Americas 2024
AXA XL - Insurer Innovation Award Americas 2024
 
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
 
Navi Mumbai Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Navi Mumbai Call Girls 🥰 8617370543 Service Offer VIP Hot ModelNavi Mumbai Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Navi Mumbai Call Girls 🥰 8617370543 Service Offer VIP Hot Model
 
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
 

Writing for Every Reader