Decrease your conversion - common ways to lock people out

Slide 1

Slide 1 text

Decrease your conversion! Common ways to lock people out @stefanjudis

Slide 2

Slide 2 text

Stefan Judis Frontend Developer, Occasional Teacher, Meetup Organizer ❤ Open Source, Performance and Accessibility ❤ @stefanjudis

Slide 3

Slide 3 text

accessibility-club.org

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

CRO team (conversion rate optimization)

Slide 6

Slide 6 text

making an order PERCENT 2-3 COMMON E-COMMERCE CONVERSION RATE

Slide 7

Slide 7 text

TINY IMPROVEMENTS MEAN SOMETHING PERCENT +0.1 A GAZILLION MORE MONEY +$$$

Slide 8

Slide 8 text

WHAT LEADS TO A DECISION? 77% Weather Timing Button color Mood (not based on real data)

Slide 9

Slide 9 text

It's important to optimize!

Slide 10

Slide 10 text

But maybe there is more to consider...

Slide 11

Slide 11 text

11 It's about people

Slide 12

Slide 12 text

12 It's about people FOUNDER PERFORMANCE

Slide 13

Slide 13 text

13 It's about people INCLUSIVE DESIGN FOUNDER PERFORMANCE

Slide 14

Slide 14 text

14 It's about people ACCESSIBILITY FOUNDER INCLUSIVE DESIGN PERFORMANCE

Slide 15

Slide 15 text

Web performance #perfmatters

Slide 16

Slide 16 text

I live in a bubble!

Slide 17

Slide 17 text

Recent MacBook Pro Recent phone with 10 GB EU wide fast data plan

Slide 18

Slide 18 text

Bruce Lawson previously @ Opera Where will your next customer come from?

Slide 19

Slide 19 text

19 731 MILLION CHINA TOP 10 COUNTRIES WITH THE HIGHEST NUMBER OF INTERNET USERS 462 MILLION INDIA 286 MILLION USA 139 MILLION BRAZIL 132 MILLION INDONESIA 118 MILLION JAPAN 104 MILLION RUSSIA 93 MILLION NIGERIA 71 MILLION GERMANY 69 MILLION MEXICO www.internetworldstats.com/top20.htm

Slide 20

Slide 20 text

Finnland France Denmark Great Britian Ireland Italy Spain Germany USA Hungary 0GB 25GB 50GB 75GB 100GB de.statista.com/infograﬁk/6188/4g-im-laendervergleich/ data with 4g for 35€ unlimited 50 40 20 10 8 7 4 2 1

Slide 21

Slide 21 text

whatdoesmysitecost.com

Slide 22

Slide 22 text

1GB for 10€

Slide 23

Slide 23 text

1GB for 10€ 400 times 2.5MB

Slide 24

Slide 24 text

1GB for 10€ 400 times 2.5MB 1 VISIT costs 0.025€

Slide 25

Slide 25 text

Median image transfer size is 800KB httparchive.org/reports/state-of-images#bytesImg

Slide 26

Slide 26 text

TRADITIONAL IMAGE FORMATS GIF JPG PNG SVG

Slide 27

Slide 27 text

Is it a vector graphic? SVG YES GIF PNG JPEG NO

Slide 28

Slide 28 text

Need animation? GIF Need to preserve ﬁne detail, with highest resolution or transparency? Need a large color palette? (+256 colors) PNG-8 PNG-24 JPEG YES NO YES NO YES NO developers.google.com/web/fundamentals/performance/optimizing-content-efﬁciency/image-optimization

Slide 29

Slide 29 text

2000×1038

Slide 30

Slide 30 text

gif 1 Cent 1.4MB

Slide 31

Slide 31 text

png-8 0.9 Cent gif 1 Cent 1.4MB 933KB

Slide 32

Slide 32 text

png-24 3 Cents png-8 0.9 Cent gif 1 Cent 1.4MB 933KB 3.2MB

Slide 33

Slide 33 text

gif 1 Cent 1.4MB jpeg (Q65) 0.4 Cent png-8 0.9 Cent png-24 3 Cents 399KB 3.2MB 933KB

Slide 34

Slide 34 text

EXOTIC IMAGE FORMATS WEBP JPEG 2000 FLIF JPEG XR BPG

Slide 35

Slide 35 text

EXOTIC IMAGE FORMATS WEBP JPEG 2000 FLIF JPEG XR No support No support BPG

Slide 36

Slide 36 text

EXOTIC IMAGE FORMATS WEBP JPEG 2000 FLIF JPEG XR No support No support BPG

Slide 37

Slide 37 text

