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.

Accessibility in email - #EoAInsights

1,080 views

Published on

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

Published in: Technology

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

×