1. Beautifully
Accessible
Levi McGranahan
Design System Lead
User Experience Office, Indiana University
@levimcg
lmcgrana@iu.edu

2. The
Contract
rivet.iu.edu

3. The
Contract
rivet.iu.edu

4. rivet.iu.edu

5. Accessibility???

6. https://commons.wikimedia.org/wiki/File:Monroe_County_Courthouse_in_Bloomington_from_west-southwest.jpg

7. https://www.ronhazelton.com/blog/the_house_that_barns_built

8. https://youtu.be/4-pmKf7lcNk

9. https://youtu.be/4-pmKf7lcNk

10. https://www.idsnews.com/article/2018/08/brewers-vendors-and-patrons-celebrate-20-years-of-upland-brewing

13. We help people
Find,Create,& Share
Information.

14. https://www.digitalinformationworld.com/2018/10/tim-berners-lee-protect-web-data.html

16. https://io9.gizmodo.com/you-may-never-see-a-better-video-than-mad-max-fury-roa-1786534726

17. W3C WAI
Web Accessibility Initiative
https://www.w3.org/WAI/

18. WCAG
Web Content Accessibility Guidelines
https://www.w3.org/TR/WCAG21/

19. ARIA
Accessible Rich Internet Applications
https://www.w3.org/TR/wai-aria/

20. We have no
building codes.

21. Innovate! 🚀

24. ❌

25. It’s up to us. 🤞

26. User Human
Experience

27. 12.5%
https://factfinder.census.gov/

28. https://factfinder.census.gov/
40 Million

30. Multitasking

31. Multitasking
Sleep deprivation

32. Multitasking
Sleep deprivation
Stress

33. Multitasking
Sleep deprivation
Stress
Depression

34. Multitasking
Sleep deprivation
Stress
Depression

35. “People don’t _____”

36. “People don’t need that
focus indicator.It’s ugly,
get rid of it.”

37. “People don’t navigate with
their keyboard only.”

38. “People don’t need to do
that from their phone.”

39. This is how
exclusion happens.

40. Designers,
we started this.

41. UX / Interaction Designers
UI / Visual Designers
Product Owners
Project Managers
Developers

43. Greatest Hits

44. Greatest Hits
Of Exclusionary Design

45. Links

49. 🤮

50. *:focus {
outline: none;
}

57. *:focus-visible {
outline: 3px dotted navy;
outline-offset: 3px;
}
https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible

58. Contrast,Space,
& Typography

66. “Typography is 90% of design
the other 90% is space”
– Jefferey Zeldman

67. Labels

71. 🚫

74. Placeholder attribute
• No screen reader support
• Contrast issues
• They disappear! 👻

79. Labels
• First class screen reader support
• Able to style (contrast)
• Always visible

80. Microcopy

81. • Button text
• Link text
• Hints,Tips,Explainers
• Error states

83. “Read more”

84. “Read more”
“See more”

85. “Read more”
“See more”
“More”

86. “Read more”
“See more”
“More”
“Above”

87. “Read more”
“See more”
“More”
“Above”
“Below”

88. “Read more”
“See more”
“More”
“Above”
“Below”
“To the left”

89. “Read more”
“See more”
“More”
“Above”
“Below”
“To the left”
“To the right”

90. Icons

92. Save PrintOpen Delete

93. Unnecessary
complexity

94. Custom controls

97. Checklist
• Focusable
• Keyboard operable
• Touch operable
• Expected operation
• Clear indication of focus
• Label *
• Role *
• States and properties *
• Color contrast
https://developer.paciellogroup.com/blog/2014/09/web-components-punch-list/ *Exposed to Accessibility APIs

98. ARIA Authoring Practices
w3c.github.io/aria-practices/

100. Obfuscation

101. Tooltips
Accordions
🔥Modals🔥

102. https://modalzmodalzmodalz.com/

103. “The less an interface requires of
its users,the more accessible it is.”
– Alice Boxhall

104. We all have have
good intentions.

105. We get to design
the future.

108. You have more power
than you think.

109. You’re doing
good work.

110. Beautifully
Accessible
Levi McGranahan
Design System Lead
User Experience Office, Indiana University
@levimcg
lmcgrana@iu.edu