This document summarizes a presentation on designing for accessibility. It discusses the speaker's journey to prioritizing accessibility and an example project making a restaurant website more accessible. Key topics covered include understanding disabilities, compliance with standards like WCAG, designing for barriers like impaired vision or mobility, and ensuring accessibility of text, links, images, forms, and navigation. The presentation emphasizes that accessibility should not hinder creativity and provides takeaways on testing accessibility and accounting for it in design workflows.

1. A restaurant case study on how to
bring accessibility to the forefront
Designing for All
J.D. Busch
@jdbusch02
jdbusch
lifeblue.com

2. What I’ll be talking about today
My journey into accessibility as a designer, and why I’m
passionate about it
What it means to be accessible
Showcase of a recent web project for Boston’s Pizza

3. Just for context
Where I fit in

4. RESEARCH+STRATEGY IDEATION DESIGN+PROTOTYPE IMPLEMENTATION
Just for context
Where I fit in

5. What I’m not
A lawyer
A developer

6. Where I’ve come from
(I promise it matters)

7. 600px.fm

8. 1D

9. 1D

10. 2D thinking
1D 2D

11. Packaging
Understanding execution
1D 2D 3D

12. 3D thinking
1D 2D 3D

13. 1D 2D 3D

14. 1D 2D 3D

15. 1D 2D 3D

16. 1D 2D 3D

17. Back to Digital
1D 2D 3D

18. Back to Digital
1D 2D 3D 4D

19. Empathy
T H E F O U R T H D I M E N S I O N

20. Who was I designing for?

21. Those without
barriers

22. Inclusive by Design
Vision Auditory Dexterity
Mobility LanguageSpeech
Those without barriers of

23. Vision Barriers
Permanent Temporary Situational
Blind from birth Recovering from eye surgery Dealing with screen glare from the sun
Via Microsoft Inclusive design

24. Dexterity Barriers
Permanent Temporary Situational
One arm Broken arm Holding your child
Via Microsoft Inclusive design

25. Inclusive by Design
Inclusive Design

26. Accessibility
Inclusive Design
≠

27. Inclusive Design
Accessibility
starts with

28. Understanding Accessibility
Americans with Disabilities
Act, established 1990, and
went into effect 1991

29. Understanding Accessibility
Americans with Disabilities
Act, established 1990, and
went into effect 1991
Addresses the needs of people
with disabilities, prohibiting
discrimination in employment,
public services,
public accommodations, and
telecommunications

33. How the process works
Drawings created
by a qualified
professional
(Licensed Architect or
Interior Designer)
Hire an Accessibility
Consultant
(optional)
Built to
specification
Inspection by
qualified ADA
inspector
in the physical world

34. How the process works
Website built on a
Squarespace
template
Max enters the
content himself
Built with his needs
in mind
Some users
cannot access
site
on the web
Bonus!
Possible
Lawsuit
Max’s Burger Joint

35. Lawsuits
814
2017
2,258
2018

36. …as companies continue to ignore
their obligation to ensure their
websites and apps are accessible,
there will continue to be more
litigation
essentialaccessibility.com“

37. How should we comply?
WCAG 2.1
ADA Title III (outdated)
Section 508 of the rehabilitation Act of 1973

38. ¯_(ツ)_/¯

39. Most results
Comply with WCAG 2.0, Level AA

42. None of this should matter
No legal document should tell us that we need to
be decent human beings

43. Architecture has this
figured out, right?

49. Considerate
T O B E A C C E S S I B L E I S T O B E
01

50. Lifeblue:
AA compliance is a requirement

52. AAA

54. They said it was impossible

55. They said it was impossible
and they’re right
(pretty much)

56. Some tough ones
interruptions
sign language
audio-only versions
unusual wordsabbreviations
reading level

57. The most accessible website we’ve ever made

58. siteimprove.com results

59. Some caveats
Didn’t have any videos or audio on our site
The online ordering system didn’t fall under our scope

60. What we could have done
Run site audit
Determine weak points
Reskin based on new brand

61. What we did
Establish a baseline digital strategy and goals
Present solutions to meet that strategy
Align with a rebrand
Apply a mobile-first philosophy
Create a dynamic experience
All in context
of an
accessible
experience

62. Seamless
T O B E A C C E S S I B L E I S T O B E
02

68. Accessibility doesn’t have to be
prohibitive of creativity

72. Primary points of emphasis
Text Readability
Buttons and Links
Alt Text
Navigation Using Keyboard
Portraying Interactivity
Forms and Inputs

73. Text Readability

78. Text readability
WCAG 1.4.3 Contrast
The visual presentation of text and images of
text has a contrast ratio of at least 7:1
Large-scale text and images of large-scale
text have a contrast ratio of at least 4.5:1“

79. Text readability
contrast-ratio.com

83. Text readability
Focus on legibility
Bold and vibrant
Design for future and sustainable states

84. #CF0A2C #F2EFDC #000000 #FFFFFF #005496
#A00822 #F2EFDC #231F20 #FFFFFF #00508F

91. Buttons and links

92. Screen Readers

