How to prevent the collapse of society by building an accessible web

Slide 1

Slide 1 text

Salma Alam-Naylor @whitep4nth3r HOW TO PREVENT THE COLLAPSE OF SOCIETY BY BUILDING AN ACCESSIBLE WEB.

Slide 2

Slide 2 text

@whitep4nth3r https://whitep4nth3r.com HI FRIENDS, I’M SALMA. I help developers build stuff, learn things, and love what they do.

Slide 3

Slide 3 text

I believe that life on Earth is at an ever- increasing risk of being wiped out by a disaster, such as a sudden nuclear war, a genetically engineered virus, or other dangers. Stephen Hawking

Slide 4

Slide 4 text

IT’S 2031.

Slide 5

Slide 5 text

The apocalypse has arrived.

Slide 6

Slide 6 text

The internet is running on a slow 3G connection.

Slide 7

Slide 7 text

Display screens are broken. The internet is running on a slow 3G connection.

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

Accessibility on the web is paramount to the survival of the human race.

Slide 10

Slide 10 text

How do we prepare the web for the apocalypse of 2031?

Slide 11

Slide 11 text

And why is this important, now? How do we prepare the web for the apocalypse of 2031?

Slide 12

Slide 12 text

ACCESSIBILITY FOR SLOW CONNECTIONS.

Slide 13

Slide 13 text

Websites 100% There are almost 2 billion websites in the world*. *https://www.internetlivestats.com/total-number-of-websites

Slide 14

Slide 14 text

JS 95% No JS 5% There are almost 2 billion websites in the world*. 95% of those websites use JavaScript**. *https://www.internetlivestats.com/total-number-of-websites **https://w3techs.com/technologies/details/cp-javascript

Slide 15

Slide 15 text

Why is this bad news for the apocalypse?

Slide 16

Slide 16 text

https://mobile.twitter.com/home

Slide 17

Slide 17 text

https://mobile.twitter.com/home 37 JavaScript (1.44MB) 27 JSON/other 9 image ﬁles

Slide 18

Slide 18 text

https://mobile.twitter.com/home

Slide 19

Slide 19 text

https://mobile.twitter.com/home 5.8 seconds

Slide 20

Slide 20 text

https://mobile.twitter.com/home

Slide 21

Slide 21 text

That’s a lot of requests for JavaScript.

Slide 22

Slide 22 text

That’s a lot of requests for JavaScript. And they’re pretty expensive.

Slide 23

Slide 23 text

And they’re pretty expensive. It takes time to load.

Slide 24

Slide 24 text

It takes time to load. Plus, it might fail.

Slide 25

Slide 25 text

https://twitter.com/philhawksworth/status/990890920672456707

Slide 26

Slide 26 text

https://twitter.com/philhawksworth/status/990890920672456707 156 million failed requests for JavaScript each year — for BuzzFeed alone.

Slide 27

Slide 27 text

https://twitter.com/philhawksworth/status/990890920672456707 156 million failed requests for JavaScript each year — for BuzzFeed alone. That’s potentially 2.964e+16 or 29,640,000,000,000,000,000 failed JavaScript requests on the web each year.

Slide 28

Slide 28 text

https://twitter.com/philhawksworth/status/990890920672456707 (Based on %age of all websites that use JS, assuming all websites have the same traffic as BuzzFeed 🙈) That’s potentially 2.964e+16 or 29,640,000,000,000,000,000 failed JavaScript requests on the web each year. 156 million failed requests for JavaScript each year — for BuzzFeed alone.

Slide 29

Slide 29 text

In the apocalypse, time-to-interactive is the difference between life and death.

Slide 30

Slide 30 text

In the apocalypse, time-to-interactive is the difference between life and death. How can we serve critical content faster?

Slide 31

Slide 31 text

Do we abandon JavaScript?

Slide 32

Slide 32 text

https://jamstack.org/what-is-jamstack/

Slide 33

Slide 33 text

https://jamstack.org/what-is-jamstack/

Slide 34

Slide 34 text

BUT

Slide 35

Slide 35 text

Does modern Jamstack really solve this problem? BUT

Slide 36

Slide 36 text

https://whitep4nth3r.com/ https://whitep4nth3r.com/

Slide 37

Slide 37 text

https://whitep4nth3r.com/ https://whitep4nth3r.com/ > 30 JavaScript ﬁles

Slide 38

Slide 38 text

