ABSTRACT: A quick web search can bring up thousands of code samples for any type of component one could imagine building, but 90% of that code isn’t accessible, unintentionally leaving huge audiences of users behind. You have the power to change this! As the people creating style guides and component systems, you’re uniquely positioned to get accessibility right the first time and spread best practices to everyone who uses your code. In this talk, you’ll learn the key ingredients for baking accessibility into your design system, including mindful color palettes, semantic HTML, and a dash of ARIA. Let’s make the web better for everyone, one style guide at a time! (Originally presented at Clarity Conf in 2016: https://www.clarityconf.com/baking-accessibility-in/)

1. Baking accessibility in

2. Cordelia McGee-Tubb
Accessibility Specialist at Dropbox
Soon-to-be Master of Comics
@cordeliadillon

3. What’s accessibility?
● Making products, services, and spaces that everyone
can use and enjoy, regardless of their abilities
● Creating flexible systems that consider the
experiences of people with disabilities from the very
start, not just through tacked-on accommodations

8. Why am I talking to
you about this?

11. You are creating
the cookbooks that
everyone else reads.

13. People want to
use your recipes.

14. Give them the best
recipes you can.

15. (Accessibility)
Universal Design

17. Cooking Class Agenda
● Foundational ingredients
common accessible code techniques
● Sugar, spice, and everything nice
making your distinct design accessible
● Sharing your recipes
documenting accessibility

18. Foundational
ingredients

19. Use semantic HTML.

20. Buttons: Use actual <button> elements
Primary
<button class=“button--primary”>
Primary
</button>
Secondary

21. Buttons: Use actual <button> elements
Primary
<a class=“button--primary”>
Primary
</a>
Secondary

22. Buttons: Use actual <button> elements
Primary
<div class=“button--primary” onClick=“...”>
Primary
</div>
Secondary

23. Buttons: Use actual <button> elements
Primary
<button class=“button--primary”>
Primary
</button>
Secondary

24. Form fields: Use visible, explicit labels
Favorite animal
<input type=“text” placeholder=“Favorite animal”/>

25. Form fields: Use visible, explicit labels
Leaping lemurs
Favorite animal
<label>Favorite animal</label>
<input type=“text” placeholder=“Leaping lemurs”/>

26. Form fields: Use visible, explicit labels
Leaping lemurs
Favorite animal
<label for=“animal”>Favorite animal</label>
<input id=“animal” type=“text”
placeholder=“Leaping lemurs”/>

27. Give images some
alternative text.

28. Informational: Short, descriptive alt text
<img alt=“Home” src=“house-icon.png”/>
<img alt=“Greenhouse” src=“house-icon.png”/>

29. Redundant: Empty alt text
<img alt=“” src=“home-icon.png”/>
<span class=“uppercase”>Home</span>
HOME
<svg aria-hidden=“true”>...</svg>
<span class=“uppercase”>Home</span>

30. Decorative: At your discretion, often empty
alt=“Illustration of
Cordelia grinning,
wearing a chef’s hat,
and stirring batter”
alt=“”

31. Include a dash of
ARIA when necessary.

32. A R I A
Accessible Rich Internet Applications
Communicate element’s
role, state, and properties
to assistive technology.

34. Some components that should use ARIA
● Modals
● Menus
● Accordions
● Tabs
● Alerts
● Trees
… and various other elements whose functionality or
purpose aren’t clear through semantic HTML alone.

35. Add accessible recipes to your cookbook.
WCAG 2.0 Guidelines
https://www.w3.org/TR/WCAG20/
Heydon’s Practical ARIA Examples
http://heydonworks.com/practical_aria_examples/
Web Accessibility Slack community
http://web-a11y.herokuapp.com/

36. Sugar, spice, and
everything nice

37. Make keyboard
interactions as rich as
mouse interactions.

40. Don’t forget about
focus styles.

41. Focus styles

42. Focus styles

43. Focus styles
Love

44. Focus styles
Love Love
Love Love

45. Color

46. Two color rules:
Do maintain reasonable contrast between
text and background colors.
Don’t use color alone to convey meaning.

47. Rule #1: Reasonable contrast for text
WCAG 2.0 Guidelines
4.5:1 for regular text
3:1 for large text
http://leaverou.github.io/contrast-ratio/
http://wave.webaim.org

49. dropbox.github.io/scooter/functions.html

50. dropbox.github.io/scooter/functions.html

51. Use vibrant colors!
Use light colors!

54. Rule #2: Use more than just color for meaning

55. Rule #2: Use more than just color for meaning

56. Rule #2: Use more than just color for meaning

57. Rule #2: Use more than just color for meaning

58. Sharing
your recipes

61. Include accessibility
notes in your
documentation.

65. Component documentation
● Discourages accidental removal of accessible aspects
● Encourages constant attention to accessibility
● Spreads best practices
General documentation
● Might get overlooked (so shouldn’t exist by itself)
● Encourages holistic thinking about inclusive design
● Spreads best practices

67. Cooking Class Recap
● Bake accessibility in from the beginning!
● Use these key ingredients:
○ semantic HTML
○ alternative text
○ ARIA (as necessary)
○ keyboard interactivity
● Use color! Make sure text is high contrast and and there
are additional visual elements for meaning.
● Share your accessible recipes generously.

68. Thanks!
@cordeliadillon