Your SlideShare is downloading. ×
0
a11yTO - Web Accessibility for Developers
a11yTO - Web Accessibility for Developers
a11yTO - Web Accessibility for Developers
a11yTO - Web Accessibility for Developers
a11yTO - Web Accessibility for Developers
a11yTO - Web Accessibility for Developers
a11yTO - Web Accessibility for Developers
a11yTO - Web Accessibility for Developers
a11yTO - Web Accessibility for Developers
a11yTO - Web Accessibility for Developers
a11yTO - Web Accessibility for Developers
a11yTO - Web Accessibility for Developers
a11yTO - Web Accessibility for Developers
a11yTO - Web Accessibility for Developers
a11yTO - Web Accessibility for Developers
a11yTO - Web Accessibility for Developers
a11yTO - Web Accessibility for Developers
a11yTO - Web Accessibility for Developers
a11yTO - Web Accessibility for Developers
a11yTO - Web Accessibility for Developers
a11yTO - Web Accessibility for Developers
a11yTO - Web Accessibility for Developers
a11yTO - Web Accessibility for Developers
a11yTO - Web Accessibility for Developers
a11yTO - Web Accessibility for Developers
a11yTO - Web Accessibility for Developers
a11yTO - Web Accessibility for Developers
a11yTO - Web Accessibility for Developers
a11yTO - Web Accessibility for Developers
a11yTO - Web Accessibility for Developers
a11yTO - Web Accessibility for Developers
a11yTO - Web Accessibility for Developers
a11yTO - Web Accessibility for Developers
a11yTO - Web Accessibility for Developers
a11yTO - Web Accessibility for Developers
a11yTO - Web Accessibility for Developers
a11yTO - Web Accessibility for Developers
a11yTO - Web Accessibility for Developers
a11yTO - Web Accessibility for Developers
a11yTO - Web Accessibility for Developers
a11yTO - Web Accessibility for Developers
a11yTO - Web Accessibility for Developers
a11yTO - Web Accessibility for Developers
a11yTO - Web Accessibility for Developers
a11yTO - Web Accessibility for Developers
a11yTO - Web Accessibility for Developers
a11yTO - Web Accessibility for Developers
a11yTO - Web Accessibility for Developers
a11yTO - Web Accessibility for Developers
a11yTO - Web Accessibility for Developers
a11yTO - Web Accessibility for Developers
a11yTO - Web Accessibility for Developers
a11yTO - Web Accessibility for Developers
a11yTO - Web Accessibility for Developers
a11yTO - Web Accessibility for Developers
a11yTO - Web Accessibility for Developers
a11yTO - Web Accessibility for Developers
a11yTO - Web Accessibility for Developers
a11yTO - Web Accessibility for Developers
a11yTO - Web Accessibility for Developers
a11yTO - Web Accessibility for Developers
a11yTO - Web Accessibility for Developers
a11yTO - Web Accessibility for Developers
a11yTO - Web Accessibility for Developers
a11yTO - Web Accessibility for Developers
a11yTO - Web Accessibility for Developers
a11yTO - Web Accessibility for Developers
a11yTO - Web Accessibility for Developers
a11yTO - Web Accessibility for Developers
a11yTO - Web Accessibility for Developers
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

a11yTO - Web Accessibility for Developers

613

Published on

Presented at Toronto Accessibility & Inclusive Design, April 30 2014

Presented at Toronto Accessibility & Inclusive Design, April 30 2014

Published in: Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
613
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
11
Comments
0
Likes
1
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. Web Accessibility for Developers a11yTO April 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. 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
  • 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!) • keypress equivalents for :hover & click() ↳ :focus & keydown()
  • 17. Keyboard Strategy ✓ obvious focus states (keep those outlines!) ✓ keypress equivalents for :hover & click() ↳ :focus & keydown() • add tabIndex=0 & key events to non-focusable elements
  • 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 • avoid keyboard traps & wasting time
  • 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 • 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 • 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
  • 22. 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
  • 23. Red-Green Colorblind (Deuteranopia)
  • 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 • 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. • Every form field includes a real label <label for="[INPUT ID]"> ! ! Forms
  • 26. ✓ Every form field includes a real label <label for="[INPUT ID]"> • Labels can include help, required, error text ! ! ! Forms
  • 27. ✓ 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
  • 28. boldly go... The SCREEN READER
  • 29. TRY ONE!! How else can you expect to build for one? NVDA VoiceOver TalkBack JAWS
  • 30. How do they work? • announce generated HTML in source order
  • 31. How do they work? • announce generated HTML in source order
  • 32. • 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
  • 33. HTML COUNTS! • Shortcuts drill down to headings, landmarks, lists, links, etc
  • 34. • 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
  • 35. • 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!
  • 36. • 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
  • 37. Beyond the basics There’s gotta be more to screen readers than just that, right?
  • 38. • 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
  • 39. 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">
  • 40. 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
  • 41. Landmark Roles Define 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
  • 42. Include all content in a landmark wrapper elements with role="landmark"
  • 43. Widget Roles Semantic meaning to your custom components •tooltip •slider •dialog •tab •progressbar •combobox •menu •alert .. and many more!
  • 44. ??? <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>
  • 45. ??? <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">
  • 46. • 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" >
  • 47. 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
  • 48. 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>
  • 49. 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
  • 50. 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
  • 51. 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
  • 52. 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
  • 53. Testing
  • 54. 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
  • 55. 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 ?
  • 56. Unsolicited Advice • Start small, there’s still a big impact • Prioritize areas/pages • main navigation? • contact us form? • homepage? • Document as you go
  • 57. Final Thoughts
  • 58. What I’ve learned • Bake it in, don’t tack it on • Awesome and helpful community • You may find it hard to stop
  • 59. Behind all these checklists, rules, and regulations, there are people just trying to use your site. So make it useable, for everybody.
  • 60. Thanks! @monsika
  • 61. More Resources
  • 62. 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
  • 63. 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

×