https://whitep4nth3r.com/ https://whitep4nth3r.com/ HTML document

Slide 39

Slide 39 text

BUT

Slide 40

Slide 40 text

Why do we need all this JavaScript when the document has already loaded? BUT

Slide 41

Slide 41 text

Why do we need all this JavaScript when the document has already loaded? Let’s turn off JavaScript.

Slide 42

Slide 42 text

https://whitep4nth3r.com/

Slide 43

Slide 43 text

https://whitep4nth3r.com/

Slide 44

Slide 44 text

https://whitep4nth3r.com/ It still works!

Slide 45

Slide 45 text

https://whitep4nth3r.com/ 🚫 JavaScript Disabled ✅ JavaScript Enabled

Slide 46

Slide 46 text

https://whitep4nth3r.com/ 🚫 JavaScript Disabled ✅ JavaScript Enabled

Slide 47

Slide 47 text

https://whitep4nth3r.com/ 🚫 JavaScript Disabled ✅ JavaScript Enabled

Slide 48

Slide 48 text

https://whitep4nth3r.com/ 🚫 JavaScript Disabled ✅ JavaScript Enabled

Slide 49

Slide 49 text

https://whitep4nth3r.com/ 🚫 JavaScript Disabled ✅ JavaScript Enabled

Slide 50

Slide 50 text

https://whitep4nth3r.com/ 🚫 JavaScript Disabled ✅ JavaScript Enabled 300KB 1.4MB

Slide 51

Slide 51 text

https://whitep4nth3r.com/ 🚫 JavaScript Disabled ✅ JavaScript Enabled 781KB 3.6MB UNCOMPRESSED?

Slide 52

Slide 52 text

https://whitep4nth3r.com/ 🚫 JavaScript Disabled ✅ JavaScript Enabled 781KB 3.6MB UNCOMPRESSED? 🤯

Slide 53

Slide 53 text

I did an experiment.

Slide 54

Slide 54 text

🚫 JavaScript Disabled

Slide 55

Slide 55 text

https://csr-vs-ssg.netlify.app/ssg/page 🚫 JavaScript Disabled Statically Generated 105KB 4.72s

Slide 56

Slide 56 text

https://csr-vs-ssg.netlify.app/ssg/page 🚫 JavaScript Disabled https://csr-vs-ssg.netlify.app/csr/page Statically Generated 105KB 4.72s Client-Side Rendered 92.7KB 4.59s

Slide 57

Slide 57 text

https://csr-vs-ssg.netlify.app/ssg/page 🚫 JavaScript Disabled https://csr-vs-ssg.netlify.app/csr/page Statically Generated 105KB 4.72s Client-Side Rendered 92.7KB 4.59s 🚨 NO CONTENT 🚨

Slide 58

Slide 58 text

https://csr-vs-ssg.netlify.app/ssg/page 🚫 JavaScript Disabled https://csr-vs-ssg.netlify.app/csr/page https://static-html-page.netlify.app Statically Generated 105KB 4.72s Client-Side Rendered 92.7KB 4.59s No framework 100KB 4.71s 🚨 NO CONTENT 🚨

Slide 59

Slide 59 text

https://csr-vs-ssg.netlify.app/ssg/page 🚫 JavaScript Disabled https://static-html-page.netlify.app Statically Generated 105KB 4.72s No framework 100KB 4.71s

Slide 60

Slide 60 text

https://csr-vs-ssg.netlify.app/ssg/page 🚫 JavaScript Disabled https://static-html-page.netlify.app Statically Generated 105KB 4.72s No framework 100KB 4.71s

Slide 61

Slide 61 text

https://csr-vs-ssg.netlify.app/ssg/page 🚫 JavaScript Disabled https://static-html-page.netlify.app Statically Generated 105KB 4.72s No framework 100KB 4.71s

Slide 62

Slide 62 text

These Jamstack frameworks are pretty good.

Slide 63

Slide 63 text

But always use your judgement.

Slide 64

Slide 64 text

Accessibility for slow connections?

Slide 65

Slide 65 text

Websites must work without JavaScript in the apocalypse.

Slide 66

Slide 66 text

Websites must work without JavaScript in the apocalypse. Decrease load time.

Slide 67

Slide 67 text

Websites must work without JavaScript in the apocalypse. Decrease load time. Decrease page weight.

Slide 68

Slide 68 text

