An introduction to designing for accessibility. For designers, product managers and business analysts. Understand the need for accessibility and cover off some accessibility basics.

1. Beginners Guide
to Accessibility
For Digital Product Teams

2. Howdy
I’m Rick Dzekman
We’re here to talk about
Accessibility & Design
You can find me on Twitter
@rickdzekman
2

3. 1.
Why Accessibility
Matters
Real world consequences

4. “If you want to make your UI
so user-friendly that anyone
can use it, then everyone
should be able to use it
4

5. 5
“But the building's facade
doesn't look as good with a
wheelchair ramp”
- Some horrible person
“We can't have a handrail in
the stairwell, it would make it
look ugly”
- Another horrible person
https://commons.wikimedia.org/wiki/File:SSF_Main_
Library_wheelchair_ramp_1.JPG
https://commons.wikimedia.org/wiki/File:Orange_sta
irwell._(2610265332).jpg
Imagine a real world analogy...

6. Australians with Serious Disability
6
Domain
% of Australian who “have a lot of
difficulty” or cannot perform tasks with
Seeing 0.9%
Hearing 1.6%
Walking or climbing stairs 4.1%
Remembering or concentrating 1.6%
Self care 0.9%
Communication 0.6%
Source: Supplementary Disability Survey, 2016

7. 18.3%Of Australians reported having a disability
7
Source: Disability, Ageing and Carers, Australia: First Results, 2015

8. Beyond Disability
▪ Vision Impairment - including
▫ Colour Blindness, Myopia/Hyperopia, Eye-strain
▪ Cognitive Impairment
▫ Head injury, Autism, Developmental Disabilities,
ADHD, Dyslexia
▪ Motor or dexterity impairment
▫ Paralysis, Cerebral Palsy, Dyspraxia, Carpal Tunnel
▪ Hearing-related disabilities
▫ Deafness, Hard of hearing, or Hyperacusis.
8

9. My Personal Take on Accessibility
▪ I experience eye strain – I browse the web at 150% zoom
▪ My dad is inexperienced with technology – he can
struggle working out what is clickable
▪ My mum needs glasses to read the screen – small or low
contrast text is very problematic
▪ My cousin has RSI so using a mouse can be painful – he
prefers keyboard navigation
9

10. Accessibility needs
can be temporary or
even situational
Source: Microsoft Inclusive Toolkit

11. Beyond Impairments
● Digital Literacy
○ Old age
○ Inexperience
○ Culture
● Economic Accessibility
○ Cost of technology
○ Availability of Access
11

12. 2.
Legal Implications
IMPORTANT: I AM NOT A LAWYER

13. Legal Implications are Secondary
We OUGHT to pursue accessibility for the purposes
outlined in the previous section
To be pragmatic this section covers some basic
legal implications
REPEAT: I AM NOT A LAWYER
13

14. No EXPLICIT Legal Requirement
Australian law does not currently mandate any
accessibility requirements for non-government
organisations
14

15. Disability Discrimination
However, Australian law does mandate that
businesses do not discriminate against people with
disabilities, leaving the option open for legal
challenges by a disabled individual
15

16. No Certification Exists
There are no entities in Australia that are able to
legally certify a website or application as being
accessible
Organisations that provide accessibility consulting
are not backed with any regulatory or legal
framework for their services^
16 ^ This does not mean they aren’t worth engaging

17. Case: Sydney Olympics Website (1999)
“The HREOC's ruling set a precedent that creating a
website intended for use by and to inform the
general public, where such a website is more
accessible to a sighted user than the same intent
and information is not available for a user who is
blind by virtue of disability” [Applies to
Commonwealth Government Websites]
17
Source: A Cautionary Tale of Inaccessibility

18. Case: Coles Website (2015)
“The settlement follows the mutual agreement of
the parties to make further improvements to the
Coles website in respect of accessibility
enhancements suggested by Ms Mesnage”
18
Source: Settlement of Federal Court Proceedings

19. Case (USA): Hobby Lobby (2017)
“U.S. District Court for the Central District of
California denied Hobby Lobby’s motion to dismiss
a website accessibility lawsuit … decision further
calls into question the precedential value of the
Central District of California’s recent outlier holding
… which provided businesses with hope that the
tide of recent decisions might turn in their favor”
19
Source: U.S. District Court for the Central District of California denied Hobby Lobby’s motion

20. 3.
Core Principles
To more accessible design

21. You Have to Want It
▪ You need empathy for those with accessibility
needs
▪ Be the change you want to see
▪ Don’t let your design be compromised by poor
accessibility
21

22. Team EffortHaving accessible apps and websites requires
designers, developers, and product owners,
all working together
22

23. Your Design Should Be...
Simple
Structured
Consistent
Intuitive
Redundant
23
These are obvious
What does this mean?

24. Bad
Highlighting important
information with only an icon
Redundancy Example #1
Good
Important information is
highlighted with text as well
24

