From jQuery San Diego, held Feb 12-13 2014, my talk on web accessibility for web developers. I cover basic techniques, introduce screen readers and ARIA, and go over testing. The goal is to demystify accessibility so we can weave it in to applications today.
4. So how’d I get here?
A short story, starring WCAG 2.0 AA
5. Today
• Introduction to accessibility
• Techniques you can implement today
• Introduction to screen readers & ARIA
• Testing tips
6. Web Accessibility
•
“When sites are correctly designed,
developed and edited, all users can have
equal access to information and
functionality” - Wikipedia
•
•
•
“Able to be easily obtained or used; easily
understood or appreciated” - Oxford Dictionary
Accessibility ~ Usability
All people can use an application, and it
should be easy to use for all people;
7. rough
Accessibility by the #’s
Group
Population
Vision Problems1
3-10%
Colorblindness2
4-8%
Physical Functioning1
8%
Cognitive Difficulty1
6%
Hearing Difficulty
3-11%
Assistive Tools
•
•
•
•
•
screen readers
screen magnifiers
keyboard-only
braille display
bumped font size
1 - CDC Summary Health Statistics for U.S. Adults: National Health Interview Survey, 2011
http://1.usa.gov/M6tObC (under 65/over 65)
2 - Range worldwide prevalence of red-green color deficiency among men, 2012
http://1.usa.gov/M6tKsz
18. Keyboard Strategy
✓ obvious focus states (keep those outlines!)
•
fallbacks for :hover & click()
↳ :focus & keydown()
19. Keyboard Strategy
✓ obvious focus states (keep those outlines!)
✓ fallbacks for :hover & click()
↳ :focus & keydown()
•
add tabIndex=0 & key events to non-focusable
elements
20. Keyboard Strategy
✓ obvious focus states (keep those outlines!)
✓ fallbacks for :hover & click()
↳ :focus & keydown()
✓ add tabIndex=0 & key events to non-focusable
elements
•
avoid keyboard traps & wasting time
21. Keyboard Strategy
✓ obvious focus states (keep those outlines!)
✓ fallbacks for :hover & click()
↳ :focus & keydown()
✓ add tabIndex=0 & key events to non-focusable
elements
✓ avoid keyboard traps & wasting time
• HTML can get you there, FREE!
WebAIM http://bit.ly/M24Da2
Keyboard Events http://bit.ly/M241Br
22. Wanted: Free Events!
<span class="btn-style toggle-trigger">Click to Toggle</span>
<a href="#" class="btn-style toggle-trigger">Click to Toggle</a>
<button type="button" class="toggle-trigger">Click to Toggle</
button>
Use the button element http://bit.ly/1efaOO1
Links aren’t buttons http://bit.ly/1efaT4o
23.
24. Visual Considerations
• start with a good font size & high contrast
•
•
•
WCAG Contrast Checker (FF) http://mzl.la/1eeYiyf
Contrast Checker - http://bit.ly/1eeYZYh (by a fellow Shopify-er)
NoCoffee (Chrome) http://bit.ly/1ljQvFF
25. Visual Considerations
✓ start with a good font size & high contrast
•
•
•
WCAG Contrast Checker (FF) http://mzl.la/1eeYiyf
Contrast Checker - http://bit.ly/1eeYZYh (by a fellow Shopify-er)
NoCoffee (Chrome) http://bit.ly/1ljQvFF
• don’t rely on color alone
•
add legends and texture or symbols
27. Visual Considerations
✓ start with a good font size & high contrast
•
•
•
WCAG Contrast Checker (FF) http://mzl.la/1eeYiyf
Contrast Checker - http://bit.ly/1eeYZYh (by a fellow Shopify-er)
NoCoffee (Chrome) http://bit.ly/1ljQvFF
✓ don’t rely on color alone
•
•
add legends and texture or symbols
all images have a meaningful alt attribute
• W3C How to write Alt Text http://bit.ly/1aKwIOg
• More from A List Apart http://bit.ly/1aKwRkI
30. Forms
✓ Every form field includes a real label
<label for="[INPUT ID]">
•
Labels can include help, required, error text
31. Forms
✓ Every form field includes a real label
<label for="[INPUT ID]">
✓ Labels can include help, required, error text
• Provide meaningful message on form error
WebAIM Forms http://bit.ly/1aKw2bM
WebAIM Validation http://bit.ly/1aKw6bB
Accessible Form Labeling http://bit.ly/1aKw83b
38. Headings
•
•
•
•
Main way screen reader users navigate
Do your main content areas have headings?
Are they descriptive?
Do they follow a hierarchy? (h1 >> h6)
H1 Blog
H2 Recent Articles
H3 Article Title
H3 Article Title
H3 Article Title
H2 About Me
H3 Contact Me
H3 Footer Title
Document Outline http://bit.ly/1ef9ScA
The Section Element http://bit.ly/1ef9TNN
Accessible Headings http://bit.ly/1ef9QBr Using Sections http://bit.ly/1ef9Ykx
39. SR’s ignore...
• img with empty alt attribute alt=""
• display: none;
• visibility: hidden;
• :before content, :after content* (sort of)
•
keep in mind for icons and icon fonts!
.icon-star:before {
content: “★”;
}
* in most cases, so assume it won’t be announced
Accessible Icon Fonts http://bit.ly/1efabUP
43. ARIA
• Semantic information and better
interactions for screen readers
• Applied directly to HTML
•
•
Part of HTML5 spec
•
Roles, states & properties
Does not affect styles or
non-SR behavior
HTML5 Spec (W3C) http://bit.ly/1aKxXx5
ARIA Spec (W3C) http://bit.ly/1aKya3f
44. Roles
• Create new semantic meaning for
elements via “role-” attribute
• Once set, they don’t change
<nav role="navigation">
<article role="article">
<div role="tablist">
<div role="combobox">
45. Landmark Roles
Define top-level page sections for easy navigation
Role
•main
•banner
•navigation
•search
•complimentary
•contentinfo
•form
Using Landmarks http://bit.ly/1aKyuyQ
WebAIM Landmarks http://bit.ly/1aKytem
HTML 5
........
<main>
........
<header>
........
<nav>
........
<form> (search form)
........
<aside>
........
<footer>
47. Widget Roles
Semantic meaning to your custom components
• tooltip
• slider
• dialog
• tab
• progressbar
• combobox
• menu
• alert
.. and many more!
49. States & Properties
• Describe relationships - between content
& between user interactions
• updated via JS on UI changes
• attribute starts with “aria-” prefix
<section aria-labelledby="MainHeading">
<input aria-label="first 3 digits" ariadescribed="PhoneHelpText" aria-invalid="true">
<div aria-expanded="true">
<button aria-controls="ToggledContent">
50. Content Relationships
• Semantically link labels to content or add
them when missing
•
aria-labelledby, aria-label
<section aria-labelledby="HeadingAbout">
<h1 id="HeadingAbout">About Potato Chips</h1>
<p>....
Make the most of landmarks http://bit.ly/M1TFSb
51. Content Relationships
• Semantically link labels to content or add
them when missing
•
aria-labelledby, aria-label
<nav role="navigation" aria-label="Chip Section Navigation">
<ul>
<li>
<a href="/types">Flavors</a>
</li>
52. The more you know
It's just HTML!
.elem[aria-hidden = "false"] {
display: block;
}
.elem[aria-invalid ="false"] {
background: #999;
}
.elem[aria-expanded = "true"] {
height: 100%;
background-image: url("sprite/down-arrows.jpg");
}
53.
54. Putting it all together
•
•
•
•
•
jQueryUI https://jqueryui.com/
Practical ARIA Examples http://bit.ly/1bhMqBg
HTML5 & ARIA Design Patterns http://bit.ly/1bhMlNZ
Accessible Forms with ARIA http://bit.ly/1bhMv7M
Bootstrap Accessibility Plugin (PayPal) http://bit.ly/1bhM8dy
55. Using ARIA Wisely
•
•
•
ARIA is a bridge, not a replacement.
•
USE plain HTML if you can
Not magic and makes no promises
•
Events, focus management, keyboard support, and
meaningful structure is still up to you
Only way to know for sure... TEST
56. ARIA Resources
W3C Intro
http://www.w3.org/TR/wai-aria-primer/
W3C How-to with design patterns
http://www.w3.org/TR/wai-aria-practices/
W3C Supporting Info for developers
http://www.w3.org/TR/aria-in-html/
WEBAIM Introduction
http://webaim.org/techniques/aria/
Warnings and Perspectives
http://alistapart.com/article/the-accessibility-of-wai-aria
General Information
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA
ARIA Validation
http://validator.nu
60. Manual Testing
• disable all images
• test with just a keyboard
• load it in a screen reader
• load it in another screen reader
Does your page make sense?
Is it usable ?
10 Tips anyone can use http://bit.ly/1efaA9N
6 Tests anyone can do http://bit.ly/1efaC1c
61. Unsolicited Advice
• Start small, there’s still a big impact
• Prioritize areas/pages
•
•
•
main navigation?
contact us form?
homepage?
• Document as you go
67. General
HTML5 Accessibility http://bit.ly/LVR8YX
Accessibility Evaluation Quick Reference http://bit.ly/M6tgCF
Mozilla Dev Network ARIA http://mzl.la/M6u9ez
Apple Accessibility Resources http://bit.ly/M6tkSL
Screen Readers
WebAIM Screen Reader Testing http://bit.ly/M6sLIH
Videos of Screen Readers In Use http://bit.ly/M6sR39
How browsers interact with screen readers http://bit.ly/M6sUfi
NVDA resources
WebAIM NVDA http://bit.ly/M6sZj5
WebAIM NVDA Shortcuts http://bit.ly/M6t0n2
Using NVDA and FF to test pages http://bit.ly/M6t6Lu
Installing NVDA in a VM http://bit.ly/M6t8D4
VoiceOver resources
WebAIM VoiceOver http://bit.ly/M6tbyS
Apple VoiceOver User Guide http://bit.ly/M6tolE
Apple Developer Accessibility Guide http://bit.ly/M6ttpe
JAWS resources
WebAIM JAWS http://bit.ly/M6tw4D
WebAIM JAWS Shortcuts http://bit.ly/M6sBRM