There is no progressive enhancement in the apocalypse.

Slide 69

Slide 69 text

ACCESSIBILITY FOR BROKEN SCREENS.

Slide 70

Slide 70 text

Screens are broken.

Slide 71

Slide 71 text

You can’t see fancy website designs and animations anymore.

Slide 72

Slide 72 text

Websites 100% There are almost 2 billion websites in the world*. *https://www.internetlivestats.com/total-number-of-websites

Slide 73

Slide 73 text

CSS 96% No CSS 4% There are almost 2 billion websites in the world*. 96% of those websites use CSS**. *https://www.internetlivestats.com/total-number-of-websites **https://w3techs.com/technologies/overview/site_element

Slide 74

Slide 74 text

Why is this bad news for the apocalypse?

Slide 75

Slide 75 text

https://developers.google.com/web/fundamentals/performance/ critical-rendering-path/render-blocking-css

Slide 76

Slide 76 text

https://developers.google.com/web/fundamentals/performance/ critical-rendering-path/render-blocking-css

Slide 77

Slide 77 text

https://developers.google.com/web/fundamentals/performance/ critical-rendering-path/render-blocking-css

Slide 78

Slide 78 text

In the apocalypse, time-to-interactive is the difference between life and death.

Slide 79

Slide 79 text

In the apocalypse, time-to-interactive is the difference between life and death. How can we serve critical content faster?

Slide 80

Slide 80 text

Do we abandon CSS?

Slide 81

Slide 81 text

Go big or go home.

Slide 82

Slide 82 text

Go big small or go home die.

Slide 83

Slide 83 text

Let’s make the static html page as small as possible. Go big small or go home die.

Slide 84

Slide 84 text

Remove CSS and class names. Go big small or go home die.

Slide 85

Slide 85 text

Go big small or go home die. Remove CSS and class names.

Slide 86

Slide 86 text

Remove all CSS and class names Go big small or go home die.

Slide 87

Slide 87 text

Remove font imports. Go big small or go home die.

Slide 88

Slide 88 text

Go big small or go home die. Remove font imports.

Slide 89

Slide 89 text

Go big small or go home die. Remove font imports.

Slide 90

Slide 90 text

Remove SVGs. Go big small or go home die.

Slide 91

Slide 91 text

Remove SVGs. Go big small or go home die. < JavaScript <

Slide 92

Slide 92 text

Remove SVGs. Go big small or go home die. < JavaScript <

Slide 93

Slide 93 text

Remove SVGs. Go big small or go home die. JavaScript <

Slide 94

Slide 94 text

Go big small or go home die. Remove SVGs. And optimise! View all JavaScript articles <

Slide 95

Slide 95 text

Replace favicon with a sneaky 0KB favicon. Go big small or go home die.

Slide 96

Slide 96 text

Go big small or go home die. Replace favicon with a sneaky 0KB favicon. https://base64-to-image.com/

Slide 97

Slide 97 text

Replace favicon with a sneaky 0KB favicon. Go big small or go home die.

Slide 98

Slide 98 text

Replace favicon with a sneaky 0KB favicon. Go big small or go home die.

Slide 99

Slide 99 text

https://static-html-page-no-css.netlify.app Go big small or go home die.

Slide 100

Slide 100 text

http://motherfuckingwebsite.com/ https://static-html-page-no-css.netlify.app Go big small or go home die.

Slide 101

Slide 101 text

http://motherfuckingwebsite.com/ https://static-html-page-no-css.netlify.app Go big small or go home die. LIGHWEIGHT RESPONSIVE IT JUST WORKS

Slide 102

Slide 102 text

No framework 100KB 4.71s No CSS 4.6KB 2.10s https://static-html-page.netlify.app https://static-html-page-no-css.netlify.app Go big small or go home die.

Slide 103

Slide 103 text

No framework 100KB 4.71s No CSS 4.6KB 2.10s https://static-html-page.netlify.app https://static-html-page-no-css.netlify.app Go big small or go home die.

Slide 104

Slide 104 text

Go big small or go home die.

Slide 105

Slide 105 text

In 2021, WebAIM surveyed 1 million home pages for a11y*. *https://webaim.org/projects/million/

Slide 106

Slide 106 text

In 2021, WebAIM surveyed 1 million home pages for a11y*. Across the 1 million home pages, 51,379,694 distinct a11y errors were detected. *https://webaim.org/projects/million/

