SlideShare une entreprise Scribd logo
1  sur  45
Télécharger pour lire hors ligne
@M_J_Robbins @GoRebelmail
Mark Robbins
What is accessibility?
Email accessibility is about making the emails
you send accessible to as many people as
possible.
What is accessibility?
Email accessibility is about making the emails
you send accessible to as many people as
possible.
It’s about inclusivity.
True accessibility
True accessibility
• Works in every email client, Lotus Notes,
Windows Phone, Outlook, GMX, Yandex
True accessibility
• Works in every email client, Lotus Notes,
Windows Phone, Outlook, GMX, Yandex
• Includes well written plain text version
True accessibility
• Works in every email client, Lotus Notes,
Windows Phone, Outlook, GMX, Yandex
• Includes well written plain text version
• Has clear easy to understand messages
True accessibility
• Works in every email client, Lotus Notes,
Windows Phone, Outlook, GMX, Yandex
• Includes well written plain text version
• Has clear easy to understand messages
• Has a legible design
True accessibility
• Works in every email client, Lotus Notes,
Windows Phone, Outlook, GMX, Yandex
• Includes well written plain text version
• Has clear easy to understand messages
• Has a legible design
• Works with assertive technology
What is assistive technology?
What is assistive technology?
• Screen readers
What is assistive technology?
• Screen readers
• Screen magnifiers
What is assistive technology?
• Screen readers
• Screen magnifiers
• Software to add contrast or tint
What is assistive technology?
• Screen readers
• Screen magnifiers
• Software to add contrast or tint
• Non mouse inputs
What is assistive technology?
• Screen readers
• Screen magnifiers
• Software to add contrast or tint
• Non mouse inputs
• Joysticks
What is assistive technology?
• Screen readers
• Screen magnifiers
• Software to add contrast or tint
• Non mouse inputs
• Joysticks
• Blink tracking
What is assistive technology?
• Screen readers
• Screen magnifiers
• Software to add contrast or tint
• Non mouse inputs
• Joysticks
• Blink tracking
• Sip/puff devices
What is assistive technology?
• Screen readers
• Screen magnifiers
• Software to add contrast or tint
• Non mouse inputs
• Joysticks
• Blink tracking
• Sip/puff devices
• Voice commands
Legible design
Colour blindness
Add in colour contrast
for people with colour
blindness.
THIS TEXT VERY HARD TO READ BUT DON’T
WORRY WE’LL FIX THAT IN A SECOND.
ACCESSIBLE TYPOGRAPHY IS A HUGE
SUBJECT SO I’M JUST SHARING SOME BASIC
TIPS TO GET YOU STARTED. I’D ADVISE YOU ALL
TO READ MORE ABOUT IT WHEN YOU HAVE
TIME. I’VE GOT TO FILL UP A LITTLE SPACE HERE
AND DON’T WANT TO DISTRACT YOU TOO
MUCH FROM THE TALK SO I THINK YOU
SHOULD PROBABLY STOP READING THIS NOW.
Dyslexia
Too much contrast can
affect screen glare
which is difficult for
people with dyslexia
THIS TEXT VERY HARD TO READ BUT DON’T
WORRY WE’LL FIX THAT IN A SECOND.
ACCESSIBLE TYPOGRAPHY IS A HUGE
SUBJECT SO I’M JUST SHARING SOME BASIC
TIPS TO GET YOU STARTED. I’D ADVISE YOU ALL
TO READ MORE ABOUT IT WHEN YOU HAVE
TIME. I’VE GOT TO FILL UP A LITTLE SPACE HERE
AND DON’T WANT TO DISTRACT YOU TOO
MUCH FROM THE TALK SO I THINK YOU
SHOULD PROBABLY STOP READING THIS NOW.
Dyslexia
Capitalisation is harder
to read in paragraphs
THIS TEXT VERY HARD TO READ BUT DON’T
WORRY WE’LL FIX THAT IN A SECOND.
ACCESSIBLE TYPOGRAPHY IS A HUGE
SUBJECT SO I’M JUST SHARING SOME BASIC
TIPS TO GET YOU STARTED. I’D ADVISE YOU ALL
TO READ MORE ABOUT IT WHEN YOU HAVE
TIME. I’VE GOT TO FILL UP A LITTLE SPACE HERE
AND DON’T WANT TO DISTRACT YOU TOO
MUCH FROM THE TALK SO I THINK YOU
SHOULD PROBABLY STOP READING THIS NOW.
Dyslexia
Large blocks of text are
harder to read
This text very hard to read but don’t worry we’ll fix
that in a second. Accessible typography is a huge
subject so I’m just sharing some basic tips to get you
started. I’d advise you all to read more about it when
you have time. I’ve got to fill up a little space here
and don’t want to distract you too much from the talk
so I think you should probably stop reading this now.
Dyslexia
Centre aligned text is
harder to read in
paragraphs
This text very hard to read but don’t worry we’ll fix
that in a second.
Accessible typography is a huge subject so I’m just
sharing some basic tips to get you started. I’d advise
you all to read more about it when you have time.
I’ve got to fill up a little space here and don’t want to
distract you too much from the talk so I think you
should probably stop reading this now.
Dyslexia
Tight line spacing and
letter spacing is hard to
read
This text very hard to read but don’t worry we’ll fix
that in a second.
Accessible typography is a huge subject so I’m just
sharing some basic tips to get you started. I’d advise
you all to read more about it when you have time.
I’ve got to fill up a little space here and don’t want to
distract you too much from the talk so I think you
should probably stop reading this now.
That’s better
This text very hard to read but don’t worry
we’ll fix that in a second.
Accessible typography is a huge subject so
I’m just sharing some basic tips to get you
started. I’d advise you all to read more about
it when you have time.
I’ve got to fill up a little space here and don’t
want to distract you too much from the talk so
I think you should probably stop reading this
now.
THIS TEXT VERY HARD TO READ BUT DON’T
WORRY WE’LL FIX THAT IN A SECOND.
ACCESSIBLE TYPOGRAPHY IS A HUGE
SUBJECT SO I’M JUST SHARING SOME BASIC
TIPS TO GET YOU STARTED. I’D ADVISE YOU ALL
TO READ MORE ABOUT IT WHEN YOU HAVE
TIME. I’VE GOT TO FILL UP A LITTLE SPACE HERE
AND DON’T WANT TO DISTRACT YOU TOO
MUCH FROM THE TALK SO I THINK YOU
SHOULD PROBABLY STOP READING THIS NOW.
Screen readers(and other tabbed input devices)
Semantic code
Using the right tool for the job.
Semantic code
Using the right tool for the job.
Use <p> for paragraphs. <li> for lists and
<table> for a tables.
Semantic code
Using the right tool for the job.
Use <p> for paragraphs. <li> for lists and
<table> for a tables.
Div’s and Span’s are semantically neutral, so
screen readers ignore them.
Semantic code
Using semantic text
Using semantic text
Tables
Tables are not good for
accessibility.
You have to tab between
each cell.
<table role="presentation">
<table role="presentation">
ARIA & HTML5
ARIA & HTML5
• <main> role=“main”
ARIA & HTML5
• <main> role=“main”
• <header> role=“banner”
ARIA & HTML5
• <main> role=“main”
• <header> role=“banner”
• <nav> role=“navigation”
ARIA & HTML5
• <main> role=“main”
• <header> role=“banner”
• <nav> role=“navigation”
• <article> <aside> <details> <figcaption>
<figure> <footer> <mark> <section>
<summary> <time>
ARIA & HTML5
• <main> role=“main”
• <header> role=“banner”
• <nav> role=“navigation”
• <article> <aside> <details> <figcaption>
<figure> <footer> <mark> <section>
<summary> <time>
• Loads more roles too…
ARIA & HTML5
• <main> role=“main”
• <header> role=“banner”
• <nav> role=“navigation”
• <article> <aside> <details> <figcaption>
<figure> <footer> <mark> <section>
<summary> <time>
• Loads more roles too…
✘
✘
ARIA & HTML5
• <main> role=“main”
• <header> role=“banner”
• <nav> role=“navigation”
• <article> <aside> <details> <figcaption>
<figure> <footer> <mark> <section>
<summary> <time>
• Loads more roles too…
✘
✘
✘
Thank you!
@M_J_Robbins @GoRebelmail
Mark Robbins

