Anyone should be able to use your website; whether they are blind, deaf, or just have a broken arm. Inclusive design accounts for all of these; it’s a method of thinking that works to provide a more meaningful experience for your entire audience, no matter whom or where they are. We’ll walk through a brief introduction to accessibility, why accessibility matters, and the code changes required to be accessibility compliant. Participants will also get a chance to interact with leading accessibility tools and gain first-hand experience of what it is like to use a screen reader, magnifier, and other assistive devices that have a significant impact on how users interact with websites.

1. “Our hope is that by building more
accessible products, we can make a
meaningful difference in the lives of
people around the world.”
Google

2. “Amazon’s vision is to be Earth’s
most customer-centric company,
and that includes customers
with disabilities”
Amazon

3. “Technology is most powerful
when it empowers everyone.”
Apple

4. “We design to embrace the things that
make us human. It’s what drives us to
create a world that makes lives better.
The result is technology that’s inclusive.”
Microsoft

6. Intro to Accessibility
MilwaukeeJS
September 25, 2018

7. National Federation of the
Blind versus Target
Landmark accessibility case
Challenged whether Americans with
Disabilities Act applied to websites or just
physical locations
2006

8. American Council of the Blind
versus Staples
Staples had six months to apply priority one
and two checkpoints of WCAG 1.0
Modern equivalent would be WCAG 2.0 AA,
which most companies strive for
2009

9. National Association for the
Deaf versus Netflix
Netflix violated Title III of ADA by not providing
closed captioning
Netflix agreed to make “good faith, diligent
efforts" ensure compatibility on most devices
but is not obligated to get it 100% device
compatible
Had to provide captions on all new content
2012

10. Ashley Cwikla versus Bank
of America
Bank of America Credit Card Rewards
redemption was hard to complete for visually
impaired individuals
BoA had to meet WCAG Level AA standards and
conduct internal training for customer service
staff to assist with visually impaired clients
2015

11. Confidential Plaintiff versus
Kmart, McDonalds, GrubHub
Confidential plaintiff and terms
The cases were filed early 2017 and settled
within weeks
2017

12. Marial Mendizabal versus
Burger King
Latest high profile accessibility case
Case is expected to go to court soon
Claimant seeks a permanent injunction for
Burger King to ensure its website accessibility
2018

13. In 2017, plaintiffs filed at least 814
federal lawsuits about allegedly
inaccessible websites.

14. In the first half of 2018, plaintiffs filed
at least 1,000 federal lawsuits about
allegedly inaccessible websites.

15. In 2018, this number is expected to
grow to more than 2,000.

16. Retail and eCommerce lawsuits grew
significantly in 2017, joining healthcare
and financial accessibility lawsuits.

17. 156lawsuits in july
! Business Services
Retail and Consumer Products
Restaurants and Food Manufacturing
Healthcare
Hotels
Government
Banking and Financial
Real Estate
Automotive and Transportation
"
Other
#
$
%
&
'
(
)
*

18. ! Business Services
Retail and Consumer Products
Restaurants and Food Manufacturing
Healthcare
Hotels
Government
Banking and Financial
Real Estate
Automotive and Transportation
"
Other
#
$
%
&
'
(
)
*
35
34
26
23
12
7
7
3
3
3

19. Even if you are not in danger of being
sued, you should strive to be
accessibility compliant.

20. 92% People with disabilities
who use the internet

21. 91% People with disabilities
who use a mobile
phone or tablet

22. 1 in 5 people have a legal officially
recognized permanent disability.

23. Examples of Legal Disabilities
Holding Phone and Tapping: Missing Limb
Remembering: Alzheimers, Dementia
Reading and Seeing: Blindness, Vision Loss
Hearing: Deaf

25. Anyone can have a
temporary impairment.

26. Examples of Temporary Impairments
Holding Phone and Tapping: Broken or injured limb
Remembering: Concussions and temporary memory loss
Reading and Seeing: Eye surgeries, Cataracts, temporary vision loss
Hearing: Ear infections, tinnitus (ear ringing)

28. Situations can impact every
user’s experience.

29. Examples of Situational Impact
Holding Phone and Tapping: Holding an object, like a bag or laptop
Remembering: Distracted by other people, really focused on their goal
Reading and Seeing: Sunny day, glare
Hearing: Wearing headphones, loud environment