Slide 107

Slide 107 text

In 2021, WebAIM surveyed 1 million home pages for a11y*. Across the 1 million home pages, 51,379,694 distinct a11y errors were detected. *https://webaim.org/projects/million/ That’s an average of 51.4 errors per page.

Slide 108

Slide 108 text

What’s going wrong?

Slide 109

Slide 109 text

Most common WCAG* 2 failures (Feb 2021) *Web Content Accessibility Guidelines 2 WCAG FAILURE TYPE % OF HOME PAGES CAUSED BY Low contrast text 86.4 Missing alternative text for images 60.6 Missing form input labels 54.4 Empty links 51.3 Missing document language attribute 28.9 Empty buttons 26.9

Slide 110

Slide 110 text

WCAG FAILURE TYPE % OF HOME PAGES CAUSED BY Low contrast text 86.4 Missing alternative text for images 60.6 Missing form input labels 54.4 Empty links 51.3 Missing document language attribute 28.9 Empty buttons 26.9 Most common WCAG* 2 failures (Feb 2021) *Web Content Accessibility Guidelines 2

Slide 111

Slide 111 text

WCAG FAILURE TYPE % OF HOME PAGES CAUSED BY Low contrast text 86.4 CSS Missing alternative text for images 60.6 Missing form input labels 54.4 Empty links 51.3 Missing document language attribute 28.9 Empty buttons 26.9 Most common WCAG* 2 failures (Feb 2021) *Web Content Accessibility Guidelines 2

Slide 112

Slide 112 text

https://youtube.com

Slide 113

Slide 113 text

https://youtube.com

Slide 114

Slide 114 text

https://youtube.com

Slide 115

Slide 115 text

https://youtube.com

Slide 116

Slide 116 text

*https://chrome.google.com/webstore/detail/colour-contrast-checker/nmmjeclfkgjdomacpcﬂgdkgpphpmnfe https://youtube.com

Slide 117

Slide 117 text

*https://chrome.google.com/webstore/detail/colour-contrast-checker/nmmjeclfkgjdomacpcﬂgdkgpphpmnfe https://youtube.com

Slide 118

Slide 118 text

No CSS. No problems!

Slide 119

Slide 119 text

Most common WCAG* 2 failures (Feb 2021) *Web Content Accessibility Guidelines 2 WCAG FAILURE TYPE % OF HOME PAGES CAUSED BY Low contrast text 86.4 CSS Missing alternative text for images 60.6 Missing form input labels 54.4 Empty links 51.3 Missing document language attribute 28.9 Empty buttons 26.9

Slide 120

Slide 120 text

Most common WCAG* 2 failures (Feb 2021) *Web Content Accessibility Guidelines 2 WCAG FAILURE TYPE % OF HOME PAGES CAUSED BY Low contrast text 86.4 CSS Missing alternative text for images 60.6 HTML Missing form input labels 54.4 Empty links 51.3 Missing document language attribute 28.9 Empty buttons 26.9

Slide 121

Slide 121 text

https://www.aliexpress.com/index.html

Slide 122

Slide 122 text

https://www.aliexpress.com/index.html

Slide 123

Slide 123 text

< <

https://www.aliexpress.com/index.html

Slide 124

Slide 124 text

< <

https://www.aliexpress.com/index.html

Slide 125

Slide 125 text

If it’s hidden, it doesn’t matter!

Slide 126

Slide 126 text

If it’s hidden, it doesn’t matter!

Slide 127

Slide 127 text

Whenever you think about hiding something from any audience, better ask yourself whether this is really a good solution. accessibility-developer-guide.com https://www.accessibility-developer-guide.com/examples/sensible-aria-usage/hidden/

Slide 128

Slide 128 text

Most of the time it is better to create a solution that works the same way for everybody, and which does not need any shaky ARIA. accessibility-developer-guide.com https://www.accessibility-developer-guide.com/examples/sensible-aria-usage/hidden/ Whenever you think about hiding something from any audience, better ask yourself whether this is really a good solution.

Slide 129

Slide 129 text

The ﬁx:

Slide 130

Slide 130 text

The ﬁx:

This is a great image description!”
height=

Slide 131

Slide 131 text

Most common WCAG* 2 failures (Feb 2021) *Web Content Accessibility Guidelines 2 WCAG FAILURE TYPE % OF HOME PAGES CAUSED BY Low contrast text 86.4 CSS Missing alternative text for images 60.6 HTML Missing form input labels 54.4 Empty links 51.3 Missing document language attribute 28.9 Empty buttons 26.9