93. Link: Boston’s Pizza and Restaurant
“Link: Menu
“Link: Locations
“Link: Gift Cards
“Link: My (Misspelled) Bostons
“

94. Link: Learn More
“Link: Share
“Link: Learn More, Main
“Link: Learn More
“Select

95. Link: Boston’s Pizza and Restaurant
“Link: Menu
“Link: Locations
“Link: Gift Cards
““You have exited web content
Link: My (Misspelled) Bostons

96. Link: Learn More

97. Link Purpose
WCAG 2.4.4 – Link Purpose (in context)
The purpose of each link can be
determined from the link text
alone or from the link text
together with its
programmatically determined
link context
“

98. Link: Learn more about our fall line-up

99. Alternative Text

100. …

101. Alternative Text
WCAG 1.1 – Non-text Content
All non-text content that is
presented to the user has a text
alternative that serves the
equivalent purpose
“

102. Alternative Text
WCAG 1.4.9 – Images of Text (No Exception)
Images of text are only used for
pure decoration or where a
particular presentation of text is
essential to the information
being conveyed.“

103. People holding beer at a
restaurant.
“

104. Four friends toasting in
celebration while laughing
and having a great time at a
Boston’s restaurant.
“

106. Please insert alternate text

107. Unceasing
T O B E A C C E S S I B L E I S T O B E
03

108. Navigation Using Keyboard

117. 24 tabs or 8 backwards tabs later

119. Navigation Using Keyboard
WCAG 1.4.13 – Content on Hover or Focus
All functionality of the content
is operable through a keyboard
interface without requiring
specific timings for individual
keystrokes.“

120. Brand what is typically left as default

123. Portraying Interactivity

125. Deuteranomaly

126. Protanopia Tritanopia Achromatopsia

128. Use of Color
WCAG 1.4.1 – Use of Color
Color is not used as the only
visual means of conveying
information, indicating an
action, prompting a response,
or distinguishing a visual
element.
“

129. This is a paragraph of text and there
are some links hidden in this body of
text. Can you guess where the links
are? It may be difficult if you have
any kind of vision impairment or
color blindness.

130. This is a paragraph of text and there
are some links hidden in this body of
text. Can you guess where the links
are? It may be difficult if you have
any kind of vision impairment or
color blindness.

131. This is a paragraph of text and there
are some links hidden in this body of
text. Can you guess where the links
are? It may be difficult if you have
any kind of vision impairment or
color blindness.

133. Silhouetting

134. Silhouetting

135. Iconography
Utility Interest/Brand Informational

136. Forms and Inputs

137. Common pitfalls

140. Used label as placeholder

142. Tabbed past error message

143. Focus not shifted to error message

144. Forms and inputs
WCAG 1.3.5 / 1.3.6 – Identify Input Purpose
In content implemented using
markup languages, the purpose
of User Interface Components,
icons, and regions can be
programmatically determined.“

146. Who else can we serve?

147. Other barriers

148. Other barriers
Economics
Geography
Education
Diversity & Background
Age
Page Speed

149. Other barriers
Economics
Geography
Education
Diversity & Background
Age
Content

150. Empathetic
T O B E A C C E S S I B L E I S T O B E
04

151. So what did we learn?

152. Takeaways
Designing for AAA is hard, and possibly impossible, but that
doesn’t make it needless
It’s not about the checkboxes
Continually keep ourselves honest by running tests
Would like to do in-person testing
Little gotchas and rules have become no-brainers, so it’ll
get easier every time
Compensate for areas where concessions are made for
compliance with dynamic layouts

153. How do we create a better, more rigorous
certified standard for the industry?

154. What is our responsibility as designers
and developers?

155. How do we account for time for
accessibility integration into our fees?

156. EmpatheticUnceasing
SeamlessConsiderate

158. Connect with us
J.D. Busch
@jdbusch02
jd@lifeblue.com
jdbusch /mylifeblue
Me
Lifeblue
@lifeblue
@lifebluemedia
lifeblue
www.lifeblue.com

159. Credits and Resources
Section 508: Do Section 508 Accessibility Standards
Apply to My Website?
https://www.section508.gov/blog/do-section-508-
accessibility-standards-apply-to-mywebsite
Supplemental Advance Notice of Proposed
Rulemaking on State and Local Government Web
Accessibility
https://www.ada.gov/regs2016/sanprm.html
Good articles put in layman’s terms, but very long:
https://www.searchenginejournal.com/website-
accessibility-law/285199/#close
https://www.essentialaccessibility.com/blog/web-
accessibility-lawsuits/
Current legal landscape:
https://www.lflegal.com/2016/12/60-minutes/
WCAG 2.1
https://www.w3.org/TR/WCAG21/
Stock photos by:
unsplash.com
For developers – An introduction to Aria
https://developers.google.com/web/fundamentals/accessibi
lity/semantics-aria/
Resources referenced:
Contrast Ratio checker
contrast-ratio.com
NoCoffee Vision Simulator
https://chrome.google.com/webstore/detail/nocoffee/jjeegg
mbnhckmgdhmgdckeigabjfbddl?hl=
Site Improve:
Siteimprove.com
Microsoft Inclusive Design
https://www.microsoft.com/design/inclusive/