Contenu connexe

En vedette

Evaluation question 1 - Jemima Chamberlin
Evaluation question 1 - Jemima ChamberlinEvaluation question 1 - Jemima Chamberlin
Evaluation question 1 - Jemima Chamberlin
longroadmedia14
 
Права_споживачів_комунальних_послуг
Права_споживачів_комунальних_послугПрава_споживачів_комунальних_послуг
Права_споживачів_комунальних_послуг
Vitalij Misjats
 
Social Enterprise Comes to Life with Integration
Social Enterprise Comes to Life with IntegrationSocial Enterprise Comes to Life with Integration
Social Enterprise Comes to Life with Integration
Configero
 
Evans_Katherine_Chase Home for Children_2016 08 05
Evans_Katherine_Chase Home for Children_2016 08 05Evans_Katherine_Chase Home for Children_2016 08 05
Evans_Katherine_Chase Home for Children_2016 08 05
Katherine Evans
 

En vedette (20)

A Type of Accessibility
A Type of AccessibilityA Type of Accessibility
A Type of Accessibility
 
Understanding email hacks - Litmus Live London TEDC16
Understanding email hacks - Litmus Live London TEDC16Understanding email hacks - Litmus Live London TEDC16
Understanding email hacks - Litmus Live London TEDC16
 
