Pro Yearly is on sale from $80 to $50! »

The Great Mess of Alternative Text

A6201a057eac39e2b97a5a58d5f8601e?s=47 HTeuMeuLeu
August 30, 2017

The Great Mess of Alternative Text

From accessibility to blocked image rendering, alternative text is an important part of email coding. But the differences in rendering and styling possibilities between browsers and email clients can be staggering. Welcome to a deep technical dive on the great mess that is alternative text.

This was presented at #LitmusLive 2017 in London on Wednesday, August 30th.

A6201a057eac39e2b97a5a58d5f8601e?s=128

HTeuMeuLeu

August 30, 2017
Tweet

Transcript

  1. Litmus Live London, 2017/08/30

  2. Rémi Parmentier @HTeuMeuLeu emails.hteumeuleu.com

  3. Source : https://twitter.com/flcarneiro/status/568116082835361792

  4. THE GREAT MESS OF ALTERNATIVE TEXT MESS

  5. What is alternative text? Part I

  6. <img src="foo.jpg" alt="" />

  7. ALT ATTRIBUTE IT'S CALLED AN NOT AN ALT TAG

  8. None
  9. None
  10. None
  11. None
  12. Alternative text is for everyone.

  13. 1. Always have an alt attribute. Golden rules

  14. <img src="logo.gif" /> logo gif Image #TeamJIF

  15. <img src="41ee6547-4a1e-669351b1a45d.gif" /> fourty one ee six thousand five hundred…

  16. <img src="foo.jpg" alt="" />

  17. <a href="http://www.example.com/shoes/"> <img src="logo.gif" alt="" /> </a> link shoes

  18. <a href="http://www.example.com/123456789/"> <img src="foo.jpg" alt="" /> </a> link one billion

    two hundred thirty four million…
  19. 1. Always have an alt attribute. Golden rules 2. Use

    relevant alternative text.
  20. 1. Golden rules 2. Use relevant alternative text.

  21. link image 600px wide image

  22. None
  23. link image Turn your images on. Shop AEO.

  24. None
  25. This is not okay.

  26. Making emails accessible is our job.

  27. How email clients block images Part II

  28. How webmails block images Part II

  29. Remove the src attribute. Change the src attribute.

  30. Change the src attribute. Remove the src attribute.

  31. Change the src attribute. Gmail Outlook.com Yahoo! La Poste (desktop)

    AOL Free Remove the src attribute.
  32. <img src="foo.jpg" alt="" />

  33. <img alt="" /> ! // Gmail, Yahoo and Outlook.com //

    remove the src attribute completely.
  34. <img dfsrc="foo.jpg" alt="" /> ! // Free.fr replaces the src

    attribute.
  35. <img removedimage__7e53c284-b78b-1234-79c5- 196085671d9b__src="foo.jpg" alt="" /> ! // AOL uses a

    randomly generated attribute.
  36. Change the src attribute. Gmail Outlook.com Yahoo! La Poste (desktop)

    AOL Free Remove the src attribute.
  37. Change the src attribute. Gmail Outlook.com Yahoo! La Poste (desktop)

    AOL Free Remove the src attribute. Outlook.com (old version) La Poste (mobile)
  38. <img src="foo.jpg" alt="" />

  39. <img src="//a.gfx.ms/i_safe.gif" alt="" /> ! // The old Outlook.com used

    to // replace the value of the src attribute.
  40. None
  41. None
  42. None
  43. None
  44. The rendering Part III

  45. IMAGE IS BLOCKED x CONTENT OF THE ALT ATTRIBUTE. AN

    ICON WITH TEXT
  46. ALTERNATIVE TEXT IS TOTALLY EASY AND INTUITIVE.

  47. THE GREAT MESS OF ALTERNATIVE TEXT MESS

  48. IMAGE IS BLOCKED

  49. IMAGE IS BLOCKED SRC NO SRC

  50. IMAGE IS BLOCKED SRC NO SRC IE OTHER BROWSERS

  51. IMAGE IS BLOCKED SRC NO SRC IE OTHER BROWSERS ON

    WINDOWS XP 7 8-10
  52. IMAGE IS BLOCKED SRC NO SRC IE OTHER BROWSERS NO

    ICON XP 7 8-10 ON WINDOWS
  53. IMAGE IS BLOCKED SRC NO SRC CHROME IE OTHER BROWSERS

    NO ICON XP 7 8-10 ON WINDOWS
  54. None
  55. IMAGE IS BLOCKED SRC NO SRC CHROME IE OTHER BROWSERS

    NO ICON XP 7 8-10 ON WINDOWS
  56. IMAGE IS BLOCKED SRC NO SRC CHROME Safari IE OTHER

    BROWSERS NO ICON XP 7 8-10 ON WINDOWS
  57. IMAGE IS BLOCKED SRC NO SRC IE CHROME Safari IE

    OTHER BROWSERS NO ICON XP XP 7 8-10 ON WINDOWS ON WINDOWS 7 8-10
  58. IMAGE IS BLOCKED SRC NO SRC IE CHROME Safari IE

    OTHER BROWSERS NO ICON XP 7 8-10 XP 7 8-10 ON WINDOWS ON WINDOWS
  59. IMAGE IS BLOCKED SRC NO SRC IE CHROME Safari IE

    OTHER BROWSERS NO ICON XP 7 8-10 XP 7 8-10 ON WINDOWS ON WINDOWS ALT NO ALT
  60. SRC NO SRC IE CHROME Safari IE OTHER BROWSERS NO

    ICON XP 7 8-10 XP 7 8-10 ON WINDOWS ON WINDOWS FIREFOX
  61. SRC NO SRC IE CHROME Safari IE OTHER BROWSERS NO

    ICON XP 7 8-10 XP 7 8-10 ON WINDOWS ON WINDOWS NO ALT FIREFOX
  62. SRC NO SRC IE CHROME Safari IE OTHER BROWSERS NO

    ICON XP 7 8-10 XP 7 8-10 ON WINDOWS ON WINDOWS NO ALT FIREFOX
  63. NO ALT FIREFOX

  64. ALT NO ALT FIREFOX

  65. ALT NO ALT FIREFOX EMPTY NOT EMPTY

  66. ALT NO ALT FIREFOX EMPTY NOT EMPTY SAFARI

  67. ALT NO ALT FIREFOX EMPTY NOT EMPTY SAFARI TEXT FITS

    TEXT DOESN'T FIT
  68. <img src="logo.gif" alt="Lorem ipsum" /> Lorem ipsum

  69. <img src="logo.gif" alt="Lorem ipsum dolor sit" /> Lorem ipsum dolor

    sit
  70. <img src="logo.gif" alt="Lorem ipsum dolor sit amet" />

  71. <img src="logo.gif" alt="Lorem ipsum" /> Lorem ipsum

  72. <img src="logo.gif" alt="Lorem ipsum" style="font-size:20px" /> Lorem ipsum

  73. <img src="logo.gif" alt="Lorem ipsum" style="font-size:25px" /> Lorem ipsum

  74. <img src="logo.gif" alt="Lorem ipsum" style="font-size:30px" />

  75. ALT NO ALT FIREFOX EMPTY NOT EMPTY SAFARI TEXT FITS

    TEXT DOESN'T FIT
  76. ALT NO ALT FIREFOX EMPTY NOT EMPTY SAFARI TEXT FITS

    TEXT DOESN'T FIT NO TEXT TEXT
  77. ALT NO ALT FIREFOX EMPTY NOT EMPTY OTHER BROWSERS SAFARI

    TEXT FITS TEXT DOESN'T FIT NO TEXT TEXT
  78. ALT NO ALT FIREFOX EMPTY NOT EMPTY NO TEXT TEXT

    Firefox OTHER BROWSERS SAFARI TEXT FITS TEXT DOESN'T FIT
  79. ALT NO ALT FIREFOX EMPTY NOT EMPTY NO TEXT TEXT

    Firefox OTHER BROWSERS SAFARI TEXT FITS TEXT DOESN'T FIT BLOCK -ISH INLINE -ISH
  80. ALT NO ALT FIREFOX EMPTY NOT EMPTY NO TEXT TEXT

    Firefox OTHER BROWSERS SAFARI TEXT FITS TEXT DOESN'T FIT BLOCK -ISH INLINE -ISH NOTHING AT ALL
  81. ALT NO ALT FIREFOX EMPTY NOT EMPTY NO TEXT TEXT

    OTHER BROWSERS Firefox OTHER BROWSERS SAFARI TEXT FITS TEXT DOESN'T FIT BLOCK -ISH INLINE -ISH NOTHING AT ALL
  82. ALT NO ALT SAFARI FIREFOX CHROME EMPTY NOT EMPTY NO

    TEXT TEXT OTHER BROWSERS Firefox OTHER BROWSERS SAFARI TEXT FITS TEXT DOESN'T FIT BLOCK -ISH INLINE -ISH NOTHING AT ALL
  83. ALT NO ALT SAFARI FIREFOX CHROME EMPTY NOT EMPTY TITLE

    ATTRIBUTE NO TEXT TEXT OTHER BROWSERS Firefox OTHER BROWSERS SAFARI TEXT FITS TEXT DOESN'T FIT BLOCK -ISH INLINE -ISH NOTHING AT ALL
  84. ALT NO ALT SAFARI FIREFOX CHROME EMPTY NOT EMPTY TITLE

    ATTRIBUTE NO TEXT TEXT OTHER BROWSERS Firefox OTHER BROWSERS SAFARI TEXT FITS TEXT DOESN'T FIT BLOCK -ISH INLINE -ISH NOTHING AT ALL
  85. ALT NO ALT SAFARI FIREFOX CHROME EMPTY NOT EMPTY TITLE

    ATTRIBUTE NO TEXT TEXT OTHER BROWSERS Firefox OTHER BROWSERS SAFARI TEXT FITS TEXT DOESN'T FIT BLOCK -ISH INLINE -ISH NOTHING AT ALL OTHER BROWSERS
  86. ALT NO ALT SAFARI FIREFOX CHROME EMPTY NOT EMPTY TITLE

    ATTRIBUTE NO TEXT TEXT OTHER BROWSERS Firefox OTHER BROWSERS SAFARI TEXT FITS TEXT DOESN'T FIT BLOCK -ISH INLINE -ISH NOTHING AT ALL OTHER BROWSERS
  87. ALT NO ALT SAFARI FIREFOX CHROME EMPTY NOT EMPTY TITLE

    ATTRIBUTE NO TEXT TEXT OTHER BROWSERS Firefox OTHER BROWSERS SAFARI TEXT FITS TEXT DOESN'T FIT BLOCK -ISH INLINE -ISH NOTHING AT ALL OTHER BROWSERS
  88. ALT NO ALT IMAGE IS BLOCKED SRC NO SRC IE

    CHROME Safari IE OTHER BROWSERS NO ICON XP 7 8-10 XP 7 8-10 ON WINDOWS ON WINDOWS
  89. NO ALT IMAGE IS BLOCKED SRC IE CHROME Safari XP

    7 8-10 X ON WINDOWS
  90. NO ALT IMAGE IS BLOCKED SRC IE CHROME Safari XP

    7 8-10 X ON WINDOWS ONLY WIDTH ONLY HEIGHT
  91. NO ALT IMAGE IS BLOCKED SRC IE CHROME Safari XP

    7 8-10 X ON WINDOWS ONLY WIDTH ONLY HEIGHT Safari
  92. NO ALT IMAGE IS BLOCKED SRC IE CHROME Safari XP

    7 8-10 X ON WINDOWS ONLY WIDTH ONLY HEIGHT Safari
  93. IT's DIFFERENT IN QUIRKS MODE.

  94. CHROME 40 AND BELOW BEHAVE LIKE SAFARI.

  95. things changed in Chrome 60. (that was like two weeks

    ago.)
  96. Styling Part IV

  97. Source : https://twitter.com/HTeuMeuLeu/status/598446088614445056

  98. Source : https://twitter.com/nannerb/status/552130097214672897

  99. Source : https://twitter.com/carey_mercier/status/636926210589728768

  100. Source : https://twitter.com/HTeuMeuLeu/status/327700310783053824/photo/1

  101. <table role="presentation">

  102. Basic styles

  103. <img src="foo.jpg" alt="" style="color:#f60;" />

  104. Source : http://www.badsender.com/2017/04/12/textes-alternatifs-devient-doux-doux-calin/

  105. /* Supported by IE, Safari, Chrome and Firefox */ color:

    #f60; background: #eee;
  106. /* Supported by IE, Safari, Chrome and Firefox */ color:

    #f60; background: #eee; ! /* Supported by Safari, Chrome and Firefox */ font-size: 32px; font-family: Georgia, sans-serif; font-style: italic; font-weight: bold; word-spacing: 10px; letter-spacing: 2px;
  107. blocked image in Chrome < 60

  108. Shadow DOM

  109. None
  110. None
  111. None
  112. None
  113. img /deep/ #alttext-image { display: none; }

  114. img >>> #alttext-image { display: none; }

  115. blocked image in Chrome < 60

  116. blocked image in Firefox

  117. img { -moz-force-broken-image-icon: 1; }

  118. :before trick

  119. Source : https://bitsofco.de/styling-broken-images/

  120. An image is a replaced element.

  121. But a broken or blocked image is not. (in Chrome

    and Firefox)
  122. img { position: relative; display: block; } Lorem ipsum

  123. img { position: relative; display: block; } ! img:before {

    content: attr(alt); background: #cacaca; } Lorem ipsum Lorem ipsum
  124. img { position: relative; display: block; } ! img:before {

    content: attr(alt); background: #cacaca; position: absolute; left: 0; right: 0; top: 0; bottom: 0; } Lorem ipsum
  125. Support is not good.

  126. Alternate Theory blog.gorebel.com/an-alternative-theory/

  127. EMAILS ARE . MESSY

  128. THE WEB IS . MESSY

  129. None
  130. Thank you ! @HTeuMeuLeu emails.hteumeuleu.com