It’s always better to bake in accessibility from the very beginning than tack it on after you've already built something. Making accessibility decisions up front in your web app can save your users a lot of frustration and save you a lot of time. But how do you know what to bake in, how to mix it all together, and whether you’ve made something good? Let’s review the key ingredients of web accessibility — such as semantic HTML, keyboard interactivity, and a dash of ARIA — and discuss some tried-and-true recipes for accessible web development. We’ll also knead through technically challenging accessibility feats to achieve more inclusive interaction patterns. With these techniques in your recipe book, making an accessible website will be a piece of cake!

1. The Great
Accessibility
Bake Off

2. @cordeliadillon
Cordelia McGee-Tubb
Web Accessibility Engineer

3. Making products, services, and
spaces that everyone can use
and enjoy in all contexts,
regardless of their abilities

4. Visual

5. Visual Motor

6. Visual Motor Auditory

7. Visual Motor Auditory Cognitive

8. Creating flexible systems that
consider all users’ experiences
from the very start, not just via
tacked-on accommodations

9. Baking accessibility in

14. Set Timer

15. Set Timer
<div
class=“button--primary”
onClick=“setTimer()”>
Set Timer
</div>

16. Set Timer
<div
class=“button--primary”
onClick=“setTimer()”
tabindex=“0”>
Set Timer
</div>

17. Set Timer
<div
class=“button--primary”
onClick=“setTimer()”
tabindex=“0”
onKeyDown=“setTimer(e)”>
Set Timer
</div>

18. Set Timer
<div
class=“button--primary”
onClick=“setTimer”
tabindex=“0”
onKeyDown=“setTimer(e)”
role=“button”>
Set Timer
</div>

19. Set Timer
<button
onClick=“setTimer()”>
Set Timer
</button>

20. Set Timer
<button
class=“button--primary”
onClick=“setTimer()”>
Set Timer
</button>

22. Image sources: http://ind.pn/2qIL6Qp and http://bit.ly/2pCoqDD

23. Image sources: http://ind.pn/2qIL6Qp and http://bit.ly/2pCoqDD

24. Image source: https://www.yahoo.com/style/anglophiles-and-baking-enthusiasts-received-a-106546370621.html

25. Image source: http://ind.pn/2qINXsS

27. You don’t have to be an
accessibility expert to make
great, accessible UIs.

28. Image source: https://www.yahoo.com/style/anglophiles-and-baking-enthusiasts-received-a-106546370621.html

30. Image source: http://ind.pn/2qINXsS

43. Main Ingredients

44. You will need...
❏ Semantic HTML
❏ A dash of ARIA
❏ Alt attributes for images
❏ Names for all interactive items
❏ Sufficient text contrast
❏ Mouse-keyboard parity
Web Content Accessibility Guidelines: https://www.w3.org/TR/WCAG20/

45. Semantic HTML is the
core ingredient for
accessible web UIs.

46. <button>
<article>
<input>
<table>
<main> <ul>
<nav> <li>
<a href>
<h1> <h2>
<section> <div> <span> <a>

47. ...but as we move from
websites to web apps,
sometimes we need to spice
up our HTML with ARIA.

48. Accessible Rich Internet Applications

49. https://www.w3.org/TR/wai-aria-1.1/
Accessible Rich Internet Applications

50. ARIA can communicate elements’
role, state, and properties to
assistive technology when
semantic HTML won’t suffice.

51. ARIA can communicate elements’
role, state, and properties to
assistive technology when
semantic HTML won’t suffice.

52. Use alternative text to
make sure images’
meaning comes through.

53. Informational: Short, descriptive alt text
<img alt=“Cupcake” src=“icon-final-FINAL.png”/>

54. Informational: Short, descriptive alt text
<img alt=“Cupcake with cherry on top” src=“cupcake1.png”/>
<img alt=“Cupcake with sprinkles” src=“cupcake2.png”/>

55. Redundant or decorative: Empty alt text
<img alt=“” src=“icon-final-final.png”/>
<span class=“uppercase”>Cupcakes</span>
CUPCAKES
<svg aria-hidden=“true”>...</svg>
<span class=“uppercase”>Cupcakes</span>

56. Use good text contrast.

57. WCAG 2.0 AA Guidelines:
4.5:1 for regular text
3:1 for large text
http://leaverou.github.io/contrast-ratio/
http://wave.webaim.org

