Accessibility - A feature you can build

5,196 views
4,946 views

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 accessibility so we can weave it in to applications today.

Published in: Technology

Accessibility - A feature you can build

  1. 1. Accessibility (a11y) A feature you can build jQuery San Diego 2014 Monika Piotrowicz (@monsika)
  2. 2. Monika Piotrowicz Front End Web Developer Shopify @monsika @shopify
  3. 3. I’m just... A regular Front End Developer...
  4. 4. So how’d I get here? A short story, starring WCAG 2.0 AA
  5. 5. Today • Introduction to accessibility • Techniques you can implement today • Introduction to screen readers & ARIA • Testing tips
  6. 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. 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. 8. Me last year...
  9. 9. Go!
  10. 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. 11. Accessibility != just a checklist
  12. 12. Starting out Early accessibility considerations
  13. 13. First Steps • functional keyboard-only • fallbacks for visual information • well-functioning forms
  14. 14. Keyboard Strategy • obvious focus states (keep those outlines!)
  15. 15. a, a:focus { outline: none; outline: 0; }
  16. 16. Keyboard Strategy ✓ obvious focus states (keep those outlines!) • fallbacks for :hover & click() ↳ :focus & keydown()
  17. 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. 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. 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. 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. 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. 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. 23. Red-Green Colorblind (Deuteranopia)
  24. 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. 25. Forms • Every form field includes a real label <label for="[INPUT ID]">
  26. 26. Forms ✓ Every form field includes a real label <label for="[INPUT ID]"> • Labels can include help, required, error text
  27. 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. 28. boldly go... The SCREEN READER
  29. 29. VoiceOver TalkBack TRY ONE!! How else can you expect to build for one? NVDA JAWS
  30. 30. How do they work? • announce generated HTML in source order
  31. 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. 32. HTML COUNTS! headings, • Shortcuts drill down toetc landmarks, lists, links,
  33. 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. 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. 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. 36. Beyond the basics There’s gotta be more to screen readers than just that, right?
  37. 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. 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. 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. 40. wrapper elements with role="landmark" Include all content in a landmark
  41. 41. Widget Roles Semantic meaning to your custom components • tooltip • slider • dialog • tab • progressbar • combobox • menu • alert .. and many more!
  42. 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. 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. 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. 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. 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. 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. 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. 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. 50. Testing
  51. 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. 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. 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. 54. Final Thoughts
  55. 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. 56. Behind all these checklists, rules, and regulations, there are people just trying to use your site. So make it useable, for everybody.
  57. 57. Thanks! @monsika @shopify
  58. 58. More Resources
  59. 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. 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

×