EXOTIC IMAGE FORMATS WEBP JPEG 2000 FLIF JPEG XR No support No support BPG

Slide 38

Slide 38 text

webp 0.1 Cent 121KB

Slide 39

Slide 39 text

progressive enhancement Some image

www.useragentman.com/blog/2015/01/14/using-webp-jpeg2000-jpegxr-apng-now-with-pictureﬁll-and-modernizr/

Slide 40

Slide 40 text

server side detection RewriteEngine On # Check if browser support WebP images RewriteCond %{HTTP_ACCEPT} image/webp # Check if WebP replacement image exists RewriteCond %{DOCUMENT_ROOT}/$1.webp -f # Serve WebP image instead RewriteRule (.+)\.(jpe?g|png)$ $1.webp [T=image/webp,E=accept:1] Header append Vary Accept env=REDIRECT_accept AddType image/webp .webp images.guide/#-a-id-how-do-i-serve-webp-href-how-do-i-serve-webp-how-do-i-serve-webp-a- .htaccess

Slide 41

Slide 41 text

JPEG ENCODER LIBJPEG MOZJPEG GUETZLI

Slide 42

Slide 42 text

libjpeg 399KB 0.4 Cent guetzli 336KB 0.3 Cent mozjpeg 197KB 0.2 Cent

Slide 43

Slide 43 text

The joy of optimizing by Una Kravets vimeo.com/190871719

Slide 44

Slide 44 text

load images responsively How I learned to love JavaScript Or how I saved some bytes... How I learned to love JavaScript Desktop 21MB (0.21€) Mobile 30MB (0.30€)

Slide 45

Slide 45 text

all png ~3MB (3 Cents)

Slide 46

Slide 46 text

load images responsively Seattle Skyline

Slide 47

Slide 47 text

load images responsively Seattle Skyline

Slide 48

Slide 48 text

all jpeg ~170KB 0.2 Cent

Slide 49

Slide 49 text

gif – 24MB 24 Cents

Slide 50

Slide 50 text

Median video transfer size is 1.9MB httparchive.org/reports/page-weight#bytesVideo

Slide 51

Slide 51 text

No content

Slide 52

Slide 52 text

# $ compress_video caniuse.mp4 caniuse_compressed.mp4 function compress_video() { if ! [ $# -eq 2 ]; then echo "Wrong parameter usage: \n $ compress_video " return 1 fi ffmpeg -i $1 -vcodec h264 -b:v 1000k -acodec mp2 $2 } compress video on the ﬂy

Slide 53

Slide 53 text

mp4 vs. webm

Slide 54

Slide 54 text

progressive enhancement

Slide 55

Slide 55 text

5.2M share-inbox.mp4 5 Cents 1.1M share-inbox_web.mp4 1 Cent 515K share-inbox_web.webm 0.5 Cent compression

Slide 56

Slide 56 text

# $ prepare_video caniuse.mp4 caniuse_compressed function prepare_video() { if ! [ $# -eq 1 ]; then echo "Wrong parameter usage: \n $ compress_video " return 1 fi ffmpeg -i $1 -vcodec h264 -b:v 1000k -acodec mp2 $2.mp4 ffmpeg -i $2.mp4 -strict -2 $2.webm } compress video on the ﬂy github.com/stefanjudis/.dotﬁles/blob/master/functions.zsh#L61-L69

Slide 57

Slide 57 text

Use video responsibly

Slide 58

Slide 58 text

www.webpagetest.org/video/view.php?id=150209_e46843cf0dc768ccc6641e944d3551d05175dd9f use video responsibly

Slide 59

Slide 59 text

What about text?

Slide 60

Slide 60 text

miniﬁcation & compression MINIFY COMPRESS +

Slide 61

Slide 61 text

miniﬁcation & compression 2.4M application-97681b5991.min.js 2 Cents 708K application-97681b5991.min.js.gz 0.7 Cent 526K application-97681b5991.min.js.br 0.5 Cent samsaffron.com/archive/2016/06/15/the-current-state-of-brotli-compression MINIFY COMPRESS + brotli css-tricks.com/brotli-static-compression/

Slide 62

Slide 62 text

HTTP/2 PWA CACHE FONTS RAIL Web Perf is a talk topic on its own SPEED INDEX PRELOAD 60FPS TTI FIRST RENDER

Slide 63

Slide 63 text

Start performance tooling today PERF TOOLING www.perf-tooling.today

Slide 64

Slide 64 text

You're most likely locking people out that: 02 01 03 live in less populated areas are not able to afford expensive plans are on conference wifi ...

Slide 65

Slide 65 text

Una Kravets UI Engineer @ Digital Ocean Information shouldn't be a privilege.

