1.
Accidental Accessibility
Champions.
1
Section title
Chris Gibbons
Senior UX Developer
@_gbbns
Anya Braun
UX Researcher
@ux_lady

2.
We’re going to tell you about:
• How we accidently become the face of
accessibility
• Establishing an inclusive design culture
• What we’ve still got to learn
2
Section title

3.
Auto Trader
3
Section title

4.
4

5.
12th
biggest UK
Page views, ComScore CY2017
website
55mmonthly
585,000
Vehicles listed per day
(average)
4xmore
Auto
searches
than
Google
Engagement compared
with all other portals
COMBINED
2.5x
95
Adviews
per second
140kvehicles
moved with MTD
cross-platform
visits
ComScore –Nov 17
2xmore
influential
for new car
buyers
than nearest
competitor
Annual Car Buying Report 2016

6.
Diversity &
Inclusion
Culture
Section title
6

7.
http://uxinthecity.net/2017/manchester/

8.
8

9.
Are we digitally
inclusive?
Section title
10

10.
Workshops &
Awareness
12

11.
Retinitis
Pigmentosa
13

12.
Arthritis
simulation
gloves
14www.inclusivedesigntoolkit.com

13.
What next?
Section title
15

14.
“But blind people dont
drive cars?”
Section title
16

15.
17
Research
How can we prove
that these users
exist?

16.
19
Unique events per day
50 - 80

17.
20
<a href="#content"
class="tracking-standard-link at-
accessibility-link"
data-label="accessibility-skip-to-
content">
Skip to content
</a>

18.
Lab Study
21
Goal: Observe how users
with different impairments
interact with Auto Trader

19.
5 participants
22
• Visually impaired
• Dyslexic
• ADHD
• Motor Impairment
• Colour Blind

20.
What did
we learn?
23
Recruitment
is key

21.
What did
we learn?
24
Choice
overload

22.
What did
we learn?
25
Colour
Contrast

23.
Design

24.
Re-brand

25.
The colour palette
28
#FFD5D1
255,213,209
pink
#5D7199
93,113,153
blue-light
#FFEBB6
255,235,182
yellow-light
#FF4436
255,68,54
at-red
#313C53
49,60,83
at-blue
#FFC400
255,196,0
yellow
#FE0600
254,6,0
red-dark
#242D3D
36,45,61
blue-dark
#FF9A00
255,154,0
orange
#F7F7F5
247,247,245
grey-light
#86EBE9
134,235,233
aqua-light
#B4EDA0
180,237,160
green-light
#E8E8E3
232,232,227
grey
#00D7D2
0,215,210
at-aqua
#7BD500
123,213,0
green
#D0D0CB
208,208,203
grey-dark
#06A09D
6,160,157
aqua-dark
#3F7600
63,118,0
green-dark

26.
Pattern Library
29

27.
Development
Section title
30

28.
Recurring themes

29.
Missing attributes
32

30.
Missing attributes
33
<img src="https://placekitten.com/g/200/300" />

31.
Missing attributes
34
<img src="https://placekitten.com/g/200/300"
alt="" />

32.
Missing attributes
35
<img src="https://placekitten.com/g/200/300"
alt="Kitten looking confused" />

33.
Missing attributes
36

34.
Missing attributes
37

35.
Anchor tags without href.
38
<li>
<a class="a-class">a link</a>
</li>
<li>
<a class="a-class">a link</a>
</li>

36.
Anchor tags without href.
39
<li>
<a class="a-class"
href="/path-to-url/">a link</a>
</li>
<li>
<a class="a-class"
href="/path-to-url/">a link</a>
</li>

37.
Is it a button or a link?
40
“Something that comes up again and again in
front-end accessibility is the issue
of links versus buttons.
You know, the HTML elements that open links
in new windows or submit forms? ”
https://marcysutton.com/links-vs-buttons-in-modern-web-applications/

38.
:focus
42
/* remember to define focus styles! */
:focus {
outline: 0;
}
http://www.outlinenone.com/

39.
Marking up a things correctly
43
<label>Enter your name:</label>
<input type="text” />

40.
Marking up a things correctly:
44
<label for="name">Enter your name:</label>
<input type="text" name="name" id="name”/>

41.
Testing
Section title
46

42.
Automate all the things
47

43.
Turning CSS off
48

44.
Turning CSS off
49

45.
Keyboard navigation possible?
50

46.
Sass linting
51

47.
The present and future

48.
Careers site

49.
54
Core Pattern Library
“sparkplug”

50.
55

51.
Inclusive
Design
Guild
Section title
56

52.
0.24%!
(approx.)
Section title
57

53.
Training
59
https://eu.udacity.com/course/web-accessibility--ud891

54.
Assistive tech & screen readers
60
https://www.nvaccess.org/

55.
Training
61
- Semantics & web standards
- Validation
- Aria

56.
Pull requests and code reviews
62

57.
Section title
63
- JFDI
- Something
- Something
- Code stuff

58.
So in summary:
- Awareness is important
- Start a guild!
- It’s not easy, or quick
- But it’s rewarding!
64

59.
“The power of the Web is in its
universality. Access by everyone
regardless of disability is an
essential aspect…”
https://www.w3.org/Press/IPO-announce

60.
Section title
66

61.
Thank you.
@_gbbns @ux_lady

62.
Q&A
Section title
68