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.

of

Accessibility in email - #EoAInsights Slide 1 Accessibility in email - #EoAInsights Slide 2 Accessibility in email - #EoAInsights Slide 3 Accessibility in email - #EoAInsights Slide 4 Accessibility in email - #EoAInsights Slide 5 Accessibility in email - #EoAInsights Slide 6 Accessibility in email - #EoAInsights Slide 7 Accessibility in email - #EoAInsights Slide 8 Accessibility in email - #EoAInsights Slide 9 Accessibility in email - #EoAInsights Slide 10 Accessibility in email - #EoAInsights Slide 11 Accessibility in email - #EoAInsights Slide 12 Accessibility in email - #EoAInsights Slide 13 Accessibility in email - #EoAInsights Slide 14 Accessibility in email - #EoAInsights Slide 15 Accessibility in email - #EoAInsights Slide 16 Accessibility in email - #EoAInsights Slide 17 Accessibility in email - #EoAInsights Slide 18 Accessibility in email - #EoAInsights Slide 19 Accessibility in email - #EoAInsights Slide 20 Accessibility in email - #EoAInsights Slide 21 Accessibility in email - #EoAInsights Slide 22 Accessibility in email - #EoAInsights Slide 23 Accessibility in email - #EoAInsights Slide 24 Accessibility in email - #EoAInsights Slide 25 Accessibility in email - #EoAInsights Slide 26 Accessibility in email - #EoAInsights Slide 27 Accessibility in email - #EoAInsights Slide 28 Accessibility in email - #EoAInsights Slide 29 Accessibility in email - #EoAInsights Slide 30 Accessibility in email - #EoAInsights Slide 31 Accessibility in email - #EoAInsights Slide 32 Accessibility in email - #EoAInsights Slide 33 Accessibility in email - #EoAInsights Slide 34 Accessibility in email - #EoAInsights Slide 35 Accessibility in email - #EoAInsights Slide 36 Accessibility in email - #EoAInsights Slide 37 Accessibility in email - #EoAInsights Slide 38 Accessibility in email - #EoAInsights Slide 39 Accessibility in email - #EoAInsights Slide 40 Accessibility in email - #EoAInsights Slide 41 Accessibility in email - #EoAInsights Slide 42 Accessibility in email - #EoAInsights Slide 43 Accessibility in email - #EoAInsights Slide 44 Accessibility in email - #EoAInsights Slide 45
Upcoming SlideShare
A Type of Accessibility
Next
Download to read offline and view in fullscreen.

5 Likes

Share

Download to read offline

Accessibility in email - #EoAInsights

Download to read offline

Slides from my talk at the Email on Acid email meat up in London 09/08/16

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

Accessibility in email - #EoAInsights

  1. 1. @M_J_Robbins @GoRebelmail Mark Robbins
  2. 2. What is accessibility? Email accessibility is about making the emails you send accessible to as many people as possible.
  3. 3. What is accessibility? Email accessibility is about making the emails you send accessible to as many people as possible. It’s about inclusivity.
  4. 4. True accessibility
  5. 5. True accessibility • Works in every email client, Lotus Notes, Windows Phone, Outlook, GMX, Yandex
  6. 6. True accessibility • Works in every email client, Lotus Notes, Windows Phone, Outlook, GMX, Yandex • Includes well written plain text version
  7. 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. 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. 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. 10. What is assistive technology?
  11. 11. What is assistive technology? • Screen readers
  12. 12. What is assistive technology? • Screen readers • Screen magnifiers
  13. 13. What is assistive technology? • Screen readers • Screen magnifiers • Software to add contrast or tint
  14. 14. What is assistive technology? • Screen readers • Screen magnifiers • Software to add contrast or tint • Non mouse inputs
  15. 15. What is assistive technology? • Screen readers • Screen magnifiers • Software to add contrast or tint • Non mouse inputs • Joysticks
  16. 16. What is assistive technology? • Screen readers • Screen magnifiers • Software to add contrast or tint • Non mouse inputs • Joysticks • Blink tracking
  17. 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. 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
  19. 19. Legible design
  20. 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. 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. 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. 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. 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. 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. 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. 27. Screen readers(and other tabbed input devices)
  28. 28. Semantic code
  29. 29. Using the right tool for the job. Semantic code
  30. 30. Using the right tool for the job. Use <p> for paragraphs. <li> for lists and <table> for a tables. Semantic code
  31. 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
  32. 32. Using semantic text
  33. 33. Using semantic text
  34. 34. Tables Tables are not good for accessibility. You have to tab between each cell.
  35. 35. <table role="presentation">
  36. 36. <table role="presentation">
  37. 37. ARIA & HTML5
  38. 38. ARIA & HTML5 • <main> role=“main”
  39. 39. ARIA & HTML5 • <main> role=“main” • <header> role=“banner”
  40. 40. ARIA & HTML5 • <main> role=“main” • <header> role=“banner” • <nav> role=“navigation”
  41. 41. ARIA & HTML5 • <main> role=“main” • <header> role=“banner” • <nav> role=“navigation” • <article> <aside> <details> <figcaption> <figure> <footer> <mark> <section> <summary> <time>
  42. 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. 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. 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… ✘ ✘ ✘
  45. 45. Thank you! @M_J_Robbins @GoRebelmail Mark Robbins
  • JordievanRijn

    Aug. 31, 2017
  • WilbertHeinen

    Sep. 2, 2016
  • MattHelbig

    Aug. 11, 2016
  • JenniferMalley1

    Aug. 11, 2016
  • monkeyman_gibbo

    Aug. 10, 2016

Slides from my talk at the Email on Acid email meat up in London 09/08/16

Views

Total views

2,135

On Slideshare

0

From embeds

0

Number of embeds

45

Actions

Downloads

67

Shares

0

Comments

0

Likes

5

×