A talk about how and why universal design is a better approach than traditional accessibility. Given as a keynote at UXCamp Copenhagen 2016. http://uxcampcph.org

1. Universal design:
Make one design
that fits everyone
Joakim Bording
UX Camp CPH 2016

2. Joakim
Bording
Interaction designer,
frontend developer and
universal design enthusiast
@spispeas

3. A content-driven digital
design agency

4. 25
million
passengers
per year

5. Won prices
both for
accessibility
AND
good design

6. Webdagene
20–21.
October
in Oslo

7. «Universal design»

10. Simple

11. Frustrating

12. Impossible

13. Impossible
Frustrating
Simple
Drink espresso
Drink water
Drink coffee

15. Impairment vs. Disability

16. «Impairment»
is what makes your body
different or damaged

17. «Disability»
is what happens when your
body encounters an obstacle
it can not solve

21. How disabled you are
varies from situation to
situation.
impairment + context = disability

22. Disabled

23. Bad designer

24. We make our users
disabled if we do not
design for their needs.

26. – new ICT solutions should be
universally designed from 1
July 2014. Existing ICT
solutions should be universally
designed from 2021.
The Norwegian Agency for Public Management
and eGovernment (Difi)

27. Requirement:
The Web Content
Accessibility Guidelines
(WCAG) 2.0 level AA
An international standard from W3C

28. – The requirements are
relevant for private
businesses, organisations,
and government agencies.
The Norwegian Agency for Public
Management and eGovernment (Difi)

29. It’s illegal to discriminate
the visitors of your website
on the grounds of
accessibility

30. – Never has so many debated
so much about such a
narrow field that so many
people think deals with so
few
@ahenrichsen (my translation)

31. What happens
if you don’t
comply?

32. You might get
daily fines from
the state

33. We want to use it in branding

34. Ok, shure!

36. Foto: @MarcoPexxaniEU
✍Twitter:
#eudisability

37. The current proposal from EU
is to set WCAG 2.0 AA as
requirement for public sector
websites, and important
privat sectors like
transportation and banking…
Disclaimer: My own interpretation of lawyer-speech

38. WCAG 2.0 is
not the topic of
this talk

41. – One out of seven
has some form of
disability
World Health Organization

42. Seniors

43. Perception
Movement
Cognition
Permanent Temporary Contextual

44. Visually impaired Broken screenCan’t find my glasses
Parkinson Broken arm The buss is shaking
Dyslexia Foreign languageDrunk
Perception
Movement
Cognition
Temporary Contextual

45. – Accessibility is not binary,
all-or-nothing, black and
white. We have every shade
of grey in between.
Derek Featherstone - simplyaccessible.com

46. I we want to design
for humans we
have to accept
variation

48. – Design for extremes. The
middle will take care of
itself.
Dan Formosa

49. Accessibility
has branding
problem

53. «Universal design»
the design of products and environments to be
usable by all people, to the greatest extent possible,
without the need for adaptation or specialized
design

56. So how may
we solve this
problem with
universal
design?

57. Make one design
that fits everyone

58. Suddenly accessibility
becomes a design
problem!

60. I’ll give you 4 tips
to start with

61. Spoil your
users with
high contrast
1

64. Which happens
to be at the WCAG 2.0
recommendations for
contrast (4.5:1)
This is as far as
I can read

67. Shorthand for the
lightest color to use
#777

68. ✍Google:
«contrast
ratio»

69. ✍Google:
«colorable
matrix»

70. Play it safe
with text
alternatives
2

71. iPhone anyone?
Test the screenreader
VoiceOver by enabling
it in the settings

72. BUT DO NOT DO IT NOW!!
100 Siri’s talking at once will be a nightmare…

73. Hello world
Hello link world

74. image A grumpy cat

75. button 9

76. We asked 3602
people «Do you
know what this
icon means?»
In a survey conducted in 2014 for Posten
Norge, a Nordic mail and logistic group

77. Knew what the
icon means
27%

78. – The three lines up in the
corner? That’s the logo.
Quote from usertest

79. There are many
abilities we take
for granted in a
user

81. MENU
Always use a
label on your
hamburger

82. Become a
member
MedlemsfordelerSign up now
Foto: flic.kr/p/bJxmpP

83. Book him now
Foto: flic.kr/p/bJxmpP
Go on a date
with Bob

84. Write short and
informative
textalternatives for
relevant pictures

85. ✍Google:
«tota11y»

86. Test all the
bells and
whistles with
the keyboard
3

88. Some times keyboard
navigation is the
simplest way to
navigate

89. 1. Lazy users
2. Expert-users
3. Users with a broken mouse
4. Users with limited movement
5. Blind and visually impaired users
A large number of your
users use the keyboard
for navigation

90. Foto: Flickr - yum9me

91. This Monday you
are not allowed to
use a mouse or a
trackpad
Chrome is recommended

92. TEST IT!

93. Define some
tasks you want to test on
your site and complete
them using the keyboard

94. 1. Du you see where you are and what you do?
2. Can you do everything you want?
3. After interaction: Is the focus where you expect it to?
4. Is there a lot of repeating content on the site?
Four things to test

95. Login
Order ticket
Contact us
Login

96. Login
Order ticket
Contact us

97. Never do this

99. Login
Order ticket
Contact us

100. HTML is accessible
by default. Keep it
that way.

101. Respect your
links or go
home
4

102. Now, one of the peculiar
characteristics of the
savage in his domestic
hours, is his wonderful
patience of industry.
Now, one of the peculiar
characteristics of the
savage in his domestic
hours, is his wonderful
patience of industry.

103. Now, one of the peculiar
characteristics of the
savage in his domestic
hours, is his wonderful
patience of industry.
Now, one of the peculiar
characteristics of the
savage in his domestic
hours, is his wonderful
patience of industry.

104. Follow the link to download

105. Click here to enter

106. Read more

107. Turn the wheel
More road

108. Use the linktext to
inform the user where
the link is pointing

111. On the next slide:
Find a link that leads to
experiments

114. Now you know 4 things
about accessibility
1.High contrast
2.Text alternatives
3.Keyboard navigation
4.Linktext
✍Google:
«webaim»
for more

115. Do I need to
learn all this as
well???
User testing, analytics, prototyping, content,
SEO, graphical design, marketing, information
architecture, technical specifications, branding,
project management, emotional design, HTML,
CSS, JavaScript, coffee brewing, social media,
SASS, BEM, content marketing, inbound
marketing, ReactJS, animations, workshop
management, app development, illustrations…

116. UX Frontend Design Content
We need an
accessibility
guy!

117. So my role is
to fix your
mistakes?
UX Frontend Design Content Accessi

118. Universal design is
a perspective that
all contributors
should apply in
their work
That is the only road to really good solutions

119. – When you say accessibility is
slowing your development down.
It’s not because of accessibility.
It’s because you are learning a
new skill.
Derek Featherstone

120. MAKE STUFF
THAT WORKS

122. Make one design
that fits everyone✍

123. Impossible
Frustrating
Simple

125. Thanks!
@spispeas
joakim@netliferesearch.com