Decrease your conversion - common ways to lock people out

Transcript

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

2. Stefan Judis Frontend Developer, Occasional Teacher, Meetup Organizer ❤ Open

   Source, Performance and Accessibility ❤ @stefanjudis

3. accessibility-club.org

4. None

5. CRO team (conversion rate optimization)

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

7. TINY IMPROVEMENTS MEAN SOMETHING PERCENT +0.1 A GAZILLION MORE MONEY

   +$$$

8. WHAT LEADS TO A DECISION? 77% Weather Timing Button color

   Mood (not based on real data)

9. It's important to optimize!

10. But maybe there is more to consider...

11. 11 It's about people

12. 12 It's about people FOUNDER PERFORMANCE

13. 13 It's about people INCLUSIVE DESIGN FOUNDER PERFORMANCE

14. 14 It's about people ACCESSIBILITY FOUNDER INCLUSIVE DESIGN PERFORMANCE

15. Web performance #perfmatters

16. I live in a bubble!

17. Recent MacBook Pro Recent phone with 10 GB EU wide

    fast data plan

18. Bruce Lawson previously @ Opera Where will your next customer

    come from?

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

20. Finnland France Denmark Great Britian Ireland Italy Spain Germany USA

    Hungary 0GB 25GB 50GB 75GB 100GB de.statista.com/infografik/6188/4g-im-laendervergleich/ data with 4g for 35€ unlimited 50 40 20 10 8 7 4 2 1

21. whatdoesmysitecost.com

22. 1GB for 10€

23. 1GB for 10€ 400 times 2.5MB

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

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

26. TRADITIONAL IMAGE FORMATS GIF JPG PNG SVG

27. Is it a vector graphic? SVG YES GIF PNG JPEG

    NO

28. Need animation? GIF Need to preserve fine 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-efficiency/image-optimization

29. 2000×1038

30. gif 1 Cent 1.4MB

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

32. png-24 3 Cents png-8 0.9 Cent gif 1 Cent 1.4MB

    933KB 3.2MB

33. gif 1 Cent 1.4MB jpeg (Q65) 0.4 Cent png-8 0.9

    Cent png-24 3 Cents 399KB 3.2MB 933KB

34. EXOTIC IMAGE FORMATS WEBP JPEG 2000 FLIF JPEG XR BPG

35. EXOTIC IMAGE FORMATS WEBP JPEG 2000 FLIF JPEG XR No

    support No support BPG

36. EXOTIC IMAGE FORMATS WEBP JPEG 2000 FLIF JPEG XR No

    support No support BPG

37. EXOTIC IMAGE FORMATS WEBP JPEG 2000 FLIF JPEG XR No

    support No support BPG

38. webp 0.1 Cent 121KB

39. progressive enhancement <picture> <source srcset="https://.../some-image.jxr2" type="image/vnd.ms-photo"> <source srcset="https://.../some-image.jp2" type="image/jp2"> <source

    srcset="https://.../some-image.webp" type="image/webp"> <img src="https://.../some-image.png" alt="Some image"> </picture> www.useragentman.com/blog/2015/01/14/using-webp-jpeg2000-jpegxr-apng-now-with-picturefill-and-modernizr/

40. server side detection <IfModule mod_rewrite.c> 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] </IfModule> <IfModule mod_headers.c> Header append Vary Accept env=REDIRECT_accept </IfModule> 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

41. JPEG ENCODER LIBJPEG MOZJPEG GUETZLI

42. libjpeg 399KB 0.4 Cent guetzli 336KB 0.3 Cent mozjpeg 197KB

    0.2 Cent

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

44. 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€)

45. all png ~3MB (3 Cents)

46. load images responsively <img src="https://.../some-hero-image.jpg" srcset="https://.../some-hero-image-560.jpg 560w, https://.../some-hero-image-800.jpg 800w, https://.../some-hero-image-1920.jpg

    1920w" sizes="100vw" alt="Seattle Skyline">


47. load images responsively <img src="https://.../some-hero-image.jpg" srcset="https://.../some-hero-image.jpg?w=560 560w, https://.../some-hero-image.jpg?w=800 800w, https://.../some-hero-image.jpg?w=1920

    1920w" sizes="100vw" alt="Seattle Skyline">


48. all jpeg ~170KB 0.2 Cent

49. gif – 24MB 24 Cents

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

51. None

