Accessibility and the Modern Web
Assumptions
Empathy in Design
Today
- Accessibility 101
- What About MVP?
- Why We Design
- Resources
Accessibility
Keyboard Access
Accessibility
Color Contrast
Accessibility
Text Alternatives
Accessibility
HTML Semantics
RWD + A11Y = ♥
And Google Glass
And Leap Motion
And Google Watch
And Your Voice!
Really-hidden vs. offscreen
.reallyHidden {
display: none;
visibility: hidden;
}
.offscreen {
display: block;
left: -50000px;
position: absolute;
}
CSS
ARIA Hidden
<button>
<i aria-hidden="true" class="icomoon-x"></i>
<span class="offscreen">Toggle Menu</span>
</button>
HTML
Freedom
@marcysutton iPhone was the 1ST piece of tech I could use out of the box. Normally need sighted help to get screen reader installed etc.
— Steve Sawczyn (@steveofmaine) October 11, 2013@marcysutton If you think about it, I can't even buy and use a microwave until someone helps me label touchpad.
— Steve Sawczyn (@steveofmaine) October 11, 2013
Doesn't apply to us
Minimum
Viable Product
A strategy used for fast and quantitative market testing of a product or feature
Early Adopters
Do it right the first time
How will this software improve peoples’ lives?
Get someone hired
Help them manage
their finances
H&R Block
“H&R Block had violated the Americans with Disabilities Act by having a website that was inaccessible to people with various disabilities, not just the blind.”
“The DOJ expects businesses to ensure that customer-facing digital technology is accessible to individuals with disabilities”
Set them up for success
What could we do?
- Add Skip Links
- Provide Text Alternatives
- Make a Delightful Experience
- Innovate
The Feedback Tab
Make it accessible.
