Upgrade to Pro — share decks privately, control downloads, hide ads and more …

The Great Mess of Alternative Text

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.

HTeuMeuLeu

August 30, 2017
Tweet

More Decks by HTeuMeuLeu

Other Decks in Technology

Transcript

  1. Litmus Live
    London, 2017/08/30

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  4. THE GREAT MESS
    OF ALTERNATIVE TEXT
    MESS

    View full-size slide

  5. What is
    alternative text?
    Part I

    View full-size slide

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

    View full-size slide

  7. Alternative text
    is for everyone.

    View full-size slide

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

    View full-size slide


  9. logo gif Image #TeamJIF

    View full-size slide


  10. fourty one ee six thousand five hundred…

    View full-size slide




  11. link one billion two hundred thirty four million…

    View full-size slide

  12. 1. Always have an alt attribute.
    Golden rules
    2. Use relevant alternative text.

    View full-size slide

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

    View full-size slide

  14. link image 600px wide image

    View full-size slide

  15. link image Turn your images on. Shop AEO.

    View full-size slide

  16. This is not okay.

    View full-size slide

  17. Making emails
    accessible is our job.

    View full-size slide

  18. How email clients
    block images
    Part II

    View full-size slide

  19. How webmails
    block images
    Part II

    View full-size slide

  20. Remove
    the src attribute.
    Change
    the src attribute.

    View full-size slide

  21. Change
    the src attribute.
    Remove
    the src attribute.

    View full-size slide

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

    View full-size slide


  23. !
    // Gmail, Yahoo and Outlook.com
    // remove the src attribute completely.

    View full-size slide


  24. !
    // Free.fr replaces the src attribute.

    View full-size slide

  25. 196085671d9b__src="foo.jpg" alt="" />
    !
    // AOL uses a randomly generated attribute.

    View full-size slide

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

    View full-size slide

  27. Change
    the src attribute.
    Gmail Outlook.com Yahoo!
    La Poste
    (desktop)
    AOL
    Free
    Remove
    the src attribute.
    Outlook.com
    (old version)
    La Poste
    (mobile)

    View full-size slide


  28. !
    // The old Outlook.com used to
    // replace the value of the src attribute.

    View full-size slide

  29. The rendering
    Part III

    View full-size slide

  30. IMAGE
    IS BLOCKED
    x
    CONTENT OF
    THE ALT
    ATTRIBUTE.
    AN ICON WITH TEXT

    View full-size slide

  31. ALTERNATIVE TEXT
    IS TOTALLY EASY
    AND INTUITIVE.

    View full-size slide

  32. THE GREAT MESS
    OF ALTERNATIVE TEXT
    MESS

    View full-size slide

  33. IMAGE
    IS BLOCKED

    View full-size slide

  34. IMAGE
    IS BLOCKED
    SRC NO SRC

    View full-size slide

  35. IMAGE
    IS BLOCKED
    SRC NO SRC
    IE
    OTHER
    BROWSERS

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  41. 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

    View full-size slide

  42. 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

    View full-size slide

  43. 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

    View full-size slide

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

    View full-size slide

  45. 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

    View full-size slide

  46. 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

    View full-size slide

  47. NO ALT
    FIREFOX

    View full-size slide

  48. ALT
    NO ALT
    FIREFOX

    View full-size slide

  49. ALT
    NO ALT
    FIREFOX EMPTY NOT EMPTY

    View full-size slide

  50. ALT
    NO ALT
    FIREFOX EMPTY NOT EMPTY
    SAFARI

    View full-size slide

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

    View full-size slide

  52. alt="Lorem ipsum" />
    Lorem ipsum

    View full-size slide

  53. alt="Lorem ipsum dolor
    sit" />
    Lorem ipsum dolor sit

    View full-size slide

  54. alt="Lorem ipsum dolor
    sit amet" />

    View full-size slide

  55. alt="Lorem ipsum" />
    Lorem ipsum

    View full-size slide

  56. alt="Lorem ipsum"
    style="font-size:20px"
    />
    Lorem ipsum

    View full-size slide

  57. alt="Lorem ipsum"
    style="font-size:25px"
    />
    Lorem ipsum

    View full-size slide

  58. alt="Lorem ipsum"
    style="font-size:30px"
    />

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  64. 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

    View full-size slide

  65. 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

    View full-size slide

  66. 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

    View full-size slide

  67. 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

    View full-size slide

  68. 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

    View full-size slide

  69. 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

    View full-size slide

  70. 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

    View full-size slide

  71. 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

    View full-size slide

  72. 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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  77. IT's DIFFERENT IN QUIRKS MODE.

    View full-size slide

  78. CHROME 40 AND BELOW BEHAVE LIKE SAFARI.

    View full-size slide

  79. things changed in Chrome 60.
    (that was like two weeks ago.)

    View full-size slide

  80. Styling
    Part IV

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  85. Basic styles

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  88. /* 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;

    View full-size slide

  89. blocked image in Chrome < 60

    View full-size slide

  90. img /deep/ #alttext-image {
    display: none;
    }

    View full-size slide

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

    View full-size slide

  92. blocked image in Chrome < 60

    View full-size slide

  93. blocked image in Firefox

    View full-size slide

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

    View full-size slide

  95. :before trick

    View full-size slide

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

    View full-size slide

  97. An image is a
    replaced element.

    View full-size slide

  98. But a broken or
    blocked image is not.
    (in Chrome and Firefox)

    View full-size slide

  99. img {
    position: relative;
    display: block;
    }
    Lorem ipsum

    View full-size slide

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

    View full-size slide

  101. img {
    position: relative;
    display: block;
    }
    !
    img:before {
    content: attr(alt);
    background: #cacaca;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    }
    Lorem ipsum

    View full-size slide

  102. Support is not good.

    View full-size slide

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

    View full-size slide

  104. EMAILS ARE .
    MESSY

    View full-size slide

  105. THE WEB IS .
    MESSY

    View full-size slide

  106. Thank you !
    @HTeuMeuLeu
    emails.hteumeuleu.com

    View full-size slide