British Galleries 2002
British Galleries 2002British Galleries 2002
British Galleries 2002
 
テストプラン
テストプランテストプラン
テストプラン
 
Lazy desk
Lazy deskLazy desk
Lazy desk
 
3º básico a semana 02 al 06 mayo
3º básico a  semana 02  al 06 mayo3º básico a  semana 02  al 06 mayo
3º básico a semana 02 al 06 mayo
 
Green Pearl Events Multifamily Investment Summit Gary Kachadurian Presentation
Green Pearl Events Multifamily Investment Summit   Gary Kachadurian PresentationGreen Pearl Events Multifamily Investment Summit   Gary Kachadurian Presentation
Green Pearl Events Multifamily Investment Summit Gary Kachadurian Presentation
 
How to wear a hard hat
How to wear a hard hatHow to wear a hard hat
How to wear a hard hat
 
Wuletawu Abera Ph.D. defense
Wuletawu Abera Ph.D. defenseWuletawu Abera Ph.D. defense
Wuletawu Abera Ph.D. defense
 
Evaluation question 1 - Jemima Chamberlin
Evaluation question 1 - Jemima ChamberlinEvaluation question 1 - Jemima Chamberlin
Evaluation question 1 - Jemima Chamberlin
 
Respuesta de Piedad Córdoba a Vladdo
Respuesta de Piedad Córdoba a VladdoRespuesta de Piedad Córdoba a Vladdo
Respuesta de Piedad Córdoba a Vladdo
 
Права_споживачів_комунальних_послуг
Права_споживачів_комунальних_послугПрава_споживачів_комунальних_послуг
Права_споживачів_комунальних_послуг
 
Social Enterprise Comes to Life with Integration
Social Enterprise Comes to Life with IntegrationSocial Enterprise Comes to Life with Integration
Social Enterprise Comes to Life with Integration
 
Evans_Katherine_Chase Home for Children_2016 08 05
Evans_Katherine_Chase Home for Children_2016 08 05Evans_Katherine_Chase Home for Children_2016 08 05
Evans_Katherine_Chase Home for Children_2016 08 05
 
HOW TO SET-UP A FREE BLOG USING BLOGGER TO PROMOTE YOUR BOOKS AND BRAND YOURSELF
HOW TO SET-UP A FREE BLOG USING BLOGGER TO PROMOTE YOUR BOOKS AND BRAND YOURSELFHOW TO SET-UP A FREE BLOG USING BLOGGER TO PROMOTE YOUR BOOKS AND BRAND YOURSELF
HOW TO SET-UP A FREE BLOG USING BLOGGER TO PROMOTE YOUR BOOKS AND BRAND YOURSELF
 
Sistema de Liquidación Directa Cret@
Sistema de Liquidación Directa Cret@Sistema de Liquidación Directa Cret@
Sistema de Liquidación Directa Cret@
 
Presentacion entornos
Presentacion entornosPresentacion entornos
Presentacion entornos
 
