Building accessible apps
@kimberlymunoz
about me
- Proud dog mom on Instagram
- Front end developer @Slack
- Front end developer @CFPB.gov
Why accessibility
Because everyone deserves to access the web
Because accessibility improvements help everyone
Because semantic HTML and accessible patterns will make your job as a developer easier
ACCESSIBLE INTERFACES HELP
- vim users
visual users with UX enhancement
- People using laptops one-handed
visual physical-impaired users
- Screenreader users
blind users
Getting started with accessibility
1. Appropriate use of color
2. Semantic HTML
3. Keyboard Accessibility
4. Learning more
Appropriate use of color
don't rely on it
Color contrast
Maintain 4.5 color Contrast contrast ratio
Do not rely on color alone
Essentials of keyboard navigability
- Can you navigate to everything with a keyboard?
- Can you skip repetitive links and tabbing?
-
Can you see when you're navigating?
- Can you get your keyboard focus "stuck"?
These are all listed under WCAG
https://www.w3.org/WAI/intro/wcag
Turning on keyboard accessibility
How to test!
tab
tab
shift
Move forward
Move backward
Pro-Tip:
If you use links and buttons, you probably have this covered.
How to test!
enter
spacebar
↑
↓
→
←
Spacebar can select items like dropdowns, buttons, checkboxes.
Scroll through dropdowns, radio buttons, sliders, autocompletes.
Enter can select buttons and links.
Resources
Cheatsheet:
http://webaim.org/techniques/keyboard/
WAI-ARIA Authoring Practices:
(For complex widgets)
Let's try this
Common pitfalls
Watch your focus!
a { outline: none; }
Also, make sure it makes sense. Don't skip around.
Skip repetitive links with skip links
#skip-nav {
position: absolute;
top: unit(-@grid_gutter-width / @base-font-size-px, em);
left: unit(@grid_gutter-width / @base-font-size-px, em);
background: transparent;
transition: transform 1s ease, background .5s linear;
z-index: 20;
}
#skip-nav:focus {
// Your button markup
position: absolute;
top: 0;
outline: 0;
transition: transform .1s ease, background .2s linear;
}
<div class="button"></div>
<div class="button" role="button"></div>
<div class="button"
role="button"
tabindex="0"></div>
Using unsemantic HTML
// Use semantic elements wherever possible.
<button></button>
Use semantic HTML
Common Pitfalls:
Can you get stuck using a keyboard?
- Can you tab out of a modal without exiting?
- Can you trap your keyboard focus unintentionally and never get out?
Can we automate it?
Automated tools!
Axe-core
https://github.com/dequelabs/axe-core
Node-Wcag
https://github.com/cfpb/node-wcag
Tota11y
http://khan.github.io/tota11y/
Questions?
Copy of Keyboard Testing Presentation
By Kimberly Munoz
Copy of Keyboard Testing Presentation
Presentation given at WaffleJS on keyboard testing.
- 1,800