a11yto - web accessibility for developers
DESCRIPTION
Presented at Toronto Accessibility & Inclusive Design, April 30 2014TRANSCRIPT
Web Accessibility for Developersa11yTO April 2014 Monika Piotrowicz (@monsika)
Monika PiotrowiczFront End Web Developer Shopify !
@monsika @shopify
I’m just...A regular Front End Developer... !
!
!
So how’d I get here? A short story, starring WCAG 2.0 AA !
!
!
Today• Introduction to accessibility • Techniques you can implement today • Introduction to screen readers & ARIA • Testing tips
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;
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
Me last year...
Go!
WCAGThe standard http://www.w3.org/TR/WCAG20/
Understanding WCAG http://www.w3.org/TR/UNDERSTANDING-WCAG20/
Techniques http://www.w3.org/TR/WCAG20-TECHS/
Quick Reference http://www.w3.org/WAI/WCAG20/quickref/
FAQ http://www.w3.org/WAI/WCAG20/wcag2faq.html
Accessibility
just a checklist
!=
Starting outEarly accessibility considerations
First Steps• functional keyboard-only
• fallbacks for visual information
• well-functioning forms
Keyboard Strategy• obvious focus states (keep those outlines!)
a, a:focus { outline: none; outline: 0; }
Keyboard Strategy✓ obvious focus states (keep those outlines!)
• keypress equivalents for :hover & click()
↳ :focus & keydown()
Keyboard Strategy✓ obvious focus states (keep those outlines!)
✓ keypress equivalents for :hover & click()
↳ :focus & keydown()
• add tabIndex=0 & key events to non-focusable elements
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
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
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
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
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
Red-Green Colorblind (Deuteranopia)
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
• Every form field includes a real label <label for="[INPUT ID]"> !!
Forms
✓ Every form field includes a real label <label for="[INPUT ID]">
• Labels can include help, required, error text
!!!
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
Forms
boldly go...The SCREEN READER
TRY ONE!! How else can you expect to build for one?
NVDA
VoiceOver TalkBack
JAWS
How do they work?• announce generated HTML in source
order
How do they work?• announce generated HTML in source
order
• Use keyboard to navigate and find content
• Highly customizable
Screen reader 101!
• 97.6% of screen reader users have JS enabled! 1
1 - WebAIM Survey http://bit.ly/1nqd4fp
HTML COUNTS!• Shortcuts drill down to headings,
landmarks, lists, links, etc
• 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
• 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!
• content “hidden” with opacity, z-index, height
• off-screen positioning (text-indent, top, left)
.sr-only,
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
* as seen in HTML5 BP, Twitter Bootstrap, etc. WebAIM Invisible Content http://bit.ly/1efaij8
• CSS clipping*
SR’s won’t ignore
Beyond the basicsThere’s gotta be more to screen readers than just that, right?
• 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
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">
Landmark RolesDefine 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
Landmark RolesDefine top-level page sections for easy navigation
!
•main ........ <main>
•banner ........ <header>
•navigation ........ <nav>
•search ........ <form> (search form)
•complimentary ........ <aside>
•contentinfo ........ <footer>
•form
Role HTML 5
Using Landmarks http://bit.ly/1aKyuyQ WebAIM Landmarks http://bit.ly/1aKytem
Include all content in a landmark
wrapper elements with role="landmark"
Widget RolesSemantic meaning to your custom components
• tooltip
• slider
• dialog
• tab
• progressbar
• combobox
• menu
• alert
.. and many more!
???
<ul class="tab-controls"> <li> <a href="#first-tab" class="current-item">Panel 1</a> </li> <li> <a href="#second-tab" class="current-item">Panel 2</a> </li> <li> <a href="#third-tab" class="current-item">Panel 3</a> </li> </ul> <div id="tab-container"> <div class="tab-panel" id="first-tab"> <div class="tab-contents"> <p>Tab Contents</p> </div> </div> <div class="tab-panel" id="second-tab"> <div class="tab-contents"> <p>Tab Contents</p> </div> </div> <div class="tab-panel" id="third-tab"> <div class="tab-contents"> <p>Tab Contents</p> </div> </div> </div>
???
<ul class="tab-controls"> <li> <a href="#first-tab" class="current-item">Panel 1</a> </li> <li> <a href="#second-tab" class="current-item">Panel 2</a> </li> <li> <a href="#third-tab" class="current-item">Panel 3</a> </li> </ul> <div id="tab-container"> <div class="tab-panel" id="first-tab"> <div class="tab-contents"> <p>Tab Contents</p> </div> </div> <div class="tab-panel" id="second-tab"> <div class="tab-contents"> <p>Tab Contents</p> </div> </div> <div class="tab-panel" id="third-tab"> <div class="tab-contents"> <p>Tab Contents</p> </div> </div> </div>
<ul class="tab-controls" role="tablist"> <li> <a href="#first-tab" class="current-item" role="tab">Panel 1</a> !<div id="tab-container"> <div class="tab-panel" id="first-tab" role="tab-panel">
• 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" >
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
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>
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
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
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
ARIA ResourcesW3C 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
Testing
Automated Tools• WebAIM WAVE (FF) http://wave.webaim.org/toolbar/
• Accessibility Developer Tools (Chrome) http://bit.ly/1fW0W0A
• Web Developer Toolbar (Chrome & FF) http://bit.ly/1dA2JmY
• Quail Project quailjs.org
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 ?
Unsolicited Advice• Start small, there’s still a big impact
• Prioritize areas/pages
• main navigation? • contact us form? • homepage?
• Document as you go
Final Thoughts
What I’ve learned• Bake it in, don’t tack it on
• Awesome and helpful community
• You may find it hard to stop
Behind all these checklists, rules, and regulations, there are people just trying
to use your site.
So make it useable, for everybody.
Thanks!@monsika
More Resources
More ResourcesGeneral 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
Community & Blogs@webaim
@paciellogroup
@stevefaulkner
@dequesystems
!www.webaim.org www.a11yproject.com www.accessibleculture.org www.webaxe.org www.simplyaccessible.com/archives !an `a11y` meetup near you! http://bit.ly/1bhN3dW