EMC World 2016 - cnaITL.04 Open Source has changed how you run Infrastructure
EMC World 2016 - cnaITL.04 Open Source has changed how you run InfrastructureEMC World 2016 - cnaITL.04 Open Source has changed how you run Infrastructure
EMC World 2016 - cnaITL.04 Open Source has changed how you run Infrastructure
 
July 12, 2016 Webcast for the Management of Technology MS at NYU Tandon Online
July 12, 2016 Webcast for the Management of Technology MS at NYU Tandon OnlineJuly 12, 2016 Webcast for the Management of Technology MS at NYU Tandon Online
July 12, 2016 Webcast for the Management of Technology MS at NYU Tandon Online
 
Expert Webcast - How to Save Users 80% Time in Salesforce
Expert Webcast - How to Save Users 80% Time in Salesforce Expert Webcast - How to Save Users 80% Time in Salesforce
Expert Webcast - How to Save Users 80% Time in Salesforce
 

Similaire à Accessibility in email - #EoAInsights

PowerPoint Do's and Dont's
PowerPoint Do's and Dont'sPowerPoint Do's and Dont's
PowerPoint Do's and Dont's
meganturnham
 
Powerpointtips2
Powerpointtips2Powerpointtips2
Powerpointtips2
postk
 
Working With Power Point3 30
Working With Power Point3 30Working With Power Point3 30
Working With Power Point3 30
nandav
 
Power Point Tips
Power Point TipsPower Point Tips
Power Point Tips
PCTE
 
How To Use Power Point Effectively
How To Use Power Point EffectivelyHow To Use Power Point Effectively
How To Use Power Point Effectively
smnice
 
The following 37 slides present guidelines and suggestions f.docx
The following 37 slides present guidelines and suggestions f.docxThe following 37 slides present guidelines and suggestions f.docx
The following 37 slides present guidelines and suggestions f.docx
oreo10
 
Making professional power points v2
Making professional power points v2Making professional power points v2
Making professional power points v2
Nicole Fronda
 

Similaire à Accessibility in email - #EoAInsights (20)

PowerPoint Do's and Dont's
PowerPoint Do's and Dont'sPowerPoint Do's and Dont's
PowerPoint Do's and Dont's
 
Basic power point guidelines
Basic power point guidelinesBasic power point guidelines
Basic power point guidelines
 
Creating accessible information using Microsoft Word: hints and tips for ever...
Creating accessible information using Microsoft Word: hints and tips for ever...Creating accessible information using Microsoft Word: hints and tips for ever...
Creating accessible information using Microsoft Word: hints and tips for ever...
 
Talk about talks
Talk about talksTalk about talks
Talk about talks
 
Powerpointtips2
Powerpointtips2Powerpointtips2
Powerpointtips2
 
Working With Power Point3 30
Working With Power Point3 30Working With Power Point3 30
Working With Power Point3 30
 
Powerpoint
PowerpointPowerpoint
Powerpoint
 
Speed reading
Speed readingSpeed reading
Speed reading
 
Global accessibility awareness day 2021
Global accessibility awareness day 2021  Global accessibility awareness day 2021
Global accessibility awareness day 2021
 
Powerpointtips
PowerpointtipsPowerpointtips
Powerpointtips
 
Powerpointtips
PowerpointtipsPowerpointtips
Powerpointtips
 
Powerpointtips
PowerpointtipsPowerpointtips
Powerpointtips
 
Power Point Tips
Power Point TipsPower Point Tips
Power Point Tips
 
Powerpointtips
PowerpointtipsPowerpointtips
Powerpointtips
 
POW! Your Point Handout 2: Design Basics
POW! Your Point Handout 2: Design BasicsPOW! Your Point Handout 2: Design Basics
POW! Your Point Handout 2: Design Basics
 
Basic Power Point Guidelines
Basic Power Point GuidelinesBasic Power Point Guidelines
Basic Power Point Guidelines
 
How To Use Power Point Effectively
How To Use Power Point EffectivelyHow To Use Power Point Effectively
How To Use Power Point Effectively
 
The following 37 slides present guidelines and suggestions f.docx
The following 37 slides present guidelines and suggestions f.docxThe following 37 slides present guidelines and suggestions f.docx
The following 37 slides present guidelines and suggestions f.docx
 