Slide 132

Slide 132 text

Most common WCAG* 2 failures (Feb 2021) *Web Content Accessibility Guidelines 2 WCAG FAILURE TYPE % OF HOME PAGES CAUSED BY Low contrast text 86.4 CSS Missing alternative text for images 60.6 HTML Missing form input labels 54.4 HTML Empty links 51.3 Missing document language attribute 28.9 Empty buttons 26.9

Slide 133

Slide 133 text

No content

Slide 134

Slide 134 text

No content

Slide 135

Slide 135 text

No content

Slide 136

Slide 136 text

https://alexlakatos.com/404

Slide 137

Slide 137 text

https://alexlakatos.com/404

Slide 138

Slide 138 text

https://alexlakatos.com/404

Slide 139

Slide 139 text

https://alexlakatos.com/404

Slide 140

Slide 140 text

https://alexlakatos.com/404

Slide 141

Slide 141 text

Did the page really need a form?

Slide 142

Slide 142 text

https://alexlakatos.com/404

Slide 143

Slide 143 text

https://alexlakatos.com/404 underscore new line forward slash space underscore space backslash space underscore underscore underscore underscore space underscore space underscore underscore underscore…

Slide 144

Slide 144 text

The ﬁx:

Slide 145

Slide 145 text

https://alexlakatos.com/404

Slide 146

Slide 146 text

https://alexlakatos.com/404

Slide 147

Slide 147 text

Fancy.

Slide 148

Slide 148 text

Functional. Fancy.

Slide 149

Slide 149 text

Let’s talk about placeholders.

Slide 150

Slide 150 text

Placeholders are not labels. Let’s talk about placeholders.

Slide 151

Slide 151 text

The placeholder attribute speciﬁes a short hint that describes the expected value of an input ﬁeld (e.g. a sample value or a short description of the expected format). w3schools.com https://www.w3schools.com/TAGS/att_input_placeholder.asp

Slide 152

Slide 152 text

https://www.aliexpress.com/index.html

Slide 153

Slide 153 text

https://www.aliexpress.com/index.html

Slide 154

Slide 154 text

Without a label, that placeholder is meaningless.

Slide 155

Slide 155 text

A good form input:

Slide 156

Slide 156 text

A good form input: First name<

Slide 157

Slide 157 text

Most common WCAG* 2 failures (Feb 2021) *Web Content Accessibility Guidelines 2 WCAG FAILURE TYPE % OF HOME PAGES CAUSED BY Low contrast text 86.4 CSS Missing alternative text for images 60.6 HTML Missing form input labels 54.4 HTML Empty links 51.3 Missing document language attribute 28.9 Empty buttons 26.9

Slide 158

Slide 158 text

Most common WCAG* 2 failures (Feb 2021) *Web Content Accessibility Guidelines 2 WCAG FAILURE TYPE % OF HOME PAGES CAUSED BY Low contrast text 86.4 CSS Missing alternative text for images 60.6 HTML Missing form input labels 54.4 HTML Empty links 51.3 HTML Missing document language attribute 28.9 Empty buttons 26.9

Slide 159

Slide 159 text

https://www.aliexpress.com/index.html

Slide 160

Slide 160 text

https://www.aliexpress.com/index.html

Slide 161

Slide 161 text

https://www.aliexpress.com/index.html

Slide 162

Slide 162 text

https://www.aliexpress.com/index.html

Slide 163

Slide 163 text

What will happen if I click on this link?

Slide 164

Slide 164 text

What will happen if I click on this link? 🤷

Slide 165

Slide 165 text

And it’s not just empty links that are problematic.

Slide 166

Slide 166 text

https://www.aliexpress.com/index.html

Slide 167

Slide 167 text

https://www.aliexpress.com/index.html

Slide 168

Slide 168 text

https://www.aliexpress.com/index.html

Slide 169

Slide 169 text

https://www.aliexpress.com/index.html 0< <

Slide 170

Slide 170 text

https://www.aliexpress.com/index.html 0< <

Slide 171

Slide 171 text

https://www.aliexpress.com/index.html 0< <

Slide 172

Slide 172 text

https://www.aliexpress.com/index.html

Slide 173

Slide 173 text

What even is this?

