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.
Beyond the Envelope™@Paul_Airy
The challenges and opportunities of implementation.
Accessibility in Action
A
@Paul_Airy Beyond the Envelope™
“Hello!”
@Paul_Airy Beyond the Envelope™
@Paul_Airy
Email Designer and Developer
@Paul_Airy Beyond the Envelope™
Beyond the Envelope™
+
@Paul_Airy Beyond the Envelope™
#SubscriberFirst
@Paul_Airy Beyond the Envelope™
I ♥ HTML Typography
@Paul_Airy Beyond the Envelope™
@Paul_Airy Beyond the Envelope™
@Paul_Airy Beyond the Envelope™
I ♥ Accessibility
Beyond the Envelope™@Paul_Airy
Email Design Conference, 2015.
Years Ago
2
@Paul_Airy Beyond the Envelope™
“ ”
@Paul_Airy Beyond the Envelope™
Challenges
Technical
Cultural
@Paul_Airy Beyond the Envelope™
@Paul_Airy Beyond the Envelope™
Beyond the Envelope™@Paul_Airy
Speed dating questions.
Q
@Paul_Airy Beyond the Envelope™
Value?
@Paul_Airy Beyond the Envelope™
Resource?
@Paul_Airy Beyond the Envelope™
Priority?
My Journey.
@Paul_Airy Beyond the Envelope™
@Paul_Airy Beyond the Envelope™
@Paul_Airy Beyond the Envelope™
#LitmusLive + 1.
31 August
Thur
Essentials.
Beyond the Envelope™@Paul_Airy
Essential 01:

Accessibility Mindset
Accessibility as an integral part of the email design ...
Beyond the Envelope™@Paul_Airy
“Design and develop with an
accessibility mindset.
2013.
@Paul_Airy Beyond the Envelope™
Mindset
Accessibility
Mobile
Beyond the Envelope™@Paul_Airy
Essential 02:

Foundational Implementation
@Paul_Airy Beyond the Envelope™
Foundational

Implementation
Resource
Quick Wins
Priority
Greatest Opportunity
@Paul_Airy Beyond the Envelope™
Colour
Images
Buttons/Links
Layout
Typography
Foundational

Implementation
@Paul_Airy Beyond the Envelope™
A
@Paul_Airy Beyond the Envelope™
Typography
Ensuring typography is accessible.
Beyond the Envelope™@Paul_Airy
Used HTML typography
All text is ‘live text’ so it can be read by a screen reader.
Beyond the Envelope™@Paul_Airy
Used semantic tags
To enable a screen reader to distinguish between levels of heading, para...
Beyond the Envelope™@Paul_Airy
<h1> ! <h6> <p> <li>
Heading, paragraph and list tags.
Beyond the Envelope™@Paul_Airy
font-weight:normal;
Applied a style to lighten the weight of headings.
Beyond the Envelope™@Paul_Airy
font-weight:lighter;
Applied a style to lighten the weight of headings.
Beyond the Envelope™@Paul_Airy
<p style=“margin:0;”>
Applied margin:0; to semantic tags to reset margins.
‘Magic Margin’
Beyond the Envelope™@Paul_Airy
<p style=“

margin:0 0 10px 0;”>
Paragraph Space
Beyond the Envelope™@Paul_Airy
mso-line-height-rule:exactly;
Maintain line-height on Microsoft Outlook.
Beyond the Envelope™@Paul_Airy
Applied line-height 1.5x font-size.
Body text size

14px!16px
Beyond the Envelope™@Paul_Airy
X-height

xxA fonts x-height is literally the height of its lower case ‘x’ character.
Beyond the Envelope™@Paul_Airy
Applied line-height 1.5x font-size.
Body text size (mobile)

16px+
Beyond the Envelope™@Paul_Airy
Body text alignment