25. Bad
Only using colour to
differentiate a link
Redundancy Example #2
Good
Using both colour and underline
to differentiate a link
25

26. Bad
Only colour is used to convey an
error in the form
Redundancy Example #3
Good
Error is shown with text, colour,
and an icon
26

27. Why redundancy?
Most accessibility problems come from making
incorrect assumptions. E.g. assuming users...
▪ Can see
▪ Can tell the difference between red and green
▪ Understand internet conventions
▪ Are able to concentrate or focus
▪ Can hear the sound in the video
27

28. Avoid Hiding Content
28
If content is important don’t hide it. If it’s not
important why is it on the page? Hiding content
behind a click or a hover should be avoided.

29. Hiding Content has Interaction Costs
When you hide content behind a hover or click you
risk breaking the accessibility of a page. This is
especially true of hover.
Is there a way to avoid hiding content? Is there a
way to provide a summary of hidden content?
29

30. 4.
Starting Points
Important things to consider in design

31. Colour Contrast
31

32. Colour Contrast
This text is low contrast
32
This would be
bad but the font
size makes up
for it
This is better
This is obviously
going to be
better
Check your contrast online: http://webaim.org/resources/contrastchecker/

33. Text Over Pictures?
Generally a bad idea
33
HOW’S MY
CONTRAST?
HOW ABOUT
MINE?
If your design allows text over a picture
you run the risk of content managers
creating accessibility problems.
Better to create an overlay instead

34. Disabled Buttons
34
The WCAG standard is not infallible. This is a case
where I disagree.
According to the WCAG
standard on contrast:
“Text or images of text that are part of
an inactive user interface component...
have no contrast requirement.”

35. Colourblind Friendly Design
35

36. 36
Normal Vision Deuteranopia
Protanopia Tritanopia
Types of Colour Blindness
Source: Types of Colourblindness (Note: there are other rarer types of colour blindness)
Did you know?
Worldwide 8% of men
and 0.5% of women
have a colour vision
deficiency

37. 37
What parts of this page are clickable?

38. 38
How about now?

39. 39
Form Errors
▪ Form errors are definitely an area where you
should not use colour alone
▪ Use text and icons to further highlight errors
While we’re at it...
▪ Errors should tell users how to fix problems!

40. Keyboard Focus & Tab Order
40

41. 41
Highlight Every Button and Link
▪ Keyboard users can use TAB to move between
links and other actionable elements
▪ When the keyboard has focus on an element
the user can press enter to perform an action
(e.g. go to the URL of the link)
▪ The element that is in focus should have a
highlight around it that is clearly distinguishable
from the background

42. 42
In both Sydney Morning Herald and News.com.au
● Most hyperlinks get an outline when they have
keyboard focus
● Except the social media icons - e.g. Facebook
icon only shows a focus outline on SMH

43. 43
Tab Order and DOM Order
▪ Stick to the default tab order in the DOM -
playing with tab order is problematic
▪ Normally we read left-to-right, but sometimes
secondary content appears on the left
▫ In this case the content that needs to be
read first should appear first in the DOM
▫ Position it to the left with appropriate floats
and flex values

44. Touch Friendly
44

45. Touch Area
45
▪ Ensure a large enough touch area on all clickable
items - especially links
▪ W3C recommends touch target sizes on screen
of at least: 9mm x 9mm
▪ Think about how this is impacted when many
hyperlinks are close together?
▪ Imagine what it’s like if precise motor control is
hard for the user

46. Zoom - Desktop and Mobile
46

47. Responsive Zoom on Desktop
47
▪ Most responsive is designed so that the page
adjusts when resizing the browser
▪ This should work identically when users zoom in
to the page
▪ This tends to break if all measurements are
done in precise pixel values - instead of using
em or rem values

48. Don’t Disable Zoom on Mobile
48
▪ Many developers are putting in <meta> tags
that prevent users from zooming
▪ Users with eyesight difficulties should be able to
pinch zoom on mobile devices

49. Images
49

50. Images and “alt text”
50
If an image adds meaning to content then it needs
to be given a textual representation. This is useful
not only for screen readers but also for SEO.
This needs to be done either as an alt tag or a
caption on the image^ (using the <figure> and
<figcaption> elements).
^See: Techniques for providing useful text alternatives from w3

51. 51
● The alt text on the image says “Amazon Echo” but this is
exactly the same as the heading
● This alt text should describe what the product is like, e.g.
“The Amazon Echo is a small dark cylinder with a speaker”

52. Visual Hierarchy
52

53. Primary Heading (H1)
Secondary heading (H2)
Tertiary Heading (H3)
Body copy text
53
It is important to have a clear visual hierarchy, both
with page structure and with vertical rhythm
Users with cognitive impairment will find well
structured pages easier to follow
Site Header
Page Header
Body