30. Example from Microsoft inclusive design

31. Microsoft
We design to embrace the things
that make us human. It’s what drives
us to create a world that makes
lives better. The result is technology
that’s inclusive.”

32. Accessibility Guidelines

33. Who makes the rules?
Web Accessibility Initiative (WAI) of World Wide Web Consortium (W3C)
Guidelines for inclusive design
Influence accessibility and disability law
Both website and mobile apps
Perceivable, Operable, Understandable, Robust (POUR)

34. “Information and user interface
components must be
presentable to users in ways
they can perceive”

35. Perceivable
Users can find all the info they need
Text and images should be readable
Media has a sound alternative
Color isn’t used to solely convey info

36. Perceivable
Make sure everything is readable
Aim for higher color contrast
Use readable fonts

40. “User interface components
and navigation must be
operable.”

41. Operable
Users need to be able to get to (and from) all non-decorative elements on the
screen
Information should be organized in a way that’s easy to understand
Additional plugins can interfere with assistive devices

42. Operable
Design for a variety of contexts
Watch out for keyboard traps
Build a hierarchy

46. “Information and the
operation of user interface
must be understandable.”

47. Understandable
Users should be able to understand how your app works
Can understand what the info means
Messaging is consistent without using overwhelming jargon

48. Understandable
Don’t use overly complex language
Label everything
Provide forgiveness

52. Forgiveness
Help in entering inputs Guided tips to the user 404s and 501s should
provide direction

54. Layout
Rely on layout conventions (top nav, menu placements, etc)
Android and iOS default SDKs have accessibility in mind
Consistency between screen sizes and mediums is not a requirement
Important elements positioned prior to the screen break

56. “Content must be robust
enough that it can be interpreted
reliably by a wide variety of user
agents, including assistive
technologies.”

57. Robust
Users can access your app through a variety of ways
Taps and touches
Voice assistants (Siri, Alexa, Cortana)
Screen readers
Resizing

58. Robust
Make sure screen readers can use your design
Look out for slowness or performance issues
Responsive
User shouldn’t be able to easily break your website/app/product

59. Screen readers
Android: TalkBack, iOS: VoiceOver
Avoid unnecessary sounds
Multiple ways to navigate screens with a screen reader
May use screen reader by itself or with other assistive technology

60. + Perceivable
, Operable
- Understandable
. Robust
POUR
to remember
accessibility

61. What are the WCAG levels?
A: Lowest level. These are easier to implement, have a high impact on the overall
population
AA: High impact, but a lower portion of the population
AAA: Focused improvements for specific users

62. Level A Examples (not a complete list)
• Include text alternatives for media
• Provide captions for videos with audio
• Avoid jargon
• Don’t rely solely on color to give information (think error messages)
• Label form fields
• Use a meaningful header structure
• No major code errors

63. Level AA Examples (not a complete list)
• Everything in A
• Color contrast of 4.5:1
• Text can be zoomed to 200% and still be able to use website
• Suggest alternatives when users run into errors
• Keyboard focus is clear
• I can tab forward and back through website

64. Level AAA Examples (not a complete list)
• Everything in A, AA
• Videos have a sign language alternative
• Contrast ratio is 7:1
• No images of text
• All Abbreviations and unusual words are explained
• No timeouts
• Provide detailed help and instructions

65. Which level is right for me?
For most companies new to accessibility, I recommend the following:
• Get everything done you can reasonably accomplish in your budget and
timeframe
• You should be able to meet all Level A criteria at a minimum
• Parts of Level AA can be accomplished fairly easily as your team learns and grows
• Look for Level AA compliance over time and aspects of Level AAA that are easier
for your team to implement

66. Which level is right for me?
Exceptions:
• You or your direct competitors are facing a lawsuit
• You’re about to undertake a large redesign or refactoring and can include
compliance
• Your company is willing to make a larger investment now to save some time later
on

67. How can I get started?
/ Critical Path
0 Full Audit
1 Triage
2 Educate and Train
3 Build into Dev Cycle

68. Accessibility Demos

69. Demos
• Screen Readers
• WAVE
• Sim Daltonism
• Red Stripe

73. Red Stripe

74. Questions?
Ashley Dzick
Principal UX Consultant
adzick@safenetconsulting.com
@ashleydzick
Get in Touch!