Making professional power points v2
Making professional power points v2Making professional power points v2
Making professional power points v2
 
Presentation Guides
Presentation GuidesPresentation Guides
Presentation Guides
 

Dernier

Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo DiehlFuture Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Peter Udo Diehl
 

Dernier (20)

SOQL 201 for Admins & Developers: Slice & Dice Your Org’s Data With Aggregate...
SOQL 201 for Admins & Developers: Slice & Dice Your Org’s Data With Aggregate...SOQL 201 for Admins & Developers: Slice & Dice Your Org’s Data With Aggregate...
SOQL 201 for Admins & Developers: Slice & Dice Your Org’s Data With Aggregate...
 
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo DiehlFuture Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
 
The Metaverse: Are We There Yet?
The  Metaverse:    Are   We  There  Yet?The  Metaverse:    Are   We  There  Yet?
The Metaverse: Are We There Yet?
 
Free and Effective: Making Flows Publicly Accessible, Yumi Ibrahimzade
Free and Effective: Making Flows Publicly Accessible, Yumi IbrahimzadeFree and Effective: Making Flows Publicly Accessible, Yumi Ibrahimzade
Free and Effective: Making Flows Publicly Accessible, Yumi Ibrahimzade
 
THE BEST IPTV in GERMANY for 2024: IPTVreel
THE BEST IPTV in  GERMANY for 2024: IPTVreelTHE BEST IPTV in  GERMANY for 2024: IPTVreel
THE BEST IPTV in GERMANY for 2024: IPTVreel
 
Syngulon - Selection technology May 2024.pdf
Syngulon - Selection technology May 2024.pdfSyngulon - Selection technology May 2024.pdf
Syngulon - Selection technology May 2024.pdf
 
IESVE for Early Stage Design and Planning
IESVE for Early Stage Design and PlanningIESVE for Early Stage Design and Planning
IESVE for Early Stage Design and Planning
 
Enterprise Knowledge Graphs - Data Summit 2024
Enterprise Knowledge Graphs - Data Summit 2024Enterprise Knowledge Graphs - Data Summit 2024
Enterprise Knowledge Graphs - Data Summit 2024
 
Buy Epson EcoTank L3210 Colour Printer Online.pptx
Buy Epson EcoTank L3210 Colour Printer Online.pptxBuy Epson EcoTank L3210 Colour Printer Online.pptx
Buy Epson EcoTank L3210 Colour Printer Online.pptx
 
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdf
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdfSimplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdf
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdf
 
The Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdf
The Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdfThe Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdf
The Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdf
 
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
 
Integrating Telephony Systems with Salesforce: Insights and Considerations, B...
Integrating Telephony Systems with Salesforce: Insights and Considerations, B...Integrating Telephony Systems with Salesforce: Insights and Considerations, B...
Integrating Telephony Systems with Salesforce: Insights and Considerations, B...
 
Powerful Start- the Key to Project Success, Barbara Laskowska
Powerful Start- the Key to Project Success, Barbara LaskowskaPowerful Start- the Key to Project Success, Barbara Laskowska
Powerful Start- the Key to Project Success, Barbara Laskowska
 
Unpacking Value Delivery - Agile Oxford Meetup - May 2024.pptx
Unpacking Value Delivery - Agile Oxford Meetup - May 2024.pptxUnpacking Value Delivery - Agile Oxford Meetup - May 2024.pptx
Unpacking Value Delivery - Agile Oxford Meetup - May 2024.pptx
 
Buy Epson EcoTank L3210 Colour Printer Online.pdf
Buy Epson EcoTank L3210 Colour Printer Online.pdfBuy Epson EcoTank L3210 Colour Printer Online.pdf
Buy Epson EcoTank L3210 Colour Printer Online.pdf
 
Where to Learn More About FDO _ Richard at FIDO Alliance.pdf
Where to Learn More About FDO _ Richard at FIDO Alliance.pdfWhere to Learn More About FDO _ Richard at FIDO Alliance.pdf
Where to Learn More About FDO _ Richard at FIDO Alliance.pdf
 
Extensible Python: Robustness through Addition - PyCon 2024
Extensible Python: Robustness through Addition - PyCon 2024Extensible Python: Robustness through Addition - PyCon 2024
Extensible Python: Robustness through Addition - PyCon 2024
 