Slide 66

Slide 66 text

Pinterest increased 15% SEO trafﬁc and 15% conversion rate to signup. BBC loses 10% of users for every additional second in load time. The Trainline reduced latency and customers spent an extra ~$11.5 million a year.

Slide 67

Slide 67 text

Get your business use case! WPO stats wpostats.com

Slide 68

Slide 68 text

AMERICANS WITH DISABILITIES 57 million folks.pillpack.com/3335/inclusivity-important-obamas-champion-change/

Slide 69

Slide 69 text

OF DISABLED PEOPLE WILL LEAVE A SITE WHEN DIFFICULT TO USE 71.1% www.clickawaypound.com/cap16ﬁnalreport.html

Slide 70

Slide 70 text

Inclusive design

Slide 71

Slide 71 text

A design methodology that enables and draws on the full range of human diversity.

Slide 72

Slide 72 text

event stories

Slide 73

Slide 73 text

"I can't see if it's muted, but you probably can!" sound engineer (40+ years old) event stories

Slide 74

Slide 74 text

People affected by color blindness PERCENT 8 PERCENT 0.05 of men of women www.colourblindawareness.org/colour-blindness/types-of-colour-blindness/

Slide 75

Slide 75 text

No content

Slide 76

Slide 76 text

Deuteranomaly Deuteranopia

Slide 77

Slide 77 text

Protanomaly Protanopia

Slide 78

Slide 78 text

Tritanomaly Tritanopia

Slide 79

Slide 79 text

Never rely only on color VISIBLE SPECTRUM

Slide 80

Slide 80 text

Never rely only on color VISIBLE SPECTRUM Protanomaly

Slide 81

Slide 81 text

Never rely only on color VISIBLE SPECTRUM Protanopia

Slide 82

Slide 82 text

chrome.google.com/webstore/detail/funkify-disability-simula/ojcijjdchelkddboickefhnbdpeajdjg?hl=en

Slide 83

Slide 83 text

No content

Slide 84

Slide 84 text

No content

Slide 85

Slide 85 text

No content

Slide 86

Slide 86 text

No content

Slide 87

Slide 87 text

No content

Slide 88

Slide 88 text

accessibility tools alphagov.github.io/accessibility-tool-audit/index.html Give them a try!

Slide 89

Slide 89 text

accessibility tools pa11y.org

Slide 90

Slide 90 text

No content

Slide 91

Slide 91 text

No content

Slide 92

Slide 92 text

No content

Slide 93

Slide 93 text

www.marcozehe.de/2018/04/11/introducing-the-accessibility-inspector-in-the-ﬁrefox-developer-tools

Slide 94

Slide 94 text

github.com/getﬂourish/Sketch-Color-Contrast-Analyser

Slide 95

Slide 95 text

jxnblk.com/colorable/demos/matrix/

Slide 96

Slide 96 text

It's less pretty but more people can read my articles!

Slide 97

Slide 97 text

Hmm... Audio from your computer? Not sure that's possible... event stories

Slide 98

Slide 98 text

Don't rely on sound! HEARABLE SPECTRUM VIEW SOURCE 2016

Slide 99

Slide 99 text

HEARABLE SPECTRUM Don't rely on sound!

Slide 100

Slide 100 text

44 x 44 48 x 48 Recommended sizes INTERACTION ELEMENTS developers.google.com/speed/docs/insights/SizeTapTargetsAppropriately developer.apple.com/ios/human-interface-guidelines/visual-design/layout/

Slide 101

Slide 101 text

You're most likely locking people out that: 02 01 03 can't turn on sound sit in the sun light can't pay full attention ...

Slide 102

Slide 102 text

That's the design ¯\_(ツ)_/¯

Slide 103

Slide 103 text

INCLUSIVE A Microsoft Design Toolkit Educate! Collaborate! Be inclusive! www.microsoft.com/en-us/design/inclusive

Slide 104

Slide 104 text

Accessibility according to actual people with disabilities axesslab.com/accessibility-according-to-pwd/

Slide 105

Slide 105 text

AMERICANS WITH VESTIBULAR DISORDERS 69 million https://webkit.org/blog/7551/responsive-design-for-motion/

Slide 106

Slide 106 text

No content

Slide 107

Slide 107 text

VESTIBULAR DISORDER Prefers reduced motion @media (prefers-reduced-motion) { /* adjust motion of 'transition' or 'animation' properties */ } var motionQuery = matchMedia('(prefers-reduced-motion)'); function handleReduceMotionChanged() { if (motionQuery.matches) { /* adjust motion of 'transition' or 'animation' properties */ } else { /* standard motion */ } } motionQuery.addListener(handleReduceMotionChanged); handleReduceMotionChanged(); // trigger once on load if needed drafts.csswg.org/mediaqueries-5/#mf-user-preferences