54. 54
Up-ending page structure with
highly visual elements can
negatively impact users with
cognitive impairment. This may
force them to lose their place on the
page and become confused.
This is especially bad with
animations (e.g. carousels, or things
that remain in motion on screen)
Site Header
Page Header
Body
Aside
Stand-
out
Aside
Footer

55. Affordances^
55
^ Well according to Don Norman (who introduced the term to UX) we’ll actually
be talking about signifiers; but most people continue to use affordance

56. 56
Smashing Magazine
Home Page Article Page
This article
heading is a link!
Clicking the link
goes to this
page
While the other links
are blue and the
buttons are raised!
These pages
also look
identical until
here

57. 57
Appearing Clickable/Tappable
▪ Links and buttons must have the affordance of
being clicked or tapped
▪ Do not use the same style on non-clickable
decorative items as you would on clickable ones

58. “
Clickable UI elements with absent or weak
visual signifiers condition users over time
to click and hover uncertainly across
pages — reducing efficiency and
increasing reliance on contextual cues and
immediate click feedback. Young adult
users may be better at perceiving subtle
clickability clues, but they don’t enjoy click
uncertainty any more than other age
groups.
58
Long-Term Exposure to Flat Design
Kate Mayer - Nielsen Norman Group

59. ▪ Flat UI is likely here to stay
▪ While it’s not a WCAG accessibility issue, it does
predominantly affect older users
▪ We can try to augment flat UI by including other
signifiers (e.g. shadows, icons)
At the very least we need consistency about what
is and what is not clickable
59
On Flat UI

60. Icons & Labels
60

61. “
A user’s understanding of an icon is based
on previous experience. Due to the
absence of a standard usage for most
icons, text labels are necessary to
communicate the meaning and reduce
ambiguity.
61
Icon Usability
Aurora Harley - Nielsen Norman Group

62. Headers from top 4^ ecommerce sites
62
Login
Search
^ According to alexa.com

63. Universal Icons are Rare
63
▪ According to research from Nielsen Norman
Group: “universal” icons are rare
▪ Search and Home are two of very few icons that
are recognised by almost all people
▪ The odds of your users knowing what you mean
by a specific icon are very low
▪ Consider the ecomm stores in the previous slide
- almost no icons came without a label

64. Icons Without Labels
64
▪ In order to support screen readers extra code is
required when icons have no labels
▪ Labels on icons help both sighted users and
non-sighted users
▪ Even on mobile it’s problematic - it saves space
at the cost of comprehension

65. Icons in Code
If an icon is purely decorative you need to make
sure that screen readers ignore it. For images alt=””
and for icon-fonts use aria-hidden=”true”.
Icons need very little Accessibility work if they are also
accompanied by explanatory labels
For a non-decorative icon with no label, check out
the Font Awesome Accessibility guidelines
65

66. Forms
66

67. Form Accessibility Is a Deep Topic
67
My presentation on “Designing Usable Forms”
contains a mix of design and development
discussion points for form design, including
accessibility
Follow design best practices on form design, e.g.
10 Rules for Efficient Form Design by Nick Babich

68. 5. Practical Exercise
Experiencing Accessibility for yourself

69. Exercise 1 - Keyboard Navigation
▪ Pick a reasonably large ecommerce store
▪ Imagine you have Carpal Tunnel Syndrome
▫ Using a mouse is physically painful
▫ You can click to start focus somewhere but
keep it to a minimum
▪ Find a particular item in the store
▫ Once using navigation, once using search
▪ Add the item to your cart and go to checkout
69

70. Exercise 1 - How did you go?
▪ We would expect that a task like this would
probably be slower using only a keyboard
▪ But it should at least be possible
▪ Were there any problems?
▫ Did you always know where the focus was?
▫ Were there things that were difficult to get
focus on?
▫ Did you complete the task?
70

71. Exercise 2 - Screen Reader
▪ Pick a registration form for a site you know
▪ Use Google Chrome
▫ Install the “Chrome Vox” extension
▪ Load the page with the registration form, then
turn on Vox
▪ Close your eyes or shut off your monitor, and
attempt to fill out the form using only the voice
prompts and your keyboard
71

72. Exercise 2 - How did you go?
▪ Were you able to successfully complete your
task?
▪ Looking at the page afterwards, was there
anything about the page that was not apparent
when using the screen reader?
72

73. 6. Final Thoughts
Things you may not have considered

74. Other Accessibility Tools
▪ Users may browse in “High Contrast Mode”
▪ Users may browse with images disabled
▪ Users may have their browser significantly
zoomed in (e.g. 400%)
▪ Users may be on a very slow internet
connection or old computer
▪ Users may be doing this particular task for the
very first time, or have difficulty learning it
74

75. Accessibility is a Big Topic
▪ Try to get the little things done
▪ Work with Accessibility experts where you can
to expand your knowledge
▪ Use a consulting firm to test your product with
actual users with accessibility needs
75

76. THANKS!
Any questions?
You can find me on Twitter:
@rickdzekman
76