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.

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
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
23. link image Turn your images on. Shop AEO.
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.
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
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
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
130. Thank you ! @HTeuMeuLeu emails.hteumeuleu.com