Slide 108

Slide 108 text

VESTIBULAR DISORDER Prefers reduced motion @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

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

John Maeda Head of Computational Design & Inclusion @ Automattic Inclusive design is not just for good, it's for good business

Slide 114

Slide 114 text

Accessibility #a11y

Slide 115

Slide 115 text

How do you browse the web?

Slide 116

Slide 116 text

No content

Slide 117

Slide 117 text

Common screen readers

Slide 118

Slide 118 text

No content

Slide 119

Slide 119 text

# or errors 2011 # or errors 2017 espn.com 18 238 twitter.com 5 71 huffingtonpost.com 9 123 nytimes.com 58 96 amazon.com 6 76 reddit.com 24 61 yelp.com 3 54 WebAim Alexa 100 accessibility updates webaim.org/blog/alexa-100-accessibility-updates/

Slide 120

Slide 120 text

www.w3.org/TR/WCAG20/

Slide 121

Slide 121 text

No content

Slide 122

Slide 122 text

FOUR PRINCIPLES OF ACCESSIBILITY www.w3.org/TR/UNDERSTANDING-WCAG20/intro.html#introduction-fourprincs-head

Slide 123

Slide 123 text

FOUR PRINCIPLES OF ACCESSIBILITY PERCEIVABLE www.w3.org/TR/UNDERSTANDING-WCAG20/intro.html#introduction-fourprincs-head Users must be able to perceive the information being presented

Slide 124

Slide 124 text

FOUR PRINCIPLES OF ACCESSIBILITY PERCEIVABLE OPERABLE www.w3.org/TR/UNDERSTANDING-WCAG20/intro.html#introduction-fourprincs-head Users must be able to perceive the information being presented Users must be able to operate the interface

Slide 125

Slide 125 text

FOUR PRINCIPLES OF ACCESSIBILITY PERCEIVABLE OPERABLE UNDERSTANDABLE www.w3.org/TR/UNDERSTANDING-WCAG20/intro.html#introduction-fourprincs-head Users must be able to perceive the information being presented Users must be able to operate the interface Users must be able to understand the information and the operation of the user interface.

Slide 126

Slide 126 text

FOUR PRINCIPLES OF ACCESSIBILITY PERCEIVABLE OPERABLE UNDERSTANDABLE ROBUST www.w3.org/TR/UNDERSTANDING-WCAG20/intro.html#introduction-fourprincs-head Users must be able to perceive the information being presented Users must be able to operate the interface Users must be able to understand the information and the operation of the user interface. Users must be able to access the content as technologies advance

Slide 127

Slide 127 text

Semantic markup

Slide 128

Slide 128 text

semantic markup

Slide 129

Slide 129 text

semantic markup

Slide 130

Slide 130 text

semantic markup

Slide 131

Slide 131 text

semantic markup

Slide 132

Slide 132 text

semantic markup

Slide 133

Slide 133 text