Slide 174

Slide 174 text

The ﬁx:

Slide 175

Slide 175 text

The ﬁx: 0< <

Slide 176

Slide 176 text

Most common WCAG* 2 failures (Feb 2021) *Web Content Accessibility Guidelines 2 WCAG FAILURE TYPE % OF HOME PAGES CAUSED BY Low contrast text 86.4 CSS Missing alternative text for images 60.6 HTML Missing form input labels 54.4 HTML Empty links 51.3 HTML Missing document language attribute 28.9 Empty buttons 26.9

Slide 177

Slide 177 text

Most common WCAG* 2 failures (Feb 2021) *Web Content Accessibility Guidelines 2 WCAG FAILURE TYPE % OF HOME PAGES CAUSED BY Low contrast text 86.4 CSS Missing alternative text for images 60.6 HTML Missing form input labels 54.4 HTML Empty links 51.3 HTML Missing document language attribute 28.9 HTML Empty buttons 26.9

Slide 178

Slide 178 text

In the example of a screen reader, the synthesizer needs to know which language the content is in order to pronounce the output correctly. Otherwise, it will be hard to understand, even if you know the other language. accessibility-developer-guide.com https://www.accessibility-developer-guide.com/examples/html_boilerplate/

Slide 179

Slide 179 text

https://www.aliexpress.com/index.html

Slide 180

Slide 180 text

https://www.aliexpress.com/index.html

Slide 181

Slide 181 text

https://www.aliexpress.com/index.html

Slide 182

Slide 182 text

The ﬁx:

Slide 183

Slide 183 text

The ﬁx:

Slide 184

Slide 184 text

Most common WCAG* 2 failures (Feb 2021) *Web Content Accessibility Guidelines 2 WCAG FAILURE TYPE % OF HOME PAGES CAUSED BY Low contrast text 86.4 CSS Missing alternative text for images 60.6 HTML Missing form input labels 54.4 HTML Empty links 51.3 HTML Missing document language 28.9 HTML Empty buttons 26.9

Slide 185

Slide 185 text

Most common WCAG* 2 failures (Feb 2021) *Web Content Accessibility Guidelines 2 WCAG FAILURE TYPE % OF HOME PAGES CAUSED BY Low contrast text 86.4 CSS Missing alternative text for images 60.6 HTML Missing form input labels 54.4 HTML Empty links 51.3 HTML Missing document language 28.9 HTML Empty buttons 26.9 HTML

Slide 186

Slide 186 text

Most common WCAG* 2 failures (Feb 2021) *Web Content Accessibility Guidelines 2 WCAG FAILURE TYPE % OF HOME PAGES CAUSED BY Low contrast text 86.4 CSS Missing alternative text for images 60.6 HTML Missing form input labels 54.4 HTML Empty links 51.3 HTML Missing document language 28.9 HTML Empty buttons 26.9 HTML + CSS

Slide 187

Slide 187 text

https://www.aliexpress.com/index.html

Slide 188

Slide 188 text

https://www.aliexpress.com/index.html

Slide 189

Slide 189 text

< https://www.aliexpress.com/index.html

Slide 190

Slide 190 text

< https://www.aliexpress.com/index.html .next-icon-add:before { content: " "; }

Slide 191

Slide 191 text

< https://www.aliexpress.com/index.html .next-icon-add:before { content: "+"; }

Slide 192

Slide 192 text

https://www.aliexpress.com/index.html

Slide 193

Slide 193 text

No content

Slide 194

Slide 194 text

The ﬁx:

Slide 195

Slide 195 text

The ﬁx: + <

Slide 196

Slide 196 text

Most common WCAG* 2 failures (Feb 2021) *Web Content Accessibility Guidelines 2 WCAG FAILURE TYPE % OF HOME PAGES CAUSED BY Low contrast text 86.4 CSS Missing alternative text for images 60.6 HTML Missing form input labels 54.4 HTML Empty links 51.3 HTML Missing document language 28.9 HTML Empty buttons 26.9 HTML + CSS

Slide 197

Slide 197 text

Accessibility for broken screens?

Slide 198

Slide 198 text

Don’t fake content with CSS.

Slide 199

Slide 199 text

Don’t fake content with CSS. Use semantic HTML.

Slide 200

Slide 200 text

Don’t fake content with CSS. Use semantic HTML. If the web is unusable in the apocalypse —

Slide 201

