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.
Beyond the Envelope™@Paul_Airy
A Type of Accessibility.
Beyond the Envelope™@Paul_Airy
“Hello!”
Beyond the Envelope™@Paul_Airy
Paul Airy.
Email Designer and Developer
Beyond the Envelope™@Paul_Airy
Beyond the Envelope™
Research, Design and Development
Beyond the Envelope™@Paul_Airy
Beyond the Envelope™@Paul_Airy
Beyond the Envelope™@Paul_Airy
Side Projects.
Typography in Email
Beyond the Envelope™@Paul_Airy
Beyond the Envelope™
Beyond the Envelope™@Paul_Airy
Type E:
beyondtheenvelope.co.uk/type-e.php
Beyond the Envelope™@Paul_Airy
Beyond the Envelope™
A
Type
of email.
A handbook for working with HTML typography in email
...
Beyond the Envelope™@Paul_Airy
Coming Soon
Beyond the Envelope™@Paul_Airy
@Paul_Airy
Beyond the Envelope™@Paul_Airy
Accessibility.
Beyond the Envelope™@Paul_Airy
A Type of Accessibility.
Beyond the Envelope™@Paul_Airy
3 ‘Things’.
Beyond the Envelope™@Paul_Airy
1. Recognise the challenges.
Beyond the Envelope™@Paul_Airy
2. Look beyond the challenges.
Beyond the Envelope™@Paul_Airy
3. Typographic Tips.
Beyond the Envelope™@Paul_Airy
“To empower you,
to empower people,
to use email.”
Paul Airy.
Beyond the Envelope™@Paul_Airy
Who are they?
Beyond the Envelope™@Paul_Airy
“There are 9.4 million
disabled people in
England, accounting for

18% of the population.”
...
Beyond the Envelope™@Paul_Airy
“About 56.7 million people
— 19% of the population
— had a disability
in 2010.”
United Stat...
Beyond the Envelope™@Paul_Airy
18%
Beyond the Envelope™@Paul_Airy
Physical
Beyond the Envelope™@Paul_Airy
Physical
Visual
Beyond the Envelope™@Paul_Airy
Physical
Visual
Beyond the Envelope™@Paul_Airy
Physical
Visual
Cognitive
Beyond the Envelope™@Paul_Airy
My friend, Ben…
Beyond the Envelope™@Paul_Airy
Beyond the Envelope™@Paul_Airy
Dyslexia.
Beyond the Envelope™@Paul_Airy
Reading and writing age of around 14-16
Uppercase and lowercase hard to distinguish
What ch...
Beyond the Envelope™@Paul_Airy
The ability to ‘highlight’ text so he can hear it
How can Ben be helped?
Hasn’t yet found a...
Beyond the Envelope™@Paul_Airy
Who else?
Beyond the Envelope™@Paul_Airy
The BIG picture.
Beyond the Envelope™@Paul_Airy
Beyond the Envelope™@Paul_Airy
Beyond the Envelope™@Paul_Airy
Beyond the Envelope™@Paul_Airy
Everyone benefits.
Beyond the Envelope™@Paul_Airy
The Challenges.
Beyond the Envelope™@Paul_Airy
Challenge 1:
Our thinking.
Beyond the Envelope™@Paul_Airy
Web Accessibility Initiative (WAI)
Beyond the Envelope™@Paul_Airy
Web Content

