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. 8.
  2. 9.
  3. 10.
  4. 11.
  5. 22.
  6. 24.
  7. 33.

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

    remove the src attribute completely.
  8. 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)
  9. 39.

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

    to // replace the value of the src attribute.
  10. 40.
  11. 41.
  12. 42.
  13. 43.
  14. 52.
  15. 53.
  16. 54.
  17. 55.
  18. 56.

    IMAGE IS BLOCKED SRC NO SRC CHROME Safari IE OTHER

    BROWSERS NO ICON XP 7 8-10 ON WINDOWS
  19. 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
  20. 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
  21. 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
  22. 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
  23. 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
  24. 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
  25. 76.
  26. 77.

    ALT NO ALT FIREFOX EMPTY NOT EMPTY OTHER BROWSERS SAFARI

    TEXT FITS TEXT DOESN'T FIT NO TEXT TEXT
  27. 78.

    ALT NO ALT FIREFOX EMPTY NOT EMPTY NO TEXT TEXT

    Firefox OTHER BROWSERS SAFARI TEXT FITS TEXT DOESN'T FIT
  28. 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
  29. 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
  30. 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
  31. 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
  32. 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
  33. 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
  34. 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
  35. 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
  36. 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
  37. 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
  38. 90.

    NO ALT IMAGE IS BLOCKED SRC IE CHROME Safari XP

    7 8-10 X ON WINDOWS ONLY WIDTH ONLY HEIGHT
  39. 91.

    NO ALT IMAGE IS BLOCKED SRC IE CHROME Safari XP

    7 8-10 X ON WINDOWS ONLY WIDTH ONLY HEIGHT Safari
  40. 92.

    NO ALT IMAGE IS BLOCKED SRC IE CHROME Safari XP

    7 8-10 X ON WINDOWS ONLY WIDTH ONLY HEIGHT Safari
  41. 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;
  42. 108.
  43. 109.
  44. 110.
  45. 111.
  46. 112.
  47. 123.

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

    content: attr(alt); background: #cacaca; } Lorem ipsum Lorem ipsum
  48. 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
  49. 129.