52. # $ compress_video caniuse.mp4 caniuse_compressed.mp4 function compress_video() { if !

    [ $# -eq 2 ]; then echo "Wrong parameter usage: \n $ compress_video <inputFile> <outputFile>" return 1 fi ffmpeg -i $1 -vcodec h264 -b:v 1000k -acodec mp2 $2 } compress video on the fly

53. mp4 vs. webm

54. <video autoplay muted loop playsinline preload="metadata"> <source src="https://.../some-video.webm" type="video/webm"> <source

    src="https://.../some-video.mp4" type="video/mp4"> </video> progressive enhancement

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

    0.5 Cent compression

56. # $ prepare_video caniuse.mp4 caniuse_compressed function prepare_video() { if !

    [ $# -eq 1 ]; then echo "Wrong parameter usage: \n $ compress_video <inputFile> <outputFileBase>" 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 fly github.com/stefanjudis/.dotfiles/blob/master/functions.zsh#L61-L69

57. Use video responsibly

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

59. What about text?

60. minification & compression MINIFY COMPRESS +

61. minification & 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/

62. HTTP/2 PWA CACHE FONTS RAIL Web Perf is a talk

    topic on its own SPEED INDEX PRELOAD 60FPS TTI FIRST RENDER

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

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

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

    a privilege.

66. Pinterest increased 15% SEO traffic 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.

67. Get your business use case! WPO stats wpostats.com

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

69. OF DISABLED PEOPLE WILL LEAVE A SITE WHEN DIFFICULT TO

    USE 71.1% www.clickawaypound.com/cap16finalreport.html

70. Inclusive design

71. A design methodology that enables and draws on the full

    range of human diversity.

72. event stories

73. "I can't see if it's muted, but you probably can!"

    sound engineer (40+ years old) event stories

74. People affected by color blindness PERCENT 8 PERCENT 0.05 of

    men of women www.colourblindawareness.org/colour-blindness/types-of-colour-blindness/
75. None

76. Deuteranomaly Deuteranopia

77. Protanomaly Protanopia

78. Tritanomaly Tritanopia

79. Never rely only on color VISIBLE SPECTRUM

80. Never rely only on color VISIBLE SPECTRUM Protanomaly

81. Never rely only on color VISIBLE SPECTRUM Protanopia

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

83. None
84. None
85. None
86. None
87. None

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

89. accessibility tools pa11y.org

90. None
91. None
92. None

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

94. github.com/getflourish/Sketch-Color-Contrast-Analyser

95. jxnblk.com/colorable/demos/matrix/

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

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

    stories

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

99. HEARABLE SPECTRUM Don't rely on sound!

100. 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/

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

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

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

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

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

106. None

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

108. VESTIBULAR DISORDER Prefers reduced motion @media (prefers-reduced-motion: reduce) { *

     { animation: none !important; transition: none !important; } }
109. None
110. None
111. None
112. None

113. John Maeda Head of Computational Design & Inclusion @ Automattic

     Inclusive design is not just for good, it's for good business

114. Accessibility #a11y

115. How do you browse the web?

116. None

117. Common screen readers

118. None

119. # 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/

120. www.w3.org/TR/WCAG20/

121. None

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

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

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

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

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

127. Semantic markup

128. semantic markup

129. <div> <div title="Zoom in" style="/.../"> <div style="/.../"> <img src="https://.../plus-image.png" draggable="false"

     style="/.../"> </div> </div> <div style="/.../"></div> <div title="Zoom out" style="/.../"> <div style="/.../"> <img src="https://.../minus-image.png" draggable="false" style="/.../"> </div> </div> </div> semantic markup

130. <div> <div title="Zoom in" style="/.../" tabindex="-1"> <div style="/.../"> <img src="https://.../plus-image.png"

     draggable="false" style="/.../"> </div> </div> <div style="/.../"></div> <div title="Zoom out" style="/.../" tabindex="-1"> <div style="/.../"> <img src="https://.../minus-image.png" draggable="false" style="/.../"> </div> </div> </div> semantic markup

131. <div> <div title="Zoom in" style="/.../" tabindex="0"> <div style="/.../"> <img src="https://.../plus-image.png"

     draggable="false" style="/.../"> </div> </div> <div style="/.../"></div> <div title="Zoom out" style="/.../" tabindex="0"> <div style="/.../"> <img src="https://.../minus-image.png" draggable="false" style="/.../"> </div> </div> </div> semantic markup

132. <div> <div title="Zoom in" style="/.../" tabindex="0" role="button"> <div style="/.../"> <img

     src="https://.../plus-image.png" draggable="false" style="/.../"> </div> </div> <div style="/.../"></div> <div title="Zoom out" style="/.../" tabindex="0" role="button"> <div style="/.../"> <img src="https://.../minus-image.png" draggable="false" style="/.../"> </div> </div> </div> semantic markup

133. <div> <div class="zoomBtn" title="Zoom in" style="/.../" tabindex="0" role="button"> <div style="/.../">

     <img src="https://.../plus-image.png" draggable="false" style="/.../"> </div> </div> <div style="/.../"></div> <div class="zoomBtn" title="Zoom out" style="/.../" tabindex="0" role="button"> <div style="/.../"> <img src="https://.../minus-image.png" draggable="false" style="/.../"> </div> </div> </div> semantic markup [ ...document.querySelectorAll( '.zoomBtn' ) ].forEach( event => { this.addEventListener( 'keydown', event => { if ( event.which === 13 ) { // do something with the map } } ); } );

134. <div> <button type="button" title="Zoom in" style="/.../"> <div style="/.../"> <img src="https://.../plus-image.png"

     draggable="false" style="/.../"> </div> </button> <div style="/.../"></div> <button type="button" title="Zoom out" style="/.../"> <div style="/.../"> <img src="https://.../minus-image.png" draggable="false" style="/.../"> </div> </button> </div> semantic markup

135. If you can use the web platform to solve issues

     – use it.

136. Focus on the right things

137. None

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

139. Never touch the outline! Always think of the outline! outline

     matters

140. 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 definitely cannot see it. comment on an accessibility article outline matters

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

142. outline matters outline on click

143. outline matters .btn:focus:not(:focus-ring) { outline: none; } .btn:focus:not(.focus-ring) { outline:

     none; } CSS Lv. 4 spec polyfill drafts.csswg.org/selectors-4/#the-focusvisible-pseudo github.com/WICG/focus-visible :focus-visible .focus-visible

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

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

146. How hard can it be to build an accessible modal?

147. Rob Dodson Developer Advocate @ Google The modal is the

     boss battle in accessibility.

148. 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
149. None

150. ally.js by Rodney Rehm allyjs.io

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

152. is on its way! (usable with polyfill today) html.spec.whatwg.org/multipage/interaction.html#inert-subtrees <div

     inert></div> github.com/wicg/inert

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

154. <dialog id="favDialog"> <form method="dialog"> <section> <p>Want to delete your account?</p>

     </section> <menu> <button id="cancel" type="reset">Cancel</button> <button type="submit">Confirm</button> </menu> </form> </dialog> document.getElementById('favDialog').showModal();

155. Dialog element github.com/GoogleChrome/dialog-polyfill polyfill

156. Accessible content

157. None

158. generated content will be detected by assistive technology <span class="middotDivider

     u-fontSize12"></span> .middotDivider::after { content: "·"; } .closeBtn::before { content: "✕"; } .starBtn::before, starBtn::after { content: "★"; color: #fff; }

159. generated content will be detected by assistive technology <span class="middotDivider

     u-fontSize12" aria-hidden="true"></span> .middotDivider::after { content: "·"; } .closeBtn::before { content: "✕"; } .starBtn::before, starBtn::after { content: "★"; color: #fff; }

160. decorative images <img class="progressiveMedia-image js-progressiveMedia-image" src="https://cdn-images-1.medium.com/max/2000/1*- h1bH8gB3I7gPh5AG1HmsQ.png">

161. decorative images role="presentation" <img class="progressiveMedia-image js-progressiveMedia-image" role="presentation" src="https://cdn-images-1.medium.com/max/2000/1*- h1bH8gB3I7gPh5AG1HmsQ.png"> www.w3.org/TR/wai-aria/roles#presentation

     <img class="progressiveMedia-image js-progressiveMedia-image" alt="" src="https://cdn-images-1.medium.com/max/2000/1*- h1bH8gB3I7gPh5AG1HmsQ.png"> dev.w3.org/html5/spec-preview/the-img-element.html#a-short-phrase-or-label-with-an-alternative...
162. None

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

164. None

165. accessible links <a href="https://.../stefanjudis/forrest">Check out the project</a>

166. accessible links <a href="https://.../stefanjudis/forrest" aria-label="Forrest on Github">Check out the project</a>

167. accessible links <a href="https://.../stefanjudis/forrest" aria-label="Forrest on Github">Check out the project</a>

     <a href="https://.../stefanjudis/forrest" aria-labelledby="headline-forrest">Check out the project</a> <h3 class="o-headline-3" id="headline-forrest">Forrest</h3>
168. None

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

170. Accessible updates

171. None

172. ARIA live regions role="status" <p>Published successfully</p>

173. ARIA live regions role="status" <p role="status" aria-live="polite">Published successfully</p>

174. ARIA live regions role="status" <p role="status" aria-live="polite">Published successfully</p> <p role="alert"

     aria-live="assertive">Danger danger!</p> <p role="log" aria-live="polite">Stefan wrote you!</p> developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions Info Urgent
175. None

176. Inclusive Components by Heydon Pickering inclusive-components.design

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

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

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

180. Norway enforces WCAG 2.0 AA for all new sites since

     July 2013. uu.difi.no/om-oss/english

181. Austria enforces WCAG 2.0 AA for e-commerce since Dec 2016.

     www.it-recht-kanzlei.de/barriefrei-oesterreichische-online-shops.html

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

183. It's not only about conversion...

184. It's about people

185. Joe Devon Idea giver of Global Accessibility Awareness Day For

     some people, an accessible internet literally makes a world of difference.

186. Thanks! @stefanjudis Slides ctfl.io/decrease-conversion-slides a11y resources ctfl.io/decrease-conversion-resources