Download as PDF, PPTX
Uploaded byPaul Airy
A Type of Accessibility
This document discusses email accessibility and typography. It is authored by Paul Airy, an email designer and developer. The document discusses the challenges of applying web accessibility guidelines like WCAG to email. However, it argues that focusing on guidelines we can implement, like using semantic HTML tags and ensuring adequate color contrast, can make email more accessible. It provides tips for email designers like using minimum font sizes, line heights, and including text alternatives for images. The goal is to make email accessible to more people, including those with disabilities, while recognizing the technical limitations of the medium.
A Type of Accessibility
- 1. Beyond the Envelope™@Paul_Airy AType of Accessibility.
- 2.
- 3. Beyond the Envelope™@Paul_Airy PaulAiry. Email Designer and Developer
- 4. Beyond the Envelope™@Paul_Airy Beyondthe Envelope™ Research, Design and Development
- 5.
- 6.
- 7. Beyond the Envelope™@Paul_Airy SideProjects. Typography in Email
- 8. Beyond the Envelope™@Paul_Airy Beyondthe Envelope™
- 9. Beyond the Envelope™@Paul_Airy TypeE: beyondtheenvelope.co.uk/type-e.php
- 10. Beyond the Envelope™@Paul_Airy Beyondthe 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.
- 12.
- 13.
- 14. Beyond the Envelope™@Paul_Airy AType of Accessibility.
- 15. Beyond the Envelope™@Paul_Airy 3‘Things’.
- 16. Beyond the Envelope™@Paul_Airy 1.Recognise the challenges.
- 17. Beyond the Envelope™@Paul_Airy 2.Look beyond the challenges.
- 18. Beyond the Envelope™@Paul_Airy 3.Typographic Tips.
- 19. Beyond the Envelope™@Paul_Airy “Toempower you, to empower people, to use email.” Paul Airy.
- 20. Beyond the Envelope™@Paul_Airy Whoare they?
- 21. Beyond the Envelope™@Paul_Airy “Thereare 9.4 million disabled people in England, accounting for 18% of the population.” 2011 Census.
- 22. Beyond the Envelope™@Paul_Airy “About56.7 million people — 19% of the population — had a disability in 2010.” United States Census Bureau.
- 23.
- 24.
- 25.
- 26.
- 27.
- 28. Beyond the Envelope™@Paul_Airy Myfriend, Ben…
- 29.
- 30.
- 31. Beyond the Envelope™@Paul_Airy Readingand 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. Beyond the Envelope™@Paul_Airy Theability 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.
- 34. Beyond the Envelope™@Paul_Airy TheBIG picture.
- 35.
- 36.
- 37.
- 38.
- 39. Beyond the Envelope™@Paul_Airy TheChallenges.
- 40. Beyond the Envelope™@Paul_Airy Challenge1: Our thinking.
- 41. Beyond the Envelope™@Paul_Airy WebAccessibility Initiative (WAI)
- 42. Beyond the Envelope™@Paul_Airy WebContent Accessibility Guidelines
- 43. Beyond the Envelope™@Paul_Airy WCAG2.0 Web Content Accessibility Guidelines
- 44.
- 45.
- 46.
- 47. Beyond the Envelope™@Paul_Airy “Theidea that an accessible email is one that ticks all the WCAG boxes – is a myth!!!” Paul Airy.
- 48. Beyond the Envelope™@Paul_Airy MythNo. 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.
- 50.
- 51.
- 52.
- 53. Beyond the Envelope™@Paul_Airy Guideline1.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. Beyond the Envelope™@Paul_Airy Guideline1.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. Beyond the Envelope™@Paul_Airy Challenge2: Putting it into practice.
- 56. Beyond the Envelope™@Paul_Airy Guideline1.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. Beyond the Envelope™@Paul_Airy Inemail we use tables for structure, not data We don’t use the table heading, <th> tag Challenges to the Guidelines
- 58. Beyond the Envelope™@Paul_Airy Guideline1.3.1 “Semantic markup is used to designate headings, lists, emphasized or special text, etc.” Paraphrased from http://webaim.org/standards/wcag/checklist
- 59. Beyond the Envelope™@Paul_Airy Semanticmarkup 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. Beyond the Envelope™@Paul_Airy “Wecan implement ‘a level of accessibility’ if we look beyond the challenges.” Paul Airy.
- 61. Beyond the Envelope™@Paul_Airy Beyondthe Challenges.
- 62. Beyond the Envelope™@Paul_Airy “Focuson what you CAN do, not what you can’t do.” Paul Airy.
- 63. Beyond the Envelope™@Paul_Airy Guideline1.1.1 “All images … have appropriate, equivalent alternative text.” Paraphrased from http://webaim.org/standards/wcag/checklist
- 64.
- 65. Beyond the Envelope™@Paul_Airy Guideline1.1.1 “Images that do not convey content… are given null alt text (alt="").” Paraphrased from http://webaim.org/standards/wcag/checklist
- 66.
- 67. Beyond the Envelope™@Paul_Airy Guideline1.3.2 “The reading and navigation order (determined by code order) is logical and intuitive.” Paraphrased from http://webaim.org/standards/wcag/checklist
- 68.
- 69.
- 70. Beyond the Envelope™@Paul_Airy UseHTML text.
- 71. Beyond the Envelope™@Paul_Airy Guideline1.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.
- 73. Beyond the Envelope™@Paul_Airy Guideline1.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. Beyond the Envelope™@Paul_Airy Minimumbodytext size font-size:14px;
- 75. Beyond the Envelope™@Paul_Airy Webkitresize? -webkit-text-size- adjust:none;
- 76.
- 77.
- 78. Beyond the Envelope™@Paul_Airy Apply1.5x line-height on bodytext.
- 79. Beyond the Envelope™@Paul_Airy Guideline1.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.
- 81.
- 82. Beyond the Envelope™@Paul_Airy Include‘Alt’ text on images.
- 83. Beyond the Envelope™@Paul_Airy Guideline1.1.1 “All images … have appropriate, equivalent alternative text.” Paraphrased from http://webaim.org/standards/wcag/checklist
- 84.
- 85. Beyond the Envelope™@Paul_Airy style=“font- family:Courier, monospace;font-size: 20px; line-height:30px; color:#ffffff;”
- 86. Beyond the Envelope™@Paul_Airy Styled‘Alt’ Text
- 87. Beyond the Envelope™@Paul_Airy Usesemantic tags.
- 88. Beyond the Envelope™@Paul_Airy Guideline1.3.1 “Semantic markup is used to designate headings, lists, emphasized or special text, etc.” Paraphrased from http://webaim.org/standards/wcag/checklist
- 89. Beyond the Envelope™@Paul_Airy <h1>,<h2>, <h3>, <p>, <li>
- 90.
- 91.
- 92. Beyond the Envelope™@Paul_Airy <h1style=“margin:0; font-weight:lighter;
- 93.
- 94.
- 95.
- 96. Beyond the Envelope™@Paul_Airy .appleBlueLinks a{color:#000000 !important; text-decoration:none;}
- 97. Beyond the Envelope™@Paul_Airy <spanclass= “appleBlueLinks”> 01234 567890</span>
- 98.
- 99. Beyond the Envelope™@Paul_Airy Guideline1.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.
- 101.
- 102.
- 103.
- 104.
- 105. Beyond the Envelope™@Paul_Airy Createa ‘Text Only’ version. Screen Readers and Wearables
- 106. Beyond the Envelope™@Paul_Airy Accessibilitybenefits 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. Beyond the Envelope™@Paul_Airy Onemore thing…
- 108. Beyond the Envelope™@Paul_Airy “Thetruth is, you’re never going to be able to cater for every disability. But, that’s no reason to disregard accessibility.” Paul Airy.
- 109.
- 110.