Slide 201 text

Everyone dies.

Slide 202

Slide 202 text

WHY IS ALL OF THIS IMPORTANT, NOW?

Slide 203

Slide 203 text

Let’s recap.

Slide 204

Slide 204 text

How do we prepare the web for the apocalypse of 2031?

Slide 205

Slide 205 text

Start with semantic HTML.

Slide 206

Slide 206 text

Use minimal CSS. Start with semantic HTML.

Slide 207

Slide 207 text

Use as little JavaScript as possible. Use minimal CSS. Start with semantic HTML.

Slide 208

Slide 208 text

And why is this important, now?

Slide 209

Slide 209 text

Worldwide, the internet is slow.

Slide 210

Slide 210 text

https://worldpopulationreview.com/country-rankings/internet-speeds-by-country 55.13Mbs

Slide 211

Slide 211 text

export const Slow3GConditions = { title: Common.UIString.UIString("Slow 3G"), download: 500 * 1024 / 8 * 0.8, upload: 500 * 1024 / 8 * 0.8, latency: 400 * 5, }; Chromium Dev Tools Slow 3G 55.13Mbs

Slide 212

Slide 212 text

55.13Mbs 51.2Mbs export const Slow3GConditions = { title: Common.UIString.UIString("Slow 3G"), download: 500 * 1024 / 8 * 0.8, upload: 500 * 1024 / 8 * 0.8, latency: 400 * 5, }; Chromium Dev Tools Slow 3G

Slide 213

Slide 213 text

55.13Mbs ≈ 51.2Mbs

Slide 214

Slide 214 text

Globally, at least 2.2 billion people have a near or distance vision impairment. https://www.who.int/news-room/fact-sheets/detail/blindness-and-visual-impairment

Slide 215

Slide 215 text

And not all users of screen readers have vision impairments. https://webaim.org/projects/screenreadersurvey7/#disabilitytypes (2017)

Slide 216

Slide 216 text

https://webaim.org/projects/screenreadersurvey7/#disabilitytypes (2017)

Slide 217

Slide 217 text

https://webaim.org/projects/screenreadersurvey7/#disabilitytypes (2017)

Slide 218

Slide 218 text

Google now uses Core Web Vitals as a ranking factor in search results*. *https://web.dev/performance-scoring/ — roll-out from mid-June 2021

Slide 219

Slide 219 text

Largest Contentful Paint Core Web Vitals

Slide 220

Slide 220 text

Largest Contentful Paint How quickly does the page render? Core Web Vitals

Slide 221

Slide 221 text

Largest Contentful Paint First Input Delay Core Web Vitals

Slide 222

Slide 222 text

First Input Delay How quickly does the page respond to user input? Largest Contentful Paint Core Web Vitals

Slide 223

Slide 223 text

First Input Delay Cumulative Layout Shift Core Web Vitals Largest Contentful Paint

Slide 224

Slide 224 text

Cumulative Layout Shift How stable is the page layout? First Input Delay Core Web Vitals Largest Contentful Paint

Slide 225

Slide 225 text

Cumulative Layout Shift Largest Contentful Paint First Input Delay Core Web Vitals

Slide 226

Slide 226 text

Cumulative Layout Shift Largest Contentful Paint First Input Delay Core Web Vitals

Slide 227

Slide 227 text

Cumulative Layout Shift Largest Contentful Paint First Input Delay Core Web Vitals Get content to your users as fast as possible.

Slide 228

Slide 228 text

Core Web Vitals Get content to your users as fast as possible. Make your web application usable as soon as possible. Cumulative Layout Shift Largest Contentful Paint First Input Delay

Slide 229

Slide 229 text

Core Web Vitals Get content to your users as fast as possible. Make your web application usable as soon as possible. Make your web application as stable as possible. Cumulative Layout Shift Largest Contentful Paint First Input Delay

Slide 230

Slide 230 text

Or risk being forgotten in the apocalypse.

Slide 231

Slide 231 text

Photo by Brian McGowan on Unsplash

Slide 232

Slide 232 text

Billions of people use the internet on a slow connection.

Slide 233

Slide 233 text

Millions of people use the internet via a screen reader. Billions of people use the internet on a slow connection.

Slide 234

Slide 234 text

Millions of people use the internet via a screen reader. Billions of people use the internet on a slow connection. People won’t ﬁnd your website if it’s not performant or accessible.