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/infografik/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 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
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
www.useragentman.com/blog/2015/01/14/using-webp-jpeg2000-jpegxr-apng-now-with-picturefill-and-modernizr/
www.useragentman.com/blog/2015/01/14/using-webp-jpeg2000-jpegxr-apng-now-with-picturefill-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
Slide 47
Slide 47 text
load images responsively
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 fly
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 fly
github.com/stefanjudis/.dotfiles/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
minification & compression
MINIFY COMPRESS
+
Slide 61
Slide 61 text
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/
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 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.
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/cap16finalreport.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-firefox-developer-tools
Slide 94
Slide 94 text
github.com/getflourish/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
Slide 130
Slide 130 text
Slide 131
Slide 131 text
Slide 132
Slide 132 text
Slide 133
Slide 133 text
Slide 134
Slide 134 text
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
definitely 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 polyfill
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 polyfill 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-polyfill
polyfill
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
generated content will
be detected by assistive technology
.middotDivider::after {
content: "·";
}
.closeBtn::before {
content: "✕";
}
.starBtn::before, starBtn::after {
content: "★";
color: #fff;
}
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...
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 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 UrgentSlide 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.difi.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
ctfl.io/decrease-conversion-slides
a11y resources
ctfl.io/decrease-conversion-resources