semantic markup [ ...document.querySelectorAll( '.zoomBtn' ) ].forEach( event => { this.addEventListener( 'keydown', event => { if ( event.which === 13 ) { // do something with the map } } ); } );

Slide 134

Slide 134 text

semantic markup

Slide 135

Slide 135 text

If you can use the web platform to solve issues – use it.

Slide 136

Slide 136 text

Focus on the right things

Slide 137

Slide 137 text

No content

Slide 138

Slide 138 text

outline matters a:active, a:focus, a:hover { outline: 0; }

Slide 139

Slide 139 text

Never touch the outline! Always think of the outline! outline matters

Slide 140

Slide 140 text

My father is visually impaired and I had to switch him over from Firefox to Chrome just because of this one issue. The dotted line is just too subtle and he deﬁnitely cannot see it. comment on an accessibility article outline matters

Slide 141

Slide 141 text

adrianroselli.com/2017/02/avoid-default-browser-focus-styles.html outline matters

Slide 142

Slide 142 text

outline matters outline on click

Slide 143

Slide 143 text

outline matters .btn:focus:not(:focus-ring) { outline: none; } .btn:focus:not(.focus-ring) { outline: none; } CSS Lv. 4 spec polyﬁll drafts.csswg.org/selectors-4/#the-focusvisible-pseudo github.com/WICG/focus-visible :focus-visible .focus-visible

Slide 144

Slide 144 text

developer.paciellogroup.com/blog/2018/03/focus-visible-and-backwards-compatibility/

Slide 145

Slide 145 text

Focus Ring Visible! A11ycasts #16 by Rob Dodson www.youtube.com/watch?v=ilj2P5-5CjI

Slide 146

Slide 146 text

How hard can it be to build an accessible modal?

Slide 147

Slide 147 text

Rob Dodson Developer Advocate @ Google The modal is the boss battle in accessibility.

Slide 148

Slide 148 text

accessible modal dialog www.w3.org/TR/wai-aria-practices/#dialog_modal 02 01 03 has its own tab sequence closes on escape typically focuses first focusable element when opened 04 returns focuses last focused element when closed

Slide 149

Slide 149 text

No content

Slide 150

Slide 150 text

ally.js by Rodney Rehm allyjs.io

Slide 151

Slide 151 text

How hard can it be to make areas unfocusable? 02 01 03 add tabindex="-1" to needed elements remove controls from audio and video 05 add pointer-events: none add focusable="false" on SVGElement 04 overwrite element.focus() 06 add aria-disabled="true" to inform A11y tree

Slide 152

Slide 152 text

is on its way! (usable with polyﬁll today) html.spec.whatwg.org/multipage/interaction.html#inert-subtrees

github.com/wicg/inert

Slide 153

Slide 153 text

www.w3.org/TR/html52/interactive-elements.html#the-dialog-element

Slide 154

Slide 154 text

Want to delete your account?

Cancel Confirm document.getElementById('favDialog').showModal();

Slide 155

Slide 155 text

Dialog element github.com/GoogleChrome/dialog-polyﬁll polyﬁll

Slide 156

Slide 156 text

Accessible content

Slide 157

Slide 157 text

No content

Slide 158

Slide 158 text

generated content will be detected by assistive technology .middotDivider::after { content: "·"; } .closeBtn::before { content: "✕"; } .starBtn::before, starBtn::after { content: "★"; color: #fff; }

Slide 159

Slide 159 text

Slide 160

Slide 160 text

decorative images

Slide 161

Slide 161 text

decorative images role="presentation"

www.w3.org/TR/wai-aria/roles#presentation

dev.w3.org/html5/spec-preview/the-img-element.html#a-short-phrase-or-label-with-an-alternative...

Slide 162

Slide 162 text

No content

Slide 163

Slide 163 text

Alternative Text by WebAIM webaim.org/techniques/alttext/

Slide 164

Slide 164 text

No content

Slide 165

Slide 165 text

accessible links Check out the project

Slide 166

Slide 166 text

accessible links Check out the project

Slide 167

Slide 167 text

accessible links Check out the project Check out the project

Forrest

Slide 168

Slide 168 text

No content

Slide 169

Slide 169 text

What is an accessible name? by Léonie Watson www.paciellogroup.com/blog/2017/04/what-is-an-accessible-name/

Slide 170

Slide 170 text

Accessible updates

Slide 171

Slide 171 text

No content

Slide 172

Slide 172 text

ARIA live regions role="status"

Published successfully

Slide 173

Slide 173 text

ARIA live regions role="status"

Published successfully

Slide 174

Slide 174 text

ARIA live regions role="status"

Published successfully

Danger danger!

Stefan wrote you!

developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions Info Urgent

Slide 175

Slide 175 text

No content

Slide 176

Slide 176 text

Inclusive Components by Heydon Pickering inclusive-components.design

Slide 177

Slide 177 text

WAI-ARIA Authoring Practices www.w3.org/TR/wai-aria-practices-1.1/

Slide 178

Slide 178 text

Karl Groves Web accessibility consultant @ The Paciello Group I believe that making things accessible should be required because it is the right thing to do.

Slide 179

Slide 179 text

James Williamson Senior Author @ Lynda The biggest misconception about accessibility is that by adding it you're doing someone a favor. You're not, you're doing your job.

Slide 180

Slide 180 text

Norway enforces WCAG 2.0 AA for all new sites since July 2013. uu.diﬁ.no/om-oss/english

Slide 181

Slide 181 text

Austria enforces WCAG 2.0 AA for e-commerce since Dec 2016. www.it-recht-kanzlei.de/barriefrei-oesterreichische-online-shops.html

Slide 182

Slide 182 text

How to Meet WCAG 2.0 www.w3.org/WAI/WCAG20/quickref

Slide 183

Slide 183 text

It's not only about conversion...

Slide 184

Slide 184 text

It's about people

Slide 185

Slide 185 text

Joe Devon Idea giver of Global Accessibility Awareness Day For some people, an accessible internet literally makes a world of difference.

Slide 186

Slide 186 text

Thanks! @stefanjudis Slides ctﬂ.io/decrease-conversion-slides a11y resources ctﬂ.io/decrease-conversion-resources