Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Accessibility in Action: The Challenges and Opportunities of Implementation

793 vues

Publié le

As email designers, developers and marketers, we're all passionate about delivering great email experiences to our subscribers, and as such we understand and appreciate the importance of accessibility in email. But how do we go about implementing accessibility in our email campaigns when we're faced with the challenge of persuading the senior leaders and stakeholders within our organisations of its value, the challenge of knowing how much resource we need to commit to it, and the challenge of knowing what and where we should prioritise?

In this session Paul will look at how to overcome these challenges using examples and insights from his own experiences working on both experimental and commercial email campaigns, and the opportunities available to deliver accessible email experiences to our subscribers.

Publié dans : Technologie
  • Login to see the comments

Accessibility in Action: The Challenges and Opportunities of Implementation

  1. 1. Beyond the Envelope™@Paul_Airy The challenges and opportunities of implementation. Accessibility in Action A
  2. 2. @Paul_Airy Beyond the Envelope™ “Hello!”
  3. 3. @Paul_Airy Beyond the Envelope™ @Paul_Airy Email Designer and Developer
  4. 4. @Paul_Airy Beyond the Envelope™ Beyond the Envelope™ +
  5. 5. @Paul_Airy Beyond the Envelope™ #SubscriberFirst
  6. 6. @Paul_Airy Beyond the Envelope™ I ♥ HTML Typography
  7. 7. @Paul_Airy Beyond the Envelope™
  8. 8. @Paul_Airy Beyond the Envelope™
  9. 9. @Paul_Airy Beyond the Envelope™ I ♥ Accessibility
  10. 10. Beyond the Envelope™@Paul_Airy Email Design Conference, 2015. Years Ago 2
  11. 11. @Paul_Airy Beyond the Envelope™ “ ”
  12. 12. @Paul_Airy Beyond the Envelope™ Challenges Technical Cultural
  13. 13. @Paul_Airy Beyond the Envelope™
  14. 14. @Paul_Airy Beyond the Envelope™
  15. 15. Beyond the Envelope™@Paul_Airy Speed dating questions. Q
  16. 16. @Paul_Airy Beyond the Envelope™ Value?
  17. 17. @Paul_Airy Beyond the Envelope™ Resource?
  18. 18. @Paul_Airy Beyond the Envelope™ Priority?
  19. 19. My Journey.
  20. 20. @Paul_Airy Beyond the Envelope™
  21. 21. @Paul_Airy Beyond the Envelope™
  22. 22. @Paul_Airy Beyond the Envelope™ #LitmusLive + 1. 31 August Thur
  23. 23. Essentials.
  24. 24. Beyond the Envelope™@Paul_Airy Essential 01:
 Accessibility Mindset Accessibility as an integral part of the email design and development process.
  25. 25. Beyond the Envelope™@Paul_Airy “Design and develop with an accessibility mindset.
  26. 26. 2013.
  27. 27. @Paul_Airy Beyond the Envelope™ Mindset Accessibility Mobile
  28. 28. Beyond the Envelope™@Paul_Airy Essential 02:
 Foundational Implementation
  29. 29. @Paul_Airy Beyond the Envelope™ Foundational
 Implementation Resource Quick Wins Priority Greatest Opportunity
  30. 30. @Paul_Airy Beyond the Envelope™ Colour Images Buttons/Links Layout Typography Foundational
  31. 31. @Paul_Airy Beyond the Envelope™ A
  32. 32. @Paul_Airy Beyond the Envelope™ Typography Ensuring typography is accessible.
  33. 33. Beyond the Envelope™@Paul_Airy Used HTML typography All text is ‘live text’ so it can be read by a screen reader.
  34. 34. Beyond the Envelope™@Paul_Airy Used semantic tags To enable a screen reader to distinguish between levels of heading, paragraphs and lists.
  35. 35. Beyond the Envelope™@Paul_Airy <h1> ! <h6> <p> <li> Heading, paragraph and list tags.
  36. 36. Beyond the Envelope™@Paul_Airy font-weight:normal; Applied a style to lighten the weight of headings.
  37. 37. Beyond the Envelope™@Paul_Airy font-weight:lighter; Applied a style to lighten the weight of headings.
  38. 38. Beyond the Envelope™@Paul_Airy <p style=“margin:0;”> Applied margin:0; to semantic tags to reset margins. ‘Magic Margin’
  39. 39. Beyond the Envelope™@Paul_Airy <p style=“
 margin:0 0 10px 0;”> Paragraph Space
  40. 40. Beyond the Envelope™@Paul_Airy mso-line-height-rule:exactly; Maintain line-height on Microsoft Outlook.
  41. 41. Beyond the Envelope™@Paul_Airy Applied line-height 1.5x font-size. Body text size
  42. 42. Beyond the Envelope™@Paul_Airy X-height
 xxA fonts x-height is literally the height of its lower case ‘x’ character.
  43. 43. Beyond the Envelope™@Paul_Airy Applied line-height 1.5x font-size. Body text size (mobile)
  44. 44. Beyond the Envelope™@Paul_Airy Body text alignment
 text-align:left; Centred and justified text is difficult to follow.
  45. 45. Beyond the Envelope™@Paul_Airy <h1> Heading Paragraph of text. </h1> </td> <td> Heading styles <p> </p>
  46. 46. Beyond the Envelope™@Paul_Airy <h1> Heading Paragraph of text. </h1> </td> <td> Paragraph styles <p> </p>
  47. 47. @Paul_Airy Beyond the Envelope™ Layout Ensuring the layout of an email is accessible.
  48. 48. @Paul_Airy Logical order Email coded in logical reading order. "
  49. 49. Beyond the Envelope™@Paul_Airy <table role=“presentation”> Applied to redefine <table>s as presentational elements for screen readers. *Courtesy of Mark Robbins. *
  50. 50. Beyond the Envelope™@Paul_Airy Spacing Inserted enough space for text to be read easily.
  51. 51. @Paul_Airy Beyond the Envelope™ Buttons and Links Ensuring interactive elements are accessible.
  52. 52. Beyond the Envelope™@Paul_Airy Buttons Ensured buttons can be selected across their total area.
  53. 53. Beyond the Envelope™@Paul_Airy ‘Click Here’ Avoided using ‘Click Here’, or other terms that reference a button or link visually.
  54. 54. Beyond the Envelope™@Paul_Airy Blue/grey links Restyled ‘blue/grey links’, while retaining functionality.
  55. 55. @Paul_Airy Beyond the Envelope™ Images Ensuring images are accessible.
  56. 56. Beyond the Envelope™@Paul_Airy alt=“” title=“” Used alt attributes on all images. Avoided title attributes.
  57. 57. Beyond the Envelope™@Paul_Airy Avoided erratic gifs (or ‘jifs’) For people living with epilepsy.
  58. 58. @Paul_Airy Beyond the Envelope™ Colour Ensuring colour is accessible.
  59. 59. Beyond the Envelope™@Paul_Airy Colour ≠ Meaning Avoided using colour to communicate meaning for people living with colour blindness.
  60. 60. Beyond the Envelope™@Paul_Airy Checked colour contrast.
  61. 61. @Paul_Airy Beyond the Envelope™
  62. 62. Beyond the Envelope™@Paul_Airy <div> </div> Using <div>s on Type E:, with MSO conditionals as a fallback for Microsoft Outlook.
  63. 63. Beyond the Envelope™@Paul_Airy <nav><div> </div></nav> Wrapped sections of email within HTML5 tags to describe them semantically.
  64. 64. Beyond the Envelope™@Paul_Airy Using border-bottom rather than text-decoration. border-bottom
  65. 65. Beyond the Envelope™@Paul_Airy Essential 03:
 Speaking and Sharing
  66. 66. @Paul_Airy Beyond the Envelope™ “ ”
  67. 67. @Paul_Airy Beyond the Envelope™
  68. 68. Crossing Borders.
  69. 69. Beyond the Envelope™@Paul_Airy Crossing Borders:
 Advanced Implementation
  70. 70. @Paul_Airy Beyond the Envelope™ Buy-in With Support Advanced
 Implementation Alignment
  71. 71. @Paul_Airy Beyond the Envelope™ Get tuned into your organisation, and find out what matters to it. “
  72. 72. Beyond the Envelope™@Paul_Airy People focused
  73. 73. Beyond the Envelope™@Paul_Airy
  74. 74. Beyond the Envelope™@Paul_Airy Black on yellow
  75. 75. @Paul_Airy Beyond the Envelope™ Understand your subscribers and how they interact with email. “
  76. 76. Beyond the Envelope™@Paul_Airy
  77. 77. @Paul_Airy Beyond the Envelope™ iPad 25.0% iPhone 23.8%
  78. 78. @Paul_Airy Beyond the Envelope™ Demonstration
  79. 79. Finally.
  80. 80. @Paul_Airy Beyond the Envelope™ Any implementation of accessibility, however small, is a success. “
  81. 81. @Paul_Airy Beyond the Envelope™ We shouldn’t feel the pressure of having to make emails ‘fully accessible’. “
  82. 82. @Paul_Airy Beyond the Envelope™ Doing nothing
 is not an option. “
  83. 83. @Paul_Airy Beyond the Envelope™ Accessibility = Our Job
  84. 84. @Paul_Airy Beyond the Envelope™ Accessibility ≠ Added Extra
  85. 85. @Paul_Airy Beyond the Envelope™ #SubscriberFirst
  86. 86. Beyond the Envelope™@Paul_Airy “Thanks” @Paul_Airy