Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

NoVA UX - Strategies for Accessibility - August 2013

1,107 views

Published on

Chris Merkel, Director of User Experience at The American Institute of Architects (AIA), gave a talk about strategies for addressing accessibility in the design process for websites and applications for desktop and mobile.

This was an interactive presentation : Chris took questions and threw challenges out to the audience, who came ready to put on their problem-solving hats and dug into exploring solutions for user experiences that are more readily accessible to everyone.

This meetup was sponsored by 3Pillar Global for dinner for this event, and beverages were provided by AddThis. Thanks!

Published in: Technology, Design
  • Be the first to comment

NoVA UX - Strategies for Accessibility - August 2013

  1. 1. Strategies for Accessibility NoVA UX Meetup A panel discussion by Chris Merkel Director of User Experience, The American Institute of Architects Agenda: • Introduction • Visual Perception • Navigation and Forms • People and Robots • Managing Focus • Review, Q&A
  2. 2. Strategies for Accessibility NoVA UX Meetup Agenda: • Introduction • Visual Perception • Navigation and Forms • People and Robots • Managing Focus • Review, Q&A
  3. 3. The American Institute of Architects Director of User Experience Computech, Inc. Design and UX Lead, FCC Licensing & Auctions Spikesource, Inc. UX Manager, Microsoft & Intel contracts Xerox Corporation, Creative Lead, Xerox.com & DocuShare Yahoo! Producer, Yahoo! Personals Who’s this Chris Merkel guy?
  4. 4. Disabled friends & veterans Corporate responsibility Personal fears: physical injury sight loss What matters to me?
  5. 5.  Changes in legal scope  Larger market share: 25.6 million  Prestige  (and angry mobs with torches) Why should it matter to you?
  6. 6. What is it? • 1997 update to an Amendment of the RehabilitationAct of 1973 How to meet it? • 16 provisions of Sub-part B, 1194.22* Who needs to meet it? • All federal agencies (with some exceptions*) • State and local agencies Who enforces it? • Each organization chooses the standards it wants to meet individually What’s “Section 508”? More official info: Section508.gov Complete, handy practical checklist: webaim.org/standards/508/checklist Official federal standards are listed at: section508.gov/index.cfm?fuseAction=stdsdoc
  7. 7. What is it? • Web Content Accessibility Guidelines from the W3C How to meet it? • 3 levels of conformance: A,AA,AAA • WCAG 1.0 created 1999 • WCAG 2.0 updated in 2008 Who needs to meet it? • Not required by law (yet) Who enforces it? • 3rd parties such as NFB • Private companies • DOJ may soon use WCAG What’s “WCAG”? * More info at w3.org/TR/WCAG20/ (2008) and w3.org/TR/WCAG10/ (1999)
  8. 8. Strategies for Accessibility NoVA UX Meetup, 14 Aug. 2013 Agenda: • Introduction • Visual Perception • Navigation and Forms • People and Robots • Managing Focus • Review, Q&A
  9. 9. In the U.S… Affects 1 in 12 25,121,794 8% of men 11,882,851 0.4% of women 611,703 Color Blindness
  10. 10. Delta: Full Color Vision
  11. 11. Delta: Red/Green Deficiency
  12. 12. Test in Adobe AI or PSD
  13. 13.  Color hue combinations  Brightness and contrast  Pattern, shapes, borders  Font families and weights Techniques for Color Blindness Full Color 2 types of Red/Green Blue/Yellow
  14. 14. Exercise 1 : Improve Delta.com Hot Not How would you improve this display for more vision types? 5 minutes.
  15. 15.  Keep proper contrast  Carefully manage colors which change the most (Yellow, Green, Red)  Highlight interactive thingies better  No “Tiny Text” and wimpy controls  View your UI on more screens & devices Visual Techniques
  16. 16. Strategies for Accessibility NoVA UX Meetup Agenda: • Introduction • Visual Perception • Navigation and Forms • People and Robots • Managing Focus • Review, Q&A
  17. 17. Mobility Disorders They Need Help to Reach That
  18. 18. Complete inability to use limbs Repetitive stress disorder Simple fatigue Mobility Challenges
  19. 19. x Hard to spot x Hard to click on X Hard to use Exercise 1 : Complex Controls How would you make these controls easier for everyone to use? 5 minutes. How would you improve these controls for the mobility impaired? 5 minutes.
  20. 20. Inability to use mouse actions: Cannot rely on : hover or onMouseOver Interact with elements out of order Click + Drag Instead, they: TAB and     arrow keys to navigate SPACE and ENTER to activate Keyboard Use
  21. 21. Twitter: Visual Focus
  22. 22. Facebook: Visual Focus
  23. 23.  Consider the TAB order  Surface intuitive directional and command keys, and common modifiers:     , Shift, Control, Escape  Use common HTML controls, then enhance progressively  Make :hover and :focus the same Keyboard Access Techniques
  24. 24. You, with the smartphone:  Inability to use :hover or onMouseOver  Difficulty with Click + Drag  Limited viewing area  Difficulty with lighting  Patchy attention span  Multimedia access Mobile Users
  25. 25. Exercise 1 : Keyboard Use How would you make this interaction more equal for everyone? 5 minutes. How would you improve interactions in this app for the disabled? 5 minutes.
  26. 26. Strategies for Accessibility NoVA UX Meetup Agenda: • Introduction • Visual Perception • Navigation and Forms • People and Robots • Managing Focus • Review, Q&A
  27. 27. Non-Visual Users Some People Can Only Hear the Web
  28. 28. Screen Readers Braille Printers Sightless User’s Devices Page Title: Accessibility Skip main navigation link List with six items... Introduction link... Barriers link... Assistive Technologies, and Alternative Access Strategies link... Accessibility in Law and Policy link... Designing accessible web sites link... Tools for accessibility link... Finding additional resources on Web accessibility link...
  29. 29. A “Soda Straw” Perception
  30. 30. A “Soda Straw” Perception
  31. 31. A “Soda Straw” Perception
  32. 32. A “Soda Straw” Perception
  33. 33. BROWSERS: IE 8: 43.1% Firefox 3+: 23.5% IE 7: 12.5% Safari: 9.6% Others: 11.4% (incl. IE6, 9, Chrome) SCREEN READERS: JAWS: 69.6% NVDA: 34.8% VoiceOver: 20.2% Window-Eyes: 19.0% Others: 29.7% (incl. SystemAccess & ZoomText) For Statistics Junkies 2009 to 2010
  34. 34. Dispatch.com
  35. 35. Dispatch.com: Headers & Links
  36. 36. Dispatch.com: Headers & Links Ongoing Stories, Heading Level 3 Ted Williams… Heading Level 2 Where we live… Heading Level 2
  37. 37.  Just like making an outline  Gives blind users a sense of a document’s contents and structure  Search engines will be better able to index your site with this grouping  This only works with real heading tags Headers
  38. 38. Do your links make sense by themselves? Links
  39. 39. Do your links make sense by themselves? Links
  40. 40. Do your links make sense by themselves? No one wants to… “Read more, read more, read more, read more, read more”, or; “Click here, click here, click here, click here, click here” Links
  41. 41. United.com: Visual Display
  42. 42. Same Site: No Images
  43. 43. <img src="logo-ymail-wh-beta.png" alt=“ " > <img src="logo-ymail-wh-beta.png" alt=“Home" > <img src="logo-ymail-wh-beta.png" alt="Yahoo! Mail" > <img src="logo-ymail-wh-beta.png" alt="Yahoo! Mail homepage" > What’s the Right Description?
  44. 44. You are designing for sightless users, or who cannot make use of images alone <img src="logo-ymail-wh-beta.png" id="ymail- image" alt="Yahoo! Mail" > 3 Types of Text Alternatives: 1. Blank: alt=“ ” for purely decorative images 2. Short: most common alternatives 3. Long: for very complex images, e.g. charts Images and ALT Tags
  45. 45. <table summary=“Items, quantity, an d description”> <caption>Equipment in stock</caption> <thead> <tr><th>Item</th></tr> </thead> <tbody> <tr><td>Cleats</td></tr> </tbody> Tables Equipment in stock
  46. 46. <ol> Ordered List <li> List Items <ul> Unordered List <li> List Items <dl> Definition List <dt> Definition Terms <dd> Definition Description (s) Types of Lists
  47. 47. Lists: Google Search Results List with 10 items… Out of list, List item one… Accessibility and Assistive Technology…
  48. 48. How to Emphasize Text? <em>Accessibility 2011</em>: Escape! | <em>Facebook</em>
  49. 49. Skip Links A different version of this web site containing similar content optimized for screen readers and mobile devices may be found at the web address www.amazon.com/access ... Link.
  50. 50. Document Landmark Roles article banner complementary contentinfo main navigation search Introduction to WAI ARIA banner main navigation contentinfo article article
  51. 51. Document Landmark Roles Introduction to WAI ARIA banner main navigation contentinfo article article <li role=“article“ > ... </li> <div role=“main“ > ... </div>
  52. 52. 1. Use real headings in an outline order 2. Include a text alternative for all images 3. Write intuitive linked text & commands 4. Construct tables properly 5. Give users ways to skip through content 6. Don’t rely on mouse interactions Non-Visual Techniques
  53. 53. Improve Twitter for Access How would you make this application more equal for everyone? 5-10 minutes. How would you improve Twitter for the disabled? 7 minutes.
  54. 54. Form Construction Making Pesky Forms Accessible
  55. 55. NORMAL READING  Speaks the content of an entire window  Most users skip through content via shortcut keys FORMS EDIT MODE  Turns on when focusing on a form control  Users then TAB from one field or control to another  They do not hear any text that is not part of a field Screen Reader Modes
  56. 56. All form fields need a label United.com: Field Labels
  57. 57. <label for="shipping-user- companyName" > <span>Company Name (optional)</span> </label> <input name="shipping-user- companyName" type="text" id="shipping-user- companyName" aria-label="Company Name (optional)" > Apple.com: Advanced Labels
  58. 58. Asterisks aren’t good enough • Add understandable text to form labels Use additional attributes: <input type="text" id="contactname“ name="contactname" size="30“ aria-required="true" > Mark Form Fields Required
  59. 59.  Make the form easy to find  Associate labels and instructions with all controls  Carefully manage page refreshes, focus, and error display  Number items in long forms with <OL>  Mark required fields in meaningful ways Form Construction Techniques
  60. 60. Your Best Friends are Blind Bing Google Android Voice or iOS Siri Desktop screen reader (e.g. JAWS)
  61. 61. Strategies for Accessibility NoVA UX Meetup Agenda: • Introduction • Visual Perception • Navigation and Forms • People and Robots • Managing Focus • Review, Q&A
  62. 62. Highlight & Announce Focus
  63. 63. Negative “tabindex” lets an element receive programmatic focus without getting in the way of TAB key <div id="progaccess" tabindex="-1" > ... </div> var objDiv = document.getElementById('progaccess'); // Focus on the element objDiv.focus(); TAB Order
  64. 64. ARIA Live Regions off: <ul aria-live="off" > … </ul> polite: <ul aria-live="polite" > … </ul> assertive: <ul aria-live="assertive" > … </ul> Handle Data Refresh with ARIA
  65. 65. Twitter: Page Changes
  66. 66. Twitter: Page Changes
  67. 67. Roles: application grid gridcell alert button States and properties: aria-labeledby aria-disabled aria-grabbed aria-dropeffect Announce States with ARIA
  68. 68.  Carefully manage page refresh & errors  Alert non-visual users to any changes  Ensure the proper focus in widgets and dialogs during user interaction  Keep keyboard commands in mind  Use libraries: YUI, jQuery UI, GWT, etc. Scripting Techniques
  69. 69. Strategies for Accessibility NoVA UX Meetup Agenda: • Introduction • Visual Perception • Navigation and Forms • People and Robots • Managing Focus • Review, Q&A
  70. 70. Visual Display  Test your color use  Highlightyour controls  No more “TinyText” Navigation  Use real headings  Links make sense alone Functionality  Test with more devices  Labelcarefully  Managefocus properly Content  Supplementcontrols with instructions Don’t assume that your users share your same abilities
  71. 71. Perceptible  Sight /not  Hearing/not  Touch/not Understandable  Meaningand context  Alternatives Operable  Interaction methods  Controlover time, focus  Error recovery Robust  Universalacross devices  Future-proofacross time P.O.U.R. it Out
  72. 72. Contact me anytime christophermerkel@yahoo.com | @merkelwerks

×