The Great Mess of Alternative Text

by HTeuMeuLeu

Slide 1

Slide 1 text

Litmus Live London, 2017/08/30

Slide 2

Slide 2 text

Rémi Parmentier @HTeuMeuLeu emails.hteumeuleu.com

Slide 3

Slide 3 text

Source : https://twitter.com/ﬂcarneiro/status/568116082835361792

Slide 4

Slide 4 text

THE GREAT MESS OF ALTERNATIVE TEXT MESS

Slide 5

Slide 5 text

What is alternative text? Part I

Slide 6

Slide 6 text

Slide 7

Slide 7 text

ALT ATTRIBUTE IT'S CALLED AN NOT AN ALT TAG

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

Alternative text is for everyone.

Slide 13

Slide 13 text

1. Always have an alt attribute. Golden rules

Slide 14

Slide 14 text

logo gif Image #TeamJIF

Slide 15

Slide 15 text

fourty one ee six thousand ﬁve hundred…

Slide 16

Slide 16 text

Slide 17

Slide 17 text

link shoes

Slide 18

Slide 18 text

link one billion two hundred thirty four million…

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

1. Golden rules 2. Use relevant alternative text.

Slide 21

Slide 21 text

link image 600px wide image

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

link image Turn your images on. Shop AEO.

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

This is not okay.

Slide 26

Slide 26 text

Making emails accessible is our job.

Slide 27

Slide 27 text

How email clients block images Part II

Slide 28

Slide 28 text

How webmails block images Part II

Slide 29

Slide 29 text

Remove the src attribute. Change the src attribute.

Slide 30

Slide 30 text

Change the src attribute. Remove the src attribute.

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

! // Free.fr replaces the src attribute.

Slide 35

Slide 35 text

! // AOL uses a randomly generated attribute.

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

No content

Slide 41

Slide 41 text

No content

Slide 42

Slide 42 text

No content

Slide 43

Slide 43 text

No content

Slide 44

Slide 44 text

The rendering Part III

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

ALTERNATIVE TEXT IS TOTALLY EASY AND INTUITIVE.

Slide 47

Slide 47 text

THE GREAT MESS OF ALTERNATIVE TEXT MESS

Slide 48

Slide 48 text

IMAGE IS BLOCKED

Slide 49

Slide 49 text

IMAGE IS BLOCKED SRC NO SRC

Slide 50

Slide 50 text

IMAGE IS BLOCKED SRC NO SRC IE OTHER BROWSERS

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

No content

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

NO ALT FIREFOX

Slide 64

Slide 64 text

ALT NO ALT FIREFOX

Slide 65

Slide 65 text

ALT NO ALT FIREFOX EMPTY NOT EMPTY

Slide 66

Slide 66 text

ALT NO ALT FIREFOX EMPTY NOT EMPTY SAFARI

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

Lorem ipsum

Slide 69

Slide 69 text

Lorem ipsum dolor sit

Slide 70

Slide 70 text

Slide 71

Slide 71 text

Lorem ipsum

Slide 72

Slide 72 text

Lorem ipsum

Slide 73

Slide 73 text

Lorem ipsum

Slide 74

Slide 74 text

Slide 75

Slide 75 text

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

Slide 76

Slide 76 text

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

Slide 77

Slide 77 text

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

Slide 78

Slide 78 text

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

Slide 79

Slide 79 text

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

Slide 80

Slide 80 text

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

Slide 81

Slide 81 text

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

Slide 82

Slide 82 text

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

Slide 83

Slide 83 text

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

Slide 84

Slide 84 text

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

Slide 85

Slide 85 text

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

Slide 86

Slide 86 text

Slide 87

Slide 87 text

Slide 88

Slide 88 text

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

Slide 89

Slide 89 text

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

Slide 90

Slide 90 text

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

Slide 91

Slide 91 text

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

Slide 92

Slide 92 text

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

Slide 93

Slide 93 text

IT's DIFFERENT IN QUIRKS MODE.

Slide 94

Slide 94 text

CHROME 40 AND BELOW BEHAVE LIKE SAFARI.

Slide 95

Slide 95 text

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

Slide 96

Slide 96 text

Styling Part IV

Slide 97

Slide 97 text

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

Slide 98

Slide 98 text

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

Slide 99

Slide 99 text

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

Slide 100

Slide 100 text

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

Slide 101

Slide 101 text

Slide 102

Slide 102 text

Basic styles

Slide 103

Slide 103 text

Slide 104

Slide 104 text

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

Slide 105

Slide 105 text

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

Slide 106

Slide 106 text

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

Slide 107

Slide 107 text

blocked image in Chrome < 60

Slide 108

Slide 108 text

Shadow DOM

Slide 109

Slide 109 text

No content

Slide 110

Slide 110 text

No content

Slide 111

Slide 111 text

No content

Slide 112

Slide 112 text

No content

Slide 113

Slide 113 text

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

Slide 114

Slide 114 text

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

Slide 115

Slide 115 text

blocked image in Chrome < 60

Slide 116

Slide 116 text

blocked image in Firefox

Slide 117

Slide 117 text

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

Slide 118

Slide 118 text

:before trick

Slide 119

Slide 119 text

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

Slide 120

Slide 120 text

An image is a replaced element.

Slide 121

Slide 121 text

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

Slide 122

Slide 122 text

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

Slide 123

Slide 123 text

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

Slide 124

Slide 124 text

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