58. Good morning, Accessibility Campers!
I’m happy to be in Sydney again.
Talking with y’all about baking.
What’s your favorite cake?
Do you say “frosting” or “icing”?
Is quiche a pastry?
Do you like chocolate?
Can you still see me?
Shout “CUPCAKES!” if you can read this.

59. 21:1
9.89:1
5.74:1
2.85:1
2.01:1
1.61:1
1.41:1
1.15:1
1.14:1
Good morning, Accessibility Campers!
I’m happy to be in Sydney again.
Talking with y’all about baking.
What’s your favorite cake?
Do you say “frosting” or “icing”?
Is quiche a pastry?
Do you like chocolate?
Can you still see me?
Shout “CUPCAKES!” if you can read this.

60. Judging Criteria

61. Does it look amazing?
Does it taste amazing?
Is it well-baked?

62. Does it look amazing?
Does it taste amazing?
Is it well-baked?
Does it look amazing?
Does it function as expected?
Did you over/under-engineer it?

63. Test everything you make with...
❏ a mouse
❏ a keyboard
❏ a screen reader
❏ multiple screen readers
❏ NVDA (Windows)
❏ JAWS (Windows)
❏ VoiceOver (built-in to OS X!)
❏ grayscale mode
❏ real users!

64. Signature
Challenge

66. Subscribe
<input type=“text”/>
<input type=“email” required />
<input type=“checkbox” />
<input type=“submit” value=“Subscribe” />
1. The fields themselves

67. Subscribe
<label for=“name”>Name</label>
<input id=“name” type=“text”/>
<label for=“email”>Email</label>
<input id=“email” type=“email” required />
<input id=“bakeoff” type=“checkbox” />
<label for=“bakeoff”>Yes, …</label>
<input type=“submit” value=“Subscribe” />
2. Associated, visible labels
Name
Email*
Yes, I want to be a
contestant on “The Great
Accessibility Bake Off.”

68. Subscribe
<label for=“name”>Name</label>
<input placeholder=“Name” type=“text”/>
<label for=“email”>Email</label>
<input placeholder=“Email” type=“email”
required />
<input id=“bakeoff” type=“checkbox” />
<label for=“bakeoff”>Yes, …</label>
<input type=“submit” value=“Subscribe” />
No placeholders as labels
Yes, I want to be a
contestant on “The Great
Accessibility Bake Off.”
Name
Email*

69. Subscribe
<label for=“name”>Name</label>
<input placeholder=“Name” type=“text”/>
<label for=“email”>Email</label>
<input placeholder=“Email” type=“email”
required />
<input id=“bakeoff” type=“checkbox” />
<label for=“bakeoff”>Yes, …</label>
<input type=“submit” value=“Subscribe” />
No placeholders as labels
Yes, I want to be a
contestant on “The Great
Accessibility Bake Off.”
What should I put here again?
Email*

70. Subscribe
<label for=“name”>Name</label>
<input id=“name” type=“text”/>
<label for=“email”>Email</label>
<input id=“email” type=“email” required />
<input id=“bakeoff” type=“checkbox” />
<label for=“bakeoff”>Yes, …</label>
<input type=“submit” value=“Subscribe” />
2. Associated, visible labels
Name
Email*
Yes, I want to be a
contestant on “The Great
Accessibility Bake Off.”
I know what I should put here!

71. 3. Visible focus indicators
Subscribe
Name
Email*
Yes, I want to be a
contestant on “The Great
Accessibility Bake Off.”
:focus {
outline: none;
}
Don’t just remove default

72. 3. Visible focus indicators
Subscribe
Name
Email*
Yes, I want to be a
contestant on “The Great
Accessibility Bake Off.”
:focus {
outline: none;
box-shadow: 0 0 0 2px rgb(103, 78, 167);
}
:focus {
outline: none;
}
Don’t just remove default
Replace it with something!

73. Subscribe
<label for=“name”>Name</label>
<input id=“name” type=“text”/>
<label for=“email”>Email</label>
<input id=“email” type=“email” required
aria-describedby=“email-error” />
<span class=“error” id=“email-error”>
Your email…
</span>
<input id=“bakeoff” type=“checkbox” />
<label for=“bakeoff”>Yes, …</label>
<input type=“submit” value=“Subscribe” />
4. Associated errors
Name
Email*
Yes, I want to be a
contestant on “The Great
Accessibility Bake Off.”
Cordelia
Email address must include @ sign.
cordelia

