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

1. @M_J_Robbins @GoRebelmail
Mark Robbins

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.

4. True accessibility

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

19. Legible design

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)

28. Semantic code

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

32. Using semantic text

33. Using semantic text

34. Tables
Tables are not good for
accessibility.
You have to tab between
each cell.

35. <table role="presentation">

36. <table role="presentation">

37. ARIA & HTML5

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…
✘
✘
✘

45. Thank you!
@M_J_Robbins @GoRebelmail
Mark Robbins