Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

A Primer on Web Accessibility for Teams

234 vues

Publié le

My slides from a presentation given to Code for Philly on June 6, 2017. These slides contain useful information on accessible web development for all technologists, but with a focus on developers.

Publié dans : Technologie
  • Soyez le premier à commenter

A Primer on Web Accessibility for Teams

  1. 1. A Primer on Web Accessibility for Teams June 6, 2017 Code for Philly
  2. 2. A PRIMER ON WEB ACCESSIBILITY FOR TEAMS Introduction About Me UI Developer at Think Company User Acceptance Tester at Comcast (Left: photo of me with long hair, caption: UX; Right: photo of me with fresh haircut, caption: UI) Who Is This Talk For Web professionals Those who want to design better experiences People interested in including everyone Organizations interested in accessibility advocacy, design, development and testing
  3. 3. Overview Why accessibility? Who is our audience? What are some common concerns? How do we get involved?
  4. 4. Why accessibility? A Primer on Web Accessibility for Teams
  5. 5. Why accessibility? Prevent legal action Better code and technology Reach more customers It’s the right thing to do
  6. 6. Who is our audience? A Primer on Web Accessibility for Teams
  7. 7. Who is our audience? Visual Auditory Motor and Mobility Cognitive
  8. 8. A PRIMER ON WEB ACCESSIBILITY FOR TEAMS
  9. 9. A PRIMER ON WEB ACCESSIBILITY FOR TEAMS Assistive Technology
  10. 10. A PRIMER ON WEB ACCESSIBILITY FOR TEAMS Assistive Technology, Continued
  11. 11. What are some common concerns? A Primer on Web Accessibility for Teams
  12. 12. Keyboard Navigation A PRIMER ON WEB ACCESSIBILITY FOR TEAMS Common Concerns in Web Accessiblity Conveying Information Proper HTML form elements and labels Logical heading structure Unlabeled elements in native applications Use of Color Use of only color to convey information Sufficient color contrast No keyboard support Focus management Visual focus indicator or focus ring “Skip to”/in-page links Single page application routing Alternatives to Multimedia Closed Captioning Video Descriptions ALT attributes for images Transcriptions
  13. 13. How do we get involved? A Primer on Web Accessibility for Teams
  14. 14. How do we get involved? Business Design/UX Developers QA Testers
  15. 15. A PRIMER ON WEB ACCESSIBILITY FOR TEAMS How do we get involved? Business Make accessibility a business case and priority Make sure everyone gets accessibility training Require accessibility in your company’s definition of “Done” Look at accessibility history in the organization and make recommendations Conduct user testing with real people/evaluate product with user studies Develop internal accessibility standards Design/UX Identify critical/secondary user journeys to help scope accessibility work Consider accessibility and assistive technology when designing Include people with disabilities in personas Annotate wireframes with accessible labels/announcements Think about multiple ways to interact with UI and convey information Ensure proper color contrast Define a logical tab order Include visual focus ring in guidelines
  16. 16. A PRIMER ON WEB ACCESSIBILITY FOR TEAMS How do we get involved? Development Include accessibility from the beginning Develop according to latest web standards and use native elements Implement logical tab order Manage focus properly, ensure visibility Ensure and apply keyboard support Use ARIA roles and attributes as needed Properly label elements Use automated testing tools, help QA QA Test with keyboard Test and use assistive technology Write accessibility test cases Use testing tools
  17. 17. A PRIMER ON WEB ACCESSIBILITY FOR TEAMS Web Content Accessibility Guidelines (WCAG) The WCAG documents explain how to make web content more accessible to people with disabilities. Web "content" generally refers to the information in a web page or web application, including: natural information such as text, images, and sounds code or markup that defines structure, presentation, etc.
  18. 18. A PRIMER ON WEB ACCESSIBILITY FOR TEAMS Who WCAG is for? WCAG is primarily intended for: Web content developers (page authors, site designers, etc.) Web authoring tool developers Web accessibility evaluation tool developers Others who want or need a standard for web accessibility, including for mobile accessibility Related resources are intended to meet the needs of many different people, including policy makers, managers, researchers, and others. WCAG is a technical standard, not an introduction to accessibility.
  19. 19. Proper Color Contrast WCAG 2.0 level AA requires a contrast ratio of 4.5:1 for normal text and 3:1 for large text. Level AAA requires a contrast ratio of 7:1 for normal text and 4.5:1 for large text. Large text is defined as 14 point (typically 18.66px) and bold or larger, or 18 point (typically 24px) or larger. Be careful of: thin text, translucent UI A PRIMER ON WEB ACCESSIBILITY FOR TEAMS
  20. 20. Proper Color Contrast WCAG 2.0 level AA requires a contrast ratio of 4.5:1 for normal text and 3:1 for large text. Level AAA requires a contrast ratio of 7:1 for normal text and 4.5:1 for large text. Large text is defined as 14 point (typically 18.66px) and bold or larger, or 18 point (typically 24px) or larger. Be careful of: thin text, translucent UI A PRIMER ON WEB ACCESSIBILITY FOR TEAMS
  21. 21. A PRIMER ON WEB ACCESSIBILITY FOR TEAMS Tab Order
  22. 22. A PRIMER ON WEB ACCESSIBILITY FOR TEAMS Managing Focus
  23. 23. A PRIMER ON WEB ACCESSIBILITY FOR TEAMS Managing Focus
  24. 24. Visual Focus or Focus Rings outline: none; A PRIMER ON WEB ACCESSIBILITY FOR TEAMS
  25. 25. Focus Ring Examples A PRIMER ON WEB ACCESSIBILITY FOR TEAMS
  26. 26. Focus Ring Examples A PRIMER ON WEB ACCESSIBILITY FOR TEAMS
  27. 27. A PRIMER ON WEB ACCESSIBILITY FOR TEAMS WAI-ARIA Web Accessibility Initiative Accessible Rich Internet Applications Use sparingly For retrofitting old code When HTML isn’t enough
  28. 28. A PRIMER ON WEB ACCESSIBILITY FOR TEAMS Common ARIA Examples role=”dialog” Defines understanding, helps user know context, screen readers behaves accordingly. aria-hidden=”true” Hide content from screen readers, similar to display: none; but only hides from screen reader. aria-describedby=”errorMsg” Used to indicate the IDs of the element that describe the object. Useful for errors. aria-expanded=”true” Announces the expanded or collapsed state. Useful for accordions and other expandable content.
  29. 29. A PRIMER ON WEB ACCESSIBILITY FOR TEAMS Advanced ARIA Patterns The following patterns would involve the use of JavaScript and knowledge of appropriate ARIA tags to use. Lots more at the WAI-ARIA Authoring Practices Guide. (They list a bunch of UI patterns and the expected keyboard support.) Carousels Dropdowns (aka Combo Boxes) Mobile menu drawers Single page application announcements Custom web components Date pickers Modals Modal windows Tooltips Chat windows Loading messages and toasts Media players Autocomplete/type ahead
  30. 30. There is very literally, the <label> element. Control must be a child of <label> or targeted by an IDRef using the label’s for=”” attribute. Only works with native form elements. (Which is why it’s always helpful to use native elements.) How to Label Elements: <label> A PRIMER ON WEB ACCESSIBILITY FOR TEAMS <label> First name: <input type="text" /> </label> A screen reader would say, “First name, edit text”
  31. 31. aria-label attribute A string to be used as the accessible label. Overrides any other native labeling mechanism. How to Label Elements: aria-label A PRIMER ON WEB ACCESSIBILITY FOR TEAMS <button id=”hamburger” aria-label=”Main Menu”> </button> A screen reader would say, “Main menu, button”
  32. 32. aria-labelledby A reference to an element (or elements) which will act as an accessible label. Overrides any other labeling mechanism including aria-label. How to Label Elements: aria-labelledby A PRIMER ON WEB ACCESSIBILITY FOR TEAMS <h2 id=”lbl”>Triple Play Offers</h2> <button id=”btn” aria-labelledby=”lbl btn”> Shop Now </button> A screen reader would say, “Triple Play Offers, Shop Now, Button”
  33. 33. Off screen text is tried and true, sometimes necessary. What do I mean by offscreen? How to Label Elements: Off Screen Text A PRIMER ON WEB ACCESSIBILITY FOR TEAMS A screen reader would say, “Change location, button” “Location” is visibly using this CSS: position: absolute!important; display: block; visibility: visible; overflow: hidden; width: .063rem; height: .063rem; margin: -.063rem; border: 0; padding: 0; clip: rect(0 0 0 0);
  34. 34. ALT tags are also tried and true, but they need to be used effectively. Don’t simply duplicate text that’s already on screen, a screen reader user would hear it twice. How to Label Elements: Image ALT Tags A PRIMER ON WEB ACCESSIBILITY FOR TEAMS mY SiTe iS aCesSibLe I uSeD aLt TaGs <img src=”spongebob.jpg” alt=”mY SiTe iS aCesSibLe I uSeD aLt TaGs” /> <h2>mY SiTe iS aCesSibLe I uSeD aLt TaGs</h2> A screen reader would say, “graphic, mY SiTe iS aCesSibLe I uSeD aLt TaGs” “mY SiTe iS aCesSibLe I uSeD aLt TaGs, heading level 2”
  35. 35. A PRIMER ON WEB ACCESSIBILITY FOR TEAMS Just Use Native Elements It’s best to use native input types such as button, checkbox, radio and other native elements such as select rather than create your own. Why? Natively focusable, great keyboard support, custom controls need work to bring them up to parity. <ul> and <li> vs. <select> and <option>
  36. 36. A PRIMER ON WEB ACCESSIBILITY FOR TEAMS Just Use Native Elements, The Curious Case of Buttons <div class=”menu-btn”></div> By default: Non-focusable/tabbable No keyboard support for activation Does not announce properly to screen reader
  37. 37. A PRIMER ON WEB ACCESSIBILITY FOR TEAMS Just Use Native Elements, The Curious Case of Buttons <button class=”menu-btn”></button> By default: Still styleable with CSS Focusable, tabbable Full keyboard support, Spacebar/Enter Announces properly to screen reader as “button” Click handler activation, Spacebar/Enter run click handler
  38. 38. A PRIMER ON WEB ACCESSIBILITY FOR TEAMS Just Use Native Elements, Continued In your designs, consider using pre-existing HTML elements and patterns instead of creating interactions that will be really odd for assistive tech to use. It’s sometimes unavoidable but if you’re in the position of having to build it, do the best you can and consider the impact assistive technology. Examples: Dropdowns whose options have checkboxes Tooltips with actionable elements (not a tooltip anymore) Checkboxes that expand and collapse content
  39. 39. Manual Screen Reader Testing A PRIMER ON WEB ACCESSIBILITY FOR TEAMS Tools for Testing and Development Online Checkers and APIs W3C Validator WebAIM WAVE (Web A11y Evaluation Tool) Tenon Deque aXe (Browser Extension) Readable.io and Juicy Studio: Readability Test Color Contrast Checkers WebAIM: Color Contrast Checker Colour Contrast Analyser (CCA) by Paciello Group Contrast Ratio by Lea Verou Color Contrast Analyzer (Chrome Extension) Contrast Ratio Checker (Chrome Extension) Contrast Grid NVDA (NonVisual Desktop Access) (with Firefox) JAWS Screen Reader (with IE, Edge incompatible) VoiceOver (primarily iOS, also available on macOS) TalkBack (Android) (Don’t use ChromeVox) Switch Access AbleNet Switches (such as the Blue2) iOS Switch Control Android Switch Access
  40. 40. A PRIMER ON WEB ACCESSIBILITY FOR TEAMS Color Contrast Tool Examples: Color Contrast Analyzer
  41. 41. A PRIMER ON WEB ACCESSIBILITY FOR TEAMS Color Contrast Tool Examples: CCA by The Paciello Group
  42. 42. A PRIMER ON WEB ACCESSIBILITY FOR TEAMS Color Contrast Tool Examples: Contrast Ratio by Lea Verou
  43. 43. A PRIMER ON WEB ACCESSIBILITY FOR TEAMS Color Contrast Tool Examples: Contrast Grid by Eight Shapes
  44. 44. A PRIMER ON WEB ACCESSIBILITY FOR TEAMS Training Resources Web Accessibility by Google Udacity Course (FREE two week course): https://www.udacity.com/course/web- accessibility--ud891 Google Web Fundamentals https://developers.google.com/web/fundamentals/accessibility/ Material Design: Accessibility Guidelines https://material.io/guidelines/usability/accessibility.html WebAIM Checklist http://webaim.org/standards/wcag/checklist Vox Media Accessibility Guidelines http://accessibility.voxmedia.com/ WAI-ARIA Authoring Practices https://www.w3.org/TR/wai-aria-practices-1.1/ Comcast Accessible Code Library http://haltersweb.github.io/Accessibility/
  45. 45. In Conclusion Empathize with others Consider who we might be forgetting Look into available tools Research and evaluate high priority concerns Get everyone involved
  46. 46. A PRIMER ON WEB ACCESSIBILITY FOR TEAMS Upcoming Events June 9, 2017 - Inclusive Design 24 (#ID24) - http://www.inclusivedesign24.org June 18, 2017 - LipSync Buildathon at NextFab - https://nextfab.com/event/lipsync-buildathon June 29, 2017 - DesignBrew: UX & Color Blindness - https://www.meetup.com/DesignBrew Follow the Following Accessibility at Google, Amazon, Microsoft Accessibility companies such as Paciello Group, Deque Systems, SSB BART Group (Level Access), Tenon, AbleGamers, Knowibility, NV Access, Freedom Scientific Conferences such as CSUNATC, AccessU, M-Enabling Local organizations Deaf Hearing Communication Center, Philly Accessibility Forum Hashtags: #GAAD, #a11y, #accessibility, #WCAG, #techInColor, #SoEveryoneCanGame Join the Web a11y Slack! http://web-a11y.slack.com
  47. 47. As designers, we disable people when we don’t get it right. “ -Jamie Knight Senior Accessibility Specialist at BBC
  48. 48. Thank You @mikeyil / @thinkcompany / @codeforphilly
  49. 49. A PRIMER ON WEB ACCESSIBILITY FOR TEAMS Screen Reader Demo: Setup In mobile Safari or Chrome, navigate to: www.bbc.com
  50. 50. A PRIMER ON WEB ACCESSIBILITY FOR TEAMS Screen Reader Demo: Setup Android Turn on TalkBack: Settings > Accessibility > TalkBack > Toggle On For Samsung users without TalkBack installed: Settings > Accessibility > Vision > Voice Assistant > Toggle On Pause TalkBack at any time by holding both Volume keys at the same time. iOS Turn on VoiceOver: Settings > General > Accessibility > VoiceOver > Toggle On Turn on Accessibility Shortcut: Settings > General > Accessibility > Accessibility Shortcut OR Just ask Siri to turn it on VoiceOver
  51. 51. A PRIMER ON WEB ACCESSIBILITY FOR TEAMS Screen Reader Demo: Navigating and Activating Mobile screen readers provide spoken feedback for the user interface. This allows the visually impaired to use a smartphone or tablet without any tactile feedback. There are two primary ways of moving around: “Swiping” or “Flicking” (Quick horizontal motion) Explore by Touch (Press and drag finger across screen) What normally would’ve been a single tab before is now: A double tap!

×