74. Subscribe
<label for=“name”>Name</label>
<input id=“name” type=“text”/>
<label for=“email”>Email</label>
<input id=“email” type=“email” required
aria-describedby=“email-error” />
<span class=“error” id=“email-error”>
Your email…
</span>
<input id=“bakeoff” type=“checkbox” />
<label for=“bakeoff”>Yes, …</label>
<input type=“submit” value=“Subscribe” />
5. No color reliance
Name
Email*
Yes, I want to be a
contestant on “The Great
Accessibility Bake Off.”
Cordelia
Email address must include @ sign.
cordelia

75. Subscribe
<label for=“name”>Name</label>
<input id=“name” type=“text”/>
<label for=“email”>Email</label>
<input id=“email” type=“email” required
aria-describedby=“email-error” />
<span class=“error” id=“email-error”>
Your email…
</span>
<input id=“bakeoff” type=“checkbox” />
<label for=“bakeoff”>Yes, …</label>
<input type=“submit” value=“Subscribe” />
5. No color reliance
Name
Email*
Yes, I want to be a
contestant on “The Great
Accessibility Bake Off.”
Cordelia
Email address must include @ sign.
cordelia

76. Subscribe
<label for=“name”>Name</label>
<input id=“name” type=“text”/>
<label for=“email”>Email</label>
<input id=“email” type=“email” required
aria-describedby=“email-error” />
<span class=“error” id=“email-error”>
Your email…
</span>
<input id=“bakeoff” type=“checkbox” />
<label for=“bakeoff”>Yes, …</label>
<input type=“submit” value=“Subscribe” />
5. No color reliance
Name
Email*
Yes, I want to be a
contestant on “The Great
Accessibility Bake Off.”
Cordelia
Email address must include @ sign.
cordelia

77. https://www.sitepoint.com/replacing-radio-buttons-without-replacing-radio-buttons/

78. Technical
Challenge

80. Our tried-and-true
semantic HTML isn’t
sufficient in this case.

81. Let’s follow the given
ARIA recipe.

82. https://www.w3.org/TR/wai-aria-practices-1.1/#TreeView

83. https://www.w3.org/TR/wai-aria-practices-1.1/#TreeView

84. https://www.w3.org/TR/wai-aria-practices-1.1/#TreeView

85. https://www.w3.org/TR/wai-aria-practices-1.1/#TreeView

86. https://www.w3.org/TR/wai-aria-practices-1.1/#TreeView

88. What do you do if it’s not working?
1. Double check the spec
2. Double check your code
3. Google it
4. Check for known bugs in browsers and screen readers
http://whoseline.a11yideas.com/bugs.html
5. Ask around!
http://web-a11y.herokuapp.com/

89. http://accessibleculture.org/articles/2013/02/not-so-simple-aria-tree-views-and-screen-readers/

92. Showstopper
Challenge

94. Think less about the
method and more
about the outcome.

95. Think less about the
method and more
about the outcome.
Drag-and-drop Move something

96. Put into buckets

97. Put into buckets Rearrange lists

98. Put into buckets Rearrange lists Move on canvas

99. Put into buckets Rearrange lists Move on canvas

100. Salesforce’s Opportunity Kanban board

101. Salesforce’s Opportunity Kanban board

102. Salesforce’s Opportunity Kanban board

103. Putting things in buckets
1. Press Space on an item to open a menu of buckets.
2. Press Arrow keys to select a bucket in that list.
3. Press Enter to move item into that bucket.
Inform user of interaction pattern:
“Press space bar to select and move.”

104. Rearranging a list
1. Press Space on an item to enter drag mode.
2. Press Arrow keys to move element up or down.
3. Press Space to drop item.
Inform user of interaction pattern and state:
“Press space bar to select and move.”
“Grabbed, current position: 1 of 5”
“Dropped, final position: 3 of 5”

105. Wait, what about ARIA?
● ARIA 1.0
○ drag-and-drop authoring suggestions
○ aria-grabbed attribute
○ aria-dropeffect attribute
● ARIA 1.1
○ no authoring suggestions
○ aria-grabbed and aria-dropeffect are deprecated
○ (but don’t worry too much!)

106. Dropbox file browsing

107. Dropbox file browsing

108. Even more ways to move!
● Delete key for moving things into Trash bins
● Cut, Copy, and Paste support
Positioning on a canvas
x: 100 px 42 pxy:
● Arrow keys
● Input fields

109. Give users choice
and flexibility.
They’ll decide which methods
are best for them.

113. Thanks!
@cordeliadillon