Your SlideShare is downloading. ×
Accessibility - A feature you can build
Accessibility - A feature you can build
Accessibility - A feature you can build
Accessibility - A feature you can build
Accessibility - A feature you can build
Accessibility - A feature you can build
Accessibility - A feature you can build
Accessibility - A feature you can build
Accessibility - A feature you can build
Accessibility - A feature you can build
Accessibility - A feature you can build
Accessibility - A feature you can build
Accessibility - A feature you can build
Accessibility - A feature you can build
Accessibility - A feature you can build
Accessibility - A feature you can build
Accessibility - A feature you can build
Accessibility - A feature you can build
Accessibility - A feature you can build
Accessibility - A feature you can build
Accessibility - A feature you can build
Accessibility - A feature you can build
Accessibility - A feature you can build
Accessibility - A feature you can build
Accessibility - A feature you can build
Accessibility - A feature you can build
Accessibility - A feature you can build
Accessibility - A feature you can build
Accessibility - A feature you can build
Accessibility - A feature you can build
Accessibility - A feature you can build
Accessibility - A feature you can build
Accessibility - A feature you can build
Accessibility - A feature you can build
Accessibility - A feature you can build
Accessibility - A feature you can build
Accessibility - A feature you can build
Accessibility - A feature you can build
Accessibility - A feature you can build
Accessibility - A feature you can build
Accessibility - A feature you can build
Accessibility - A feature you can build
Accessibility - A feature you can build
Accessibility - A feature you can build
Accessibility - A feature you can build
Accessibility - A feature you can build
Accessibility - A feature you can build
Accessibility - A feature you can build
Accessibility - A feature you can build
Accessibility - A feature you can build
Accessibility - A feature you can build
Accessibility - A feature you can build
Accessibility - A feature you can build
Accessibility - A feature you can build
Accessibility - A feature you can build
Accessibility - A feature you can build
Accessibility - A feature you can build
Accessibility - A feature you can build
Accessibility - A feature you can build
Accessibility - A feature you can build
Accessibility - A feature you can build
Accessibility - A feature you can build
Accessibility - A feature you can build
Accessibility - A feature you can build
Accessibility - A feature you can build
Accessibility - A feature you can build
Accessibility - A feature you can build
Accessibility - A feature you can build
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Accessibility - A feature you can build

2,709

Published on

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 …

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.

Published in: Technology
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,709
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
6
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Accessibility (a11y) A feature you can build jQuery San Diego 2014 Monika Piotrowicz (@monsika)
  • 2. Monika Piotrowicz Front End Web Developer Shopify @monsika @shopify
  • 3. I’m just... A regular Front End Developer...
  • 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
  • 8. Me last year...
  • 9. Go!
  • 10. WCAG The 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
  • 11. Accessibility != just a checklist
  • 12. Starting out Early accessibility considerations
  • 13. First Steps • functional keyboard-only • fallbacks for visual information • well-functioning forms
  • 14. Keyboard Strategy • obvious focus states (keep those outlines!)
  • 15. a, a:focus { outline: none; outline: 0; }
  • 16. Keyboard Strategy ✓ obvious focus states (keep those outlines!) • fallbacks for :hover & click() ↳ :focus & keydown()
  • 17. Keyboard Strategy ✓ obvious focus states (keep those outlines!) ✓ fallbacks for :hover & click() ↳ :focus & keydown() • add tabIndex=0 & key events to non-focusable elements
  • 18. 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
  • 19. 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
  • 20. 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
  • 21. 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
  • 22. 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
  • 23. Red-Green Colorblind (Deuteranopia)
  • 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 ✓ 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
  • 25. Forms • Every form field includes a real label <label for="[INPUT ID]">
  • 26. Forms ✓ Every form field includes a real label <label for="[INPUT ID]"> • Labels can include help, required, error text
  • 27. 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
  • 28. boldly go... The SCREEN READER
  • 29. VoiceOver TalkBack TRY ONE!! How else can you expect to build for one? NVDA JAWS
  • 30. How do they work? • announce generated HTML in source order
  • 31. Screen reader 101 • • Use keyboard to navigate and find content 98.6% of screen reader users have JS enabled!1 • Highly customizable 1 - WebAIM Survey http://bit.ly/1aKvVgp
  • 32. HTML COUNTS! headings, • Shortcuts drill down toetc landmarks, lists, links,
  • 33. 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
  • 34. 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
  • 35. SR’s won’t ignore • • • content “hidden” with opacity, z-index, height off-screen positioning (text-indent, top, left) CSS clipping* .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
  • 36. Beyond the basics There’s gotta be more to screen readers than just that, right?
  • 37. 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
  • 38. 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">
  • 39. 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>
  • 40. wrapper elements with role="landmark" Include all content in a landmark
  • 41. Widget Roles Semantic meaning to your custom components • tooltip • slider • dialog • tab • progressbar • combobox • menu • alert .. and many more!
  • 42. <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"> <ul class="tab-controls" role="tablist"> <div class="tab-contents"> <li> <p>Tab Contents</p> </div> <a href="#first-tab" class="current</div> item" role="tab">Panel 1</a> <div class="tab-panel" id="second-tab"> <div class="tab-contents"> <div id="tab-container"> <p>Tab Contents</p> </div> <div class="tab-panel" id="first-tab" </div> role="tab-panel"> <div class="tab-panel" id="third-tab"> <div class="tab-contents"> <p>Tab Contents</p> </div> </div> </div> ???
  • 43. 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">
  • 44. 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
  • 45. 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>
  • 46. 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"); }
  • 47. 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
  • 48. 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
  • 49. 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
  • 50. Testing
  • 51. 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 http://quailjs.org/sprint/
  • 52. 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
  • 53. Unsolicited Advice • Start small, there’s still a big impact • Prioritize areas/pages • • • main navigation? contact us form? homepage? • Document as you go
  • 54. Final Thoughts
  • 55. What I’ve learned • Bake it in, don’t tack it on • Awesome and helpful community • You may find it hard to stop...
  • 56. Behind all these checklists, rules, and regulations, there are people just trying to use your site. So make it useable, for everybody.
  • 57. Thanks! @monsika @shopify
  • 58. More Resources
  • 59. 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
  • 60. 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

×