ABSTRACT: It’s always better to bake in accessibility from the very beginning of your project than tack it on after the fact. Making accessibility decisions up front in your web app can save your users a lot of frustration and save you a lot of development time. But how do you know what to bake in, how to mix it all together, and whether you’re doing it right?
(Originally presented at Respond '17: http://www.webdirections.org/respond/)
45. 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/
55. Informational: Short, descriptive alt text
<img alt=“Cupcake with cherry on top” src=“cupcake1.png”/>
<img alt=“Cupcake with sprinkles” src=“cupcake2.png”/>
56. 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>
58. 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
59. Good morning, Respond Conf!
I’m happy to be in Melbourne.
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. Good morning, Respond Conf!
I’m happy to be in Melbourne.
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.
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
68. 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.”
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.”
Name
Email*
70. 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*
71. 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.”
What should I put here again?
72. 3. Visible focus indicators
Subscribe
Name
Email*
Yes, I want to be a
contestant on “The Great
Accessibility Bake Off.”
What should I put here again?
:focus {
outline: none;
}
Don’t just remove default
73. 3. Visible focus indicators
Subscribe
Name
Email*
Yes, I want to be a
contestant on “The Great
Accessibility Bake Off.”
What should I put here again?
: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!
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” />
4. Associated errors
Name
Email*
Yes, I want to be a
contestant on “The Great
Accessibility Bake Off.”
What should I put here again?
Email address must include @ sign.
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.”
What should I put here again?
Email address must include @ sign.
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.”
What should I put here again?
Email address must include @ sign.
77. 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.”
What should I put here again?
Email address must include @ sign.
89. 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/
104. 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.”
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!)
107. Putting things in buckets, using ARIA spec
1. Press Space on an item to select it.
2. Optionally Ctrl+Space on other items to multi-select.
3. Press Tab key to select a bucket.
4. Press Enter or Ctrl+M to move item into that bucket.
More specifics:
● ARIA Authoring Practices
● SitePoint’s Drag-and-Drop Tutorial
● WhatSock Training
110. 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