Accessibility Guidelines
Beyond the Envelope™@Paul_Airy
WCAG 2.0
Web Content Accessibility
Guidelines
Beyond the Envelope™@Paul_Airy
A, AA, AAA
Beyond the Envelope™@Paul_Airy
Insurmountable
Seemingly
Beyond the Envelope™@Paul_Airy
Good News!
Beyond the Envelope™@Paul_Airy
“The idea that an accessible
email is one that ticks all the
WCAG boxes – is a myth!!!”
Pau...
Beyond the Envelope™@Paul_Airy
Myth No. 5: If You Fail One of
the WCAG Techniques, Then You
Fail WCAG 2.0; FALSE.
http://w...
Beyond the Envelope™@Paul_Airy
P.O.U.R.
Four Principles
Beyond the Envelope™@Paul_Airy
Perceivable
Operable
Understandable
Robust
Beyond the Envelope™@Paul_Airy
http://webaim.org
Beyond the Envelope™@Paul_Airy
(Paraphrased)
Beyond the Envelope™@Paul_Airy
Guideline 1.4.6 (WCAG)
“Large Text: Large-scale text and
images of large-scale text have a
...
Beyond the Envelope™@Paul_Airy
Guideline 1.4.6 (WebAIM)
“Large text (over 18 point or 14
point bold) has a contrast ratio ...
Beyond the Envelope™@Paul_Airy
Challenge 2:
Putting it into practice.
Beyond the Envelope™@Paul_Airy
Guideline 1.3.1
“Tables are used for tabular data.
Where necessary, data cells are
associat...
Beyond the Envelope™@Paul_Airy
In email we use tables for structure, not data
We don’t use the table heading, <th> tag
Cha...
Beyond the Envelope™@Paul_Airy
Guideline 1.3.1
“Semantic markup is used to
designate headings, lists,
emphasized or specia...
Beyond the Envelope™@Paul_Airy
Semantic markup is often sacrificed for consistency
<span> instead of <h1>, <h2>, <h3>
Chall...
Beyond the Envelope™@Paul_Airy
“We can implement ‘a level
of accessibility’ if we look
beyond the challenges.”
Paul Airy.
Beyond the Envelope™@Paul_Airy
Beyond the Challenges.
Beyond the Envelope™@Paul_Airy
“Focus on what you CAN do,
not what you can’t do.”
Paul Airy.
Beyond the Envelope™@Paul_Airy
Guideline 1.1.1
“All images … have appropriate,
equivalent alternative text.”
Paraphrased f...
Beyond the Envelope™@Paul_Airy
✔
Beyond the Envelope™@Paul_Airy
Guideline 1.1.1
“Images that do not convey
content… are given null alt text
(alt="").”
Para...
Beyond the Envelope™@Paul_Airy
✔
Beyond the Envelope™@Paul_Airy
Guideline 1.3.2
“The reading and navigation
order (determined by code order)
is logical and...
Beyond the Envelope™@Paul_Airy
✔
Beyond the Envelope™@Paul_Airy
Typographic Tips.
Beyond the Envelope™@Paul_Airy
Use HTML text.
Beyond the Envelope™@Paul_Airy
Guideline 1.4.5
“If the same visual presentation
can be made using text alone,
an image is ...
Beyond the Envelope™@Paul_Airy
Beyond the Envelope™@Paul_Airy
Guideline 1.3.3
“Instructions do not rely upon
shape, size, or visual location
(e.g., "Clic...
Beyond the Envelope™@Paul_Airy
Minimum bodytext size

font-size:14px;
Beyond the Envelope™@Paul_Airy
Webkit resize?

-webkit-text-size-
adjust:none;
Beyond the Envelope™@Paul_Airy
Alignment
text-align:left;
Beyond the Envelope™@Paul_Airy
Beyond the Envelope™@Paul_Airy
Apply 1.5x line-height

on bodytext.
Beyond the Envelope™@Paul_Airy
Guideline 1.4.8
“Have adequate line spacing

(at least 1/2 the height of the
text) and para...
Beyond the Envelope™@Paul_Airy
font-size:14px;
line-height:21px;
1.5x
Beyond the Envelope™@Paul_Airy
font-size:16px;
line-height:24px;
Beyond the Envelope™@Paul_Airy
Include ‘Alt’ text on images.
Beyond the Envelope™@Paul_Airy
Guideline 1.1.1
“All images … have appropriate,
equivalent alternative text.”
Paraphrased f...
Beyond the Envelope™@Paul_Airy
‘Alt’ Text
Beyond the Envelope™@Paul_Airy
style=“font-
family:Courier,
monospace; font-size:
20px; line-height:30px;
color:#ffffff;”
Beyond the Envelope™@Paul_Airy
Styled ‘Alt’ Text
Beyond the Envelope™@Paul_Airy
Use semantic tags.
Beyond the Envelope™@Paul_Airy
Guideline 1.3.1
“Semantic markup is used to
designate headings, lists,
emphasized or specia...
Beyond the Envelope™@Paul_Airy
<h1>, <h2>, <h3>, <p>, <li>
Beyond the Envelope™@Paul_Airy
Heading Fix.
Beyond the Envelope™@Paul_Airy
<h1>
<h2>
Beyond the Envelope™@Paul_Airy
<h1 style=“margin:0;
font-weight:lighter;
Beyond the Envelope™@Paul_Airy
Beyond the Envelope™@Paul_Airy
Blue Links.
Beyond the Envelope™@Paul_Airy
Blue Links
Beyond the Envelope™@Paul_Airy
.appleBlueLinks

a {color:#000000

!important;

text-decoration:none;}
Beyond the Envelope™@Paul_Airy
<span class=

“appleBlueLinks”>

01234 567890</span>
Beyond the Envelope™@Paul_Airy
Contrast.
Beyond the Envelope™@Paul_Airy
Guideline 1.4.3
“Text and images of text have a
contrast ratio of at least 4.5:1.”
Paraphra...
Beyond the Envelope™@Paul_Airy
Beyond the Envelope™@Paul_Airy
Beyond the Envelope™@Paul_Airy
Testing.
Beyond the Envelope™@Paul_Airy
Beyond the Envelope™@Paul_Airy
http://wave.webaim.org/toolbar/
Beyond the Envelope™@Paul_Airy
Create a ‘Text Only’ version.
Screen Readers and Wearables
Beyond the Envelope™@Paul_Airy
Accessibility benefits everyone
W3C WCAG are just that – guidelines
In summary
Failure to co...
Beyond the Envelope™@Paul_Airy
One more thing…
Beyond the Envelope™@Paul_Airy
“The truth is, you’re never
going to be able to cater
for every disability.
But, that’s no ...
Beyond the Envelope™@Paul_Airy
#SubscriberFirst
Beyond the Envelope™@Paul_Airy
Thank you.
Upcoming SlideShare
Loading in …5
×

A Type of Accessibility

526 views

Published on

A Type of Accessibility session from The Email Design Conference 2015, London.

Published in: Design
  • Be the first to comment

A Type of Accessibility

  1. 1. Beyond the Envelope™@Paul_Airy A Type of Accessibility.
  2. 2. Beyond the Envelope™@Paul_Airy “Hello!”
  3. 3. Beyond the Envelope™@Paul_Airy Paul Airy. Email Designer and Developer
  4. 4. Beyond the Envelope™@Paul_Airy Beyond the Envelope™ Research, Design and Development
  5. 5. Beyond the Envelope™@Paul_Airy
  6. 6. Beyond the Envelope™@Paul_Airy
  7. 7. Beyond the Envelope™@Paul_Airy Side Projects. Typography in Email
  8. 8. Beyond the Envelope™@Paul_Airy Beyond the Envelope™
  9. 9. Beyond the Envelope™@Paul_Airy Type E: beyondtheenvelope.co.uk/type-e.php
  10. 10. Beyond the Envelope™@Paul_Airy Beyond the Envelope™ A Type of email. A handbook for working with HTML typography in email Paul Airy Foreword by Justine Jordan, Marketing Director, Litmus. EEC Email Marketer Thought Leader of the Year, 2015.
  11. 11. Beyond the Envelope™@Paul_Airy Coming Soon
  12. 12. Beyond the Envelope™@Paul_Airy @Paul_Airy
  13. 13. Beyond the Envelope™@Paul_Airy Accessibility.
  14. 14. Beyond the Envelope™@Paul_Airy A Type of Accessibility.
  15. 15. Beyond the Envelope™@Paul_Airy 3 ‘Things’.
  16. 16. Beyond the Envelope™@Paul_Airy 1. Recognise the challenges.
  17. 17. Beyond the Envelope™@Paul_Airy 2. Look beyond the challenges.
  18. 18. Beyond the Envelope™@Paul_Airy 3. Typographic Tips.
  19. 19. Beyond the Envelope™@Paul_Airy “To empower you, to empower people, to use email.” Paul Airy.
  20. 20. Beyond the Envelope™@Paul_Airy Who are they?
  21. 21. Beyond the Envelope™@Paul_Airy “There are 9.4 million disabled people in England, accounting for
 18% of the population.” 2011 Census.
  22. 22. Beyond the Envelope™@Paul_Airy “About 56.7 million people — 19% of the population — had a disability in 2010.” United States Census Bureau.
  23. 23. Beyond the Envelope™@Paul_Airy 18%
  24. 24. Beyond the Envelope™@Paul_Airy Physical
  25. 25. Beyond the Envelope™@Paul_Airy Physical Visual
  26. 26. Beyond the Envelope™@Paul_Airy Physical Visual
  27. 27. Beyond the Envelope™@Paul_Airy Physical Visual Cognitive
  28. 28. Beyond the Envelope™@Paul_Airy My friend, Ben…
  29. 29. Beyond the Envelope™@Paul_Airy
  30. 30. Beyond the Envelope™@Paul_Airy Dyslexia.
  31. 31. Beyond the Envelope™@Paul_Airy Reading and writing age of around 14-16 Uppercase and lowercase hard to distinguish What challenges does Ben have? Words jump around Misses context when scanning text Tiring and embarrassing experience
  32. 32. Beyond the Envelope™@Paul_Airy The ability to ‘highlight’ text so he can hear it How can Ben be helped? Hasn’t yet found a flawless solution He’s always looking for something better We can help him The solutions that do exist, rely on ‘live’ text
  33. 33. Beyond the Envelope™@Paul_Airy Who else?
  34. 34. Beyond the Envelope™@Paul_Airy The BIG picture.
  35. 35. Beyond the Envelope™@Paul_Airy
  36. 36. Beyond the Envelope™@Paul_Airy
  37. 37. Beyond the Envelope™@Paul_Airy
  38. 38. Beyond the Envelope™@Paul_Airy Everyone benefits.
  39. 39. Beyond the Envelope™@Paul_Airy The Challenges.
  40. 40. Beyond the Envelope™@Paul_Airy Challenge 1: Our thinking.
  41. 41. Beyond the Envelope™@Paul_Airy Web Accessibility Initiative (WAI)
  42. 42. Beyond the Envelope™@Paul_Airy Web Content
 Accessibility Guidelines
  43. 43. Beyond the Envelope™@Paul_Airy WCAG 2.0 Web Content Accessibility Guidelines
  44. 44. Beyond the Envelope™@Paul_Airy A, AA, AAA
  45. 45. Beyond the Envelope™@Paul_Airy Insurmountable Seemingly
  46. 46. Beyond the Envelope™@Paul_Airy Good News!
  47. 47. Beyond the Envelope™@Paul_Airy “The idea that an accessible email is one that ticks all the WCAG boxes – is a myth!!!” Paul Airy.
  48. 48. Beyond the Envelope™@Paul_Airy Myth No. 5: If You Fail One of the WCAG Techniques, Then You Fail WCAG 2.0; FALSE. http://www.w3.org/WAI/GL/wiki/WCAG_Myths
  49. 49. Beyond the Envelope™@Paul_Airy P.O.U.R. Four Principles
  50. 50. Beyond the Envelope™@Paul_Airy Perceivable Operable Understandable Robust
  51. 51. Beyond the Envelope™@Paul_Airy http://webaim.org
  52. 52. Beyond the Envelope™@Paul_Airy (Paraphrased)
  53. 53. Beyond the Envelope™@Paul_Airy Guideline 1.4.6 (WCAG) “Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 4.5:1;” Paraphrased from http://webaim.org/standards/wcag/checklist
  54. 54. Beyond the Envelope™@Paul_Airy Guideline 1.4.6 (WebAIM) “Large text (over 18 point or 14 point bold) has a contrast ratio of at least 4.5:1.” Paraphrased from http://webaim.org/standards/wcag/checklist
  55. 55. Beyond the Envelope™@Paul_Airy Challenge 2: Putting it into practice.
  56. 56. Beyond the Envelope™@Paul_Airy Guideline 1.3.1 “Tables are used for tabular data. Where necessary, data cells are associated with their headers.” Paraphrased from http://webaim.org/standards/wcag/checklist
  57. 57. Beyond the Envelope™@Paul_Airy In email we use tables for structure, not data We don’t use the table heading, <th> tag Challenges to the Guidelines
  58. 58. Beyond the Envelope™@Paul_Airy Guideline 1.3.1 “Semantic markup is used to designate headings, lists, emphasized or special text, etc.” Paraphrased from http://webaim.org/standards/wcag/checklist
  59. 59. Beyond the Envelope™@Paul_Airy Semantic markup is often sacrificed for consistency <span> instead of <h1>, <h2>, <h3> Challenges to the Guidelines Text ‘loose’ within a <td> rather than using a <p> So called ‘Get To Fixing Outlook’
  60. 60. Beyond the Envelope™@Paul_Airy “We can implement ‘a level of accessibility’ if we look beyond the challenges.” Paul Airy.
  61. 61. Beyond the Envelope™@Paul_Airy Beyond the Challenges.
  62. 62. Beyond the Envelope™@Paul_Airy “Focus on what you CAN do, not what you can’t do.” Paul Airy.
  63. 63. Beyond the Envelope™@Paul_Airy Guideline 1.1.1 “All images … have appropriate, equivalent alternative text.” Paraphrased from http://webaim.org/standards/wcag/checklist
  64. 64. Beyond the Envelope™@Paul_Airy ✔
  65. 65. Beyond the Envelope™@Paul_Airy Guideline 1.1.1 “Images that do not convey content… are given null alt text (alt="").” Paraphrased from http://webaim.org/standards/wcag/checklist
  66. 66. Beyond the Envelope™@Paul_Airy ✔
  67. 67. Beyond the Envelope™@Paul_Airy Guideline 1.3.2 “The reading and navigation order (determined by code order) is logical and intuitive.” Paraphrased from http://webaim.org/standards/wcag/checklist
  68. 68. Beyond the Envelope™@Paul_Airy ✔
  69. 69. Beyond the Envelope™@Paul_Airy Typographic Tips.
  70. 70. Beyond the Envelope™@Paul_Airy Use HTML text.
  71. 71. Beyond the Envelope™@Paul_Airy Guideline 1.4.5 “If the same visual presentation can be made using text alone, an image is not used to present that text.” Paraphrased from http://webaim.org/standards/wcag/checklist
  72. 72. Beyond the Envelope™@Paul_Airy
  73. 73. Beyond the Envelope™@Paul_Airy Guideline 1.3.3 “Instructions do not rely upon shape, size, or visual location (e.g., "Click the square icon
 to continue".” Paraphrased from http://webaim.org/standards/wcag/checklist
  74. 74. Beyond the Envelope™@Paul_Airy Minimum bodytext size
 font-size:14px;
  75. 75. Beyond the Envelope™@Paul_Airy Webkit resize?
 -webkit-text-size- adjust:none;
  76. 76. Beyond the Envelope™@Paul_Airy Alignment text-align:left;
  77. 77. Beyond the Envelope™@Paul_Airy
  78. 78. Beyond the Envelope™@Paul_Airy Apply 1.5x line-height
 on bodytext.
  79. 79. Beyond the Envelope™@Paul_Airy Guideline 1.4.8 “Have adequate line spacing
 (at least 1/2 the height of the text) and paragraph spacing
 (1.5 times line spacing).” Paraphrased from http://webaim.org/standards/wcag/checklist
  80. 80. Beyond the Envelope™@Paul_Airy font-size:14px; line-height:21px; 1.5x
  81. 81. Beyond the Envelope™@Paul_Airy font-size:16px; line-height:24px;
  82. 82. Beyond the Envelope™@Paul_Airy Include ‘Alt’ text on images.
  83. 83. Beyond the Envelope™@Paul_Airy Guideline 1.1.1 “All images … have appropriate, equivalent alternative text.” Paraphrased from http://webaim.org/standards/wcag/checklist
  84. 84. Beyond the Envelope™@Paul_Airy ‘Alt’ Text
  85. 85. Beyond the Envelope™@Paul_Airy style=“font- family:Courier, monospace; font-size: 20px; line-height:30px; color:#ffffff;”
  86. 86. Beyond the Envelope™@Paul_Airy Styled ‘Alt’ Text
  87. 87. Beyond the Envelope™@Paul_Airy Use semantic tags.
  88. 88. Beyond the Envelope™@Paul_Airy Guideline 1.3.1 “Semantic markup is used to designate headings, lists, emphasized or special text, etc.” Paraphrased from http://webaim.org/standards/wcag/checklist
  89. 89. Beyond the Envelope™@Paul_Airy <h1>, <h2>, <h3>, <p>, <li>
  90. 90. Beyond the Envelope™@Paul_Airy Heading Fix.
  91. 91. Beyond the Envelope™@Paul_Airy <h1> <h2>
  92. 92. Beyond the Envelope™@Paul_Airy <h1 style=“margin:0; font-weight:lighter;
  93. 93. Beyond the Envelope™@Paul_Airy
  94. 94. Beyond the Envelope™@Paul_Airy Blue Links.
  95. 95. Beyond the Envelope™@Paul_Airy Blue Links
  96. 96. Beyond the Envelope™@Paul_Airy .appleBlueLinks
 a {color:#000000
 !important;
 text-decoration:none;}
  97. 97. Beyond the Envelope™@Paul_Airy <span class=
 “appleBlueLinks”>
 01234 567890</span>
  98. 98. Beyond the Envelope™@Paul_Airy Contrast.
  99. 99. Beyond the Envelope™@Paul_Airy Guideline 1.4.3 “Text and images of text have a contrast ratio of at least 4.5:1.” Paraphrased from http://webaim.org/standards/wcag/checklist
  100. 100. Beyond the Envelope™@Paul_Airy
  101. 101. Beyond the Envelope™@Paul_Airy
  102. 102. Beyond the Envelope™@Paul_Airy Testing.
  103. 103. Beyond the Envelope™@Paul_Airy
  104. 104. Beyond the Envelope™@Paul_Airy http://wave.webaim.org/toolbar/
  105. 105. Beyond the Envelope™@Paul_Airy Create a ‘Text Only’ version. Screen Readers and Wearables
  106. 106. Beyond the Envelope™@Paul_Airy Accessibility benefits everyone W3C WCAG are just that – guidelines In summary Failure to comply with all the guidelines is not failure There’s levels of accessibility we’re already implementing We can do more, such as use semantic tags There’s tools out there to help
  107. 107. Beyond the Envelope™@Paul_Airy One more thing…
  108. 108. Beyond the Envelope™@Paul_Airy “The truth is, you’re never going to be able to cater for every disability. But, that’s no reason to disregard accessibility.” Paul Airy.
  109. 109. Beyond the Envelope™@Paul_Airy #SubscriberFirst
  110. 110. Beyond the Envelope™@Paul_Airy Thank you.

×