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. Accessibility by the #’s
rough
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
Group Population
Vision Problems 3-10%
Colorblindness 4-8%
Physical Functioning 8%
Cognitive Difficulty 6%
Hearing Difficulty 3-11%
Assistive Tools
• screen readers
• screen magnifiers
• keyboard-only
• braille display
• bumped font size
17. Keyboard Strategy
✓ obvious focus states (keep those outlines!)
• keypress equivalents for :hover & click()
↳ :focus & keydown()
18. Keyboard Strategy
✓ obvious focus states (keep those outlines!)
✓ keypress equivalents for :hover & click()
↳ :focus & keydown()
• add tabIndex=0 & key events to non-focusable
elements
19. Keyboard Strategy
✓ obvious focus states (keep those outlines!)
✓ keypress equivalents for :hover & click()
↳ :focus & keydown()
✓ add tabIndex=0 & key events to non-focusable
elements
• avoid keyboard traps & wasting time
20. Keyboard Strategy
✓ obvious focus states (keep those outlines!)
✓ keypress equivalents 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
21. 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
22.
23. Visual Considerations
• start with a good font size & high contrast
• Contrast Checker Tool - http://bit.ly/1eeYZYh (by a fellow Shopify-er)
• Chrome Plugin - http://bit.ly/1ljQvFF
• Accessible colour palette how-to http://bit.ly/1fnbmJp
24. Visual Considerations
✓start with a good font size & high contrast
• Contrast Checker Tool - http://bit.ly/1eeYZYh (by a fellow Shopify-er)
• Chrome Plugin - http://bit.ly/1ljQvFF
• Accessible colour palette how-to http://bit.ly/1fnbmJp
• don’t rely on colour alone
• add legends and texture or symbols
26. Visual Considerations
✓start with a good font size & high contrast
• Contrast Checker Tool - http://bit.ly/1eeYZYh (by a fellow Shopify-er)
• Chrome Plugin - http://bit.ly/1ljQvFF
• Accessible colour palette how-to http://bit.ly/1fnbmJp
✓don’t rely on colour 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
27.
28. • Every form field includes a real label
<label for="[INPUT ID]">
!
!
Forms
29. ✓ Every form field includes a real label
<label for="[INPUT ID]">
• Labels can include help, required, error text
!
!
!
Forms
30. ✓ 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
Forms
38. • Do your main content areas have headings?
• Are they descriptive?
• Do they follow a hierarchy? (h1 >> h6)
Headings
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
H1 Blog
H2 Recent Articles
H3 Article Title
H3 Article Title
H3 Article Title
H2 About Me
H3 Contact Me
H3 Footer Title
• Main way screen reader users navigate
39. • img with empty alt attribute alt=""
SR’s ignore...
• :before content, :after content* (sort of)
• display: none;
• visibility: hidden;
* in most cases, so assume it won’t be announced
Accessible Icon Fonts http://bit.ly/1efabUP
.icon-star:before {
content: “★”;
}
• keep in mind for icons and icon fonts!
43. • Applied directly to HTML
!
• Does not affect styles or
non-SR behaviour
• Roles, states & properties
• Semantic information and better
interactions for screen readers
ARIA
• Part of HTML5 spec
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
!
•main
•banner
•navigation
•search
•complimentary
•contentinfo
•form
Using Landmarks http://bit.ly/1aKyuyQ
WebAIM Landmarks http://bit.ly/1aKytem
Role
51. • Describe relationships - between content
& between user interactions
• updated via JS on UI changes
• attribute starts with “aria-” prefix
States & Properties
<section aria-labelledby="MainHeading">
!
<input aria-label="first 3 digits" aria-
describedby="PhoneHelpText">
!
<button aria-expanded="true" class="accordion-
toggle" aria-controls="Accordion">
!
<div id=“Accordion" aria-hidden="false" >
52. 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
53. 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>
54. It's just HTML!
.elem[aria-hidden = "false"] {
display: block;
}
!
.elem[aria-invalid ="false"] {
background: #999;
}
!
.elem[aria-expanded = "true"] {
height: 100%;
}
The more you know
55.
56. 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
57. 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
58. 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
62. Manual Testing
• disable all images
• test with just a keyboard
• load it in a screen reader
• load it in another screen reader
10 Tips anyone can use http://bit.ly/1efaA9N
6 Tests anyone can do http://bit.ly/1efaC1c
Does your page make sense?
Is it usable ?
63. Unsolicited Advice
• Start small, there’s still a big impact
• Prioritize areas/pages
• main navigation?
• contact us form?
• homepage?
• Document as you go
69. More Resources
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