text-align:left;
Centred and justified text is difficult to follow.
Beyond the Envelope™@Paul_Airy
<h1> Heading
Paragraph of text.
</h1>
</td>
<td>
Heading styles
<p> </p>
Beyond the Envelope™@Paul_Airy
<h1> Heading
Paragraph of text.
</h1>
</td>
<td>
Paragraph styles
<p> </p>
@Paul_Airy Beyond the Envelope™
Layout
Ensuring the layout of an email is accessible.
@Paul_Airy
Logical order
Email coded in logical reading order.
"
Beyond the Envelope™@Paul_Airy
<table role=“presentation”>
Applied to redefine <table>s as presentational elements for scr...
Beyond the Envelope™@Paul_Airy
Spacing
Inserted enough space for text to be read easily.
@Paul_Airy Beyond the Envelope™
Buttons and Links
Ensuring interactive elements are accessible.
Beyond the Envelope™@Paul_Airy
Buttons
Ensured buttons can be selected across their total area.
Beyond the Envelope™@Paul_Airy
‘Click Here’
Avoided using ‘Click Here’, or other terms that reference a button or link vis...
Beyond the Envelope™@Paul_Airy
Blue/grey links
Restyled ‘blue/grey links’, while retaining functionality.
@Paul_Airy Beyond the Envelope™
Images
Ensuring images are accessible.
Beyond the Envelope™@Paul_Airy
alt=“” title=“”
Used alt attributes on all images. Avoided title attributes.
Beyond the Envelope™@Paul_Airy
Avoided erratic gifs (or ‘jifs’)
For people living with epilepsy.
@Paul_Airy Beyond the Envelope™
Colour
Ensuring colour is accessible.
Beyond the Envelope™@Paul_Airy
Colour ≠ Meaning
Avoided using colour to communicate meaning for people living with colour ...
Beyond the Envelope™@Paul_Airy
Checked colour contrast.
@Paul_Airy Beyond the Envelope™
Beyond the Envelope™@Paul_Airy
<div> </div>
Using <div>s on Type E:, with MSO conditionals as a fallback for Microsoft Out...
Beyond the Envelope™@Paul_Airy
<nav><div> </div></nav>
Wrapped sections of email within HTML5 tags to describe them semant...
Beyond the Envelope™@Paul_Airy
Using border-bottom rather than text-decoration.
border-bottom
Beyond the Envelope™@Paul_Airy
Essential 03:

Speaking and Sharing
@Paul_Airy Beyond the Envelope™
“ ”
@Paul_Airy Beyond the Envelope™
Crossing Borders.
Beyond the Envelope™@Paul_Airy
Crossing Borders:

Advanced Implementation
@Paul_Airy Beyond the Envelope™
Buy-in
With Support
Advanced

Implementation
Alignment
@Paul_Airy Beyond the Envelope™
Get tuned into your
organisation, and find
out what matters to it.
“
Beyond the Envelope™@Paul_Airy
People focused
Beyond the Envelope™@Paul_Airy
Beyond the Envelope™@Paul_Airy
Black on yellow
@Paul_Airy Beyond the Envelope™
Understand your
subscribers and how
they interact with email.
“
Beyond the Envelope™@Paul_Airy
@Paul_Airy Beyond the Envelope™
iPad 25.0%
iPhone 23.8%
@Paul_Airy Beyond the Envelope™
Demonstration
Finally.
@Paul_Airy Beyond the Envelope™
Any implementation of
accessibility, however
small, is a success.
“
@Paul_Airy Beyond the Envelope™
We shouldn’t feel the pressure
of having to make emails
‘fully accessible’.
“
@Paul_Airy Beyond the Envelope™
Doing nothing

is not an option.
“
@Paul_Airy Beyond the Envelope™
Accessibility = Our Job
@Paul_Airy Beyond the Envelope™
Accessibility ≠ Added Extra
@Paul_Airy Beyond the Envelope™
#SubscriberFirst
Beyond the Envelope™@Paul_Airy
“Thanks”
@Paul_Airy

@Type_of_Email
Accessibility in Action: The Challenges and Opportunities of Implementation
Accessibility in Action: The Challenges and Opportunities of Implementation
Accessibility in Action: The Challenges and Opportunities of Implementation
Accessibility in Action: The Challenges and Opportunities of Implementation
Prochain SlideShare
Chargement dans…5
×

Accessibility in Action: The Challenges and Opportunities of Implementation

566 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
  • Soyez le premier à commenter

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
 Implementation
  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
 14px!16px
  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)
 16px+
  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
 @Type_of_Email

×