Demystifying gRPC in .Net by John Staveley
Demystifying gRPC in .Net by John StaveleyDemystifying gRPC in .Net by John Staveley
Demystifying gRPC in .Net by John Staveley
 
Intro in Product Management - Коротко про професію продакт менеджера
Intro in Product Management - Коротко про професію продакт менеджераIntro in Product Management - Коротко про професію продакт менеджера
Intro in Product Management - Коротко про професію продакт менеджера
 

Accessibility in email - #EoAInsights

  • 2. What is accessibility? Email accessibility is about making the emails you send accessible to as many people as possible.
  • 3. What is accessibility? Email accessibility is about making the emails you send accessible to as many people as possible. It’s about inclusivity.
  • 5. True accessibility • Works in every email client, Lotus Notes, Windows Phone, Outlook, GMX, Yandex
  • 6. True accessibility • Works in every email client, Lotus Notes, Windows Phone, Outlook, GMX, Yandex • Includes well written plain text version
  • 7. True accessibility • Works in every email client, Lotus Notes, Windows Phone, Outlook, GMX, Yandex • Includes well written plain text version • Has clear easy to understand messages
  • 8. True accessibility • Works in every email client, Lotus Notes, Windows Phone, Outlook, GMX, Yandex • Includes well written plain text version • Has clear easy to understand messages • Has a legible design
  • 9. True accessibility • Works in every email client, Lotus Notes, Windows Phone, Outlook, GMX, Yandex • Includes well written plain text version • Has clear easy to understand messages • Has a legible design • Works with assertive technology
  • 10. What is assistive technology?
  • 11. What is assistive technology? • Screen readers
  • 12. What is assistive technology? • Screen readers • Screen magnifiers
  • 13. What is assistive technology? • Screen readers • Screen magnifiers • Software to add contrast or tint
  • 14. What is assistive technology? • Screen readers • Screen magnifiers • Software to add contrast or tint • Non mouse inputs
  • 15. What is assistive technology? • Screen readers • Screen magnifiers • Software to add contrast or tint • Non mouse inputs • Joysticks
  • 16. What is assistive technology? • Screen readers • Screen magnifiers • Software to add contrast or tint • Non mouse inputs • Joysticks • Blink tracking
  • 17. What is assistive technology? • Screen readers • Screen magnifiers • Software to add contrast or tint • Non mouse inputs • Joysticks • Blink tracking • Sip/puff devices
  • 18. What is assistive technology? • Screen readers • Screen magnifiers • Software to add contrast or tint • Non mouse inputs • Joysticks • Blink tracking • Sip/puff devices • Voice commands
  • 20. Colour blindness Add in colour contrast for people with colour blindness. THIS TEXT VERY HARD TO READ BUT DON’T WORRY WE’LL FIX THAT IN A SECOND. ACCESSIBLE TYPOGRAPHY IS A HUGE SUBJECT SO I’M JUST SHARING SOME BASIC TIPS TO GET YOU STARTED. I’D ADVISE YOU ALL TO READ MORE ABOUT IT WHEN YOU HAVE TIME. I’VE GOT TO FILL UP A LITTLE SPACE HERE AND DON’T WANT TO DISTRACT YOU TOO MUCH FROM THE TALK SO I THINK YOU SHOULD PROBABLY STOP READING THIS NOW.
  • 21. Dyslexia Too much contrast can affect screen glare which is difficult for people with dyslexia THIS TEXT VERY HARD TO READ BUT DON’T WORRY WE’LL FIX THAT IN A SECOND. ACCESSIBLE TYPOGRAPHY IS A HUGE SUBJECT SO I’M JUST SHARING SOME BASIC TIPS TO GET YOU STARTED. I’D ADVISE YOU ALL TO READ MORE ABOUT IT WHEN YOU HAVE TIME. I’VE GOT TO FILL UP A LITTLE SPACE HERE AND DON’T WANT TO DISTRACT YOU TOO MUCH FROM THE TALK SO I THINK YOU SHOULD PROBABLY STOP READING THIS NOW.
  • 22. Dyslexia Capitalisation is harder to read in paragraphs THIS TEXT VERY HARD TO READ BUT DON’T WORRY WE’LL FIX THAT IN A SECOND. ACCESSIBLE TYPOGRAPHY IS A HUGE SUBJECT SO I’M JUST SHARING SOME BASIC TIPS TO GET YOU STARTED. I’D ADVISE YOU ALL TO READ MORE ABOUT IT WHEN YOU HAVE TIME. I’VE GOT TO FILL UP A LITTLE SPACE HERE AND DON’T WANT TO DISTRACT YOU TOO MUCH FROM THE TALK SO I THINK YOU SHOULD PROBABLY STOP READING THIS NOW.
  • 23. Dyslexia Large blocks of text are harder to read This text very hard to read but don’t worry we’ll fix that in a second. Accessible typography is a huge subject so I’m just sharing some basic tips to get you started. I’d advise you all to read more about it when you have time. I’ve got to fill up a little space here and don’t want to distract you too much from the talk so I think you should probably stop reading this now.
  • 24. Dyslexia Centre aligned text is harder to read in paragraphs This text very hard to read but don’t worry we’ll fix that in a second. Accessible typography is a huge subject so I’m just sharing some basic tips to get you started. I’d advise you all to read more about it when you have time. I’ve got to fill up a little space here and don’t want to distract you too much from the talk so I think you should probably stop reading this now.
  • 25. Dyslexia Tight line spacing and letter spacing is hard to read This text very hard to read but don’t worry we’ll fix that in a second. Accessible typography is a huge subject so I’m just sharing some basic tips to get you started. I’d advise you all to read more about it when you have time. I’ve got to fill up a little space here and don’t want to distract you too much from the talk so I think you should probably stop reading this now.
  • 26. That’s better This text very hard to read but don’t worry we’ll fix that in a second. Accessible typography is a huge subject so I’m just sharing some basic tips to get you started. I’d advise you all to read more about it when you have time. I’ve got to fill up a little space here and don’t want to distract you too much from the talk so I think you should probably stop reading this now. THIS TEXT VERY HARD TO READ BUT DON’T WORRY WE’LL FIX THAT IN A SECOND. ACCESSIBLE TYPOGRAPHY IS A HUGE SUBJECT SO I’M JUST SHARING SOME BASIC TIPS TO GET YOU STARTED. I’D ADVISE YOU ALL TO READ MORE ABOUT IT WHEN YOU HAVE TIME. I’VE GOT TO FILL UP A LITTLE SPACE HERE AND DON’T WANT TO DISTRACT YOU TOO MUCH FROM THE TALK SO I THINK YOU SHOULD PROBABLY STOP READING THIS NOW.
  • 27. Screen readers(and other tabbed input devices)
  • 29. Using the right tool for the job. Semantic code
  • 30. Using the right tool for the job. Use <p> for paragraphs. <li> for lists and <table> for a tables. Semantic code
  • 31. Using the right tool for the job. Use <p> for paragraphs. <li> for lists and <table> for a tables. Div’s and Span’s are semantically neutral, so screen readers ignore them. Semantic code
  • 34. Tables Tables are not good for accessibility. You have to tab between each cell.
  • 38. ARIA & HTML5 • <main> role=“main”
  • 39. ARIA & HTML5 • <main> role=“main” • <header> role=“banner”
  • 40. ARIA & HTML5 • <main> role=“main” • <header> role=“banner” • <nav> role=“navigation”
  • 41. ARIA & HTML5 • <main> role=“main” • <header> role=“banner” • <nav> role=“navigation” • <article> <aside> <details> <figcaption> <figure> <footer> <mark> <section> <summary> <time>
  • 42. ARIA & HTML5 • <main> role=“main” • <header> role=“banner” • <nav> role=“navigation” • <article> <aside> <details> <figcaption> <figure> <footer> <mark> <section> <summary> <time> • Loads more roles too…
  • 43. ARIA & HTML5 • <main> role=“main” • <header> role=“banner” • <nav> role=“navigation” • <article> <aside> <details> <figcaption> <figure> <footer> <mark> <section> <summary> <time> • Loads more roles too… ✘ ✘
  • 44. ARIA & HTML5 • <main> role=“main” • <header> role=“banner” • <nav> role=“navigation” • <article> <aside> <details> <figcaption> <figure> <footer> <mark> <section> <summary> <time> • Loads more roles too… ✘ ✘ ✘