Open and Accessible UI

1,390 views
1,303 views

Published on

From Flourish 2009 conference in Chicago (http://flourishconf.com). Discussing the value of accessibility and universality for web UIs.

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

No Downloads
Views
Total views
1,390
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
23
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Open and Accessible UI

  1. 1. Open and Accessible Mark Meeker
  2. 2. About Me Now... Previously...
  3. 3. Barriers “The Sum of Human Knowledge” Image Source: http://en.wikipedia.org/wiki/Britannica
  4. 4. NEW v Barriers “The Sum of Human Knowledge”
  5. 5. “ The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.” - Tim Berners-Lee
  6. 6. “Browsers are the most hostile software engineering environment possible” - Douglas Crockford
  7. 7. http://churchcrunch.com/2009/01/25/above-the-fold-make-it-count/
  8. 8. Users will never use your site in the way you expect them to.
  9. 9. Barriers http://www.flickr.com/photos/goldfishsnaps/2830876853/
  10. 10. Disabilities • Blind, low vision • color blindness • Limited mobility • Deaf, hearing impaired
  11. 11. Old Technology Release date: August 27, 2001
  12. 12. Accessibility Universality
  13. 13. Usability
  14. 14. Solutions http://www.flickr.com/photos/82046831@N00/514212023/
  15. 15. W3C - WCAG 2.0
  16. 16. Semantic Markup • Use the HTML elements the way they were intended. • There are 91. How many can you name? • http://www.oneplusyou.com/bb/html_quiz
  17. 17. Progressive Enhancement • Separate HTML from CSS from JavaScript. • No in-line style or onclick attributes http://www.alistapart.com/articles/understandingprogressiveenhancement
  18. 18. Graded Browser Support • Not every browser is equal in capability. • Don’t serve what a browser can’t support. • Color TV versus Black and White TV • http://developer.yahoo.com/yui/articles/gbs/
  19. 19. Graded Browser Support http://developer.yahoo.com/yui/articles/gbs/
  20. 20. http://tv.yahoo.com
  21. 21. http://tv.yahoo.com
  22. 22. http://sa.watson.ibm.com
  23. 23. http://sa.watson.ibm.com
  24. 24. JavaScript Libraries
  25. 25. “As far as the customer is concerned, the interface is the product.” - Jef Raskin
  26. 26. Redundant Inputs
  27. 27. Redundant Inputs • Offer multiple input options • GUI input and keyboard input • Enhance visual cues with text-based cues • Look to desktop interfaces for patterns • Seek out CLI developers for testing
  28. 28. Redundant Inputs http://netflix.com
  29. 29. Redundant Inputs http://developer.yahoo.com/yui/examples/
  30. 30. Linearization
  31. 31. Linearization http://ebookers.com
  32. 32. Linearization State/ Zip/Postal Examples Province Code No Yes United Kingdom, France, Germany Drop Down Yes United States, Canada, Australia Input Yes No No Ireland
  33. 33. Linearization http://basecamphq.com
  34. 34. Focus
  35. 35. Focus <input> <div> vs. <a> <td> <button> <img>
  36. 36. Real Link? http://ebookers.com
  37. 37. Real Checkbox? http://amazon.com
  38. 38. Real Checkbox? 1 2 3 4 5 6 7 8 9 http://amazon.com
  39. 39. Real Checkbox? 123 456 789 http://amazon.com
  40. 40. Is that a button? http://apple.com
  41. 41. Where to Next? http://facebook.com
  42. 42. Updates
  43. 43. Updates http://finance.yahoo.com/
  44. 44. Updates http://finance.yahoo.com/
  45. 45. Set Focus on Update? http://orbitz.com
  46. 46. Set Focus on Update? <div id=”tripcost” tabindex=quot;-1quot;> // trip cost markup </div> onclick: document.getElementById('tripcost').focus();
  47. 47. Set Focus on Update? Screen Magnifiers?
  48. 48. http://apple.com
  49. 49. Ajax is Everywhere http://blaugh.com/2006/08/21/ajax-makes-everything-better/
  50. 50. Interaction Patterns • Filters • Rating Widgets • Transitions • Sliders • Auto-complete • Micro-content • Calendar Pickers • Auto-fill • Collapse • Expand / Collapse • Drag and Drop • Inline Validation • Lightboxes • Zoom • Yellow Fade • Navigation • Auto Update • Auto Refresh • Hover • Carrousel • Tabs • Inline edit
  51. 51. WAI-ARIA
  52. 52. Replicating the Desktop • <div> can be a button • <span> can be a slider • Need a better API • Leverage accessibility support in the OS
  53. 53. WAI - ARIA • W3C Web Accessibility Initiative Accessible Rich Internet Applications • Adds hooks into accessibility API of the platform • Define Roles and States so scripts can interact with AT APIs • http://www.w3.org/WAI/
  54. 54. Roles • link • application • combobox, options • presentation • checkbox • group • radio, radiogroup • grid, gridcell • button • tab, tablist, tabpanel • progressbar • list, listitem • slider • menu, menubar • spinbutton • toolbar • tree,treeitem • alert
  55. 55. States • checked • disabled • readonly • expanded • valuemin, valuemax, valuenow
  56. 56. ARIA <div role=quot;dialogquot; ... >
  57. 57. ARIA <div role=quot;dialogquot; ... >
  58. 58. ARIA <li role=quot;treeitemquot; aria-expanded=quot;truequot; ... >
  59. 59. ARIA <div role=quot;sliderquot; aria-valuemin=quot;1quot; aria-valuemax=quot;5quot; aria-valuenow=quot;1”>
  60. 60. ARIA <div role=quot;region” aria-live=”polite” ... >
  61. 61. Resources
  62. 62. Testing Just Ask: Integrating Accessibility Throughout Design Shawn Lawton Henry http://www.uiaccess.com/accessucd/
  63. 63. Testing http://developer.yahoo.com/yui/theater/
  64. 64. Assistive Technologies JAWS: Freedom Scientific Window-Eyes: GW Micro ZoomText: Ai Squared FireVox
  65. 65. Toolbars • Lists of headings • Text equivalents for images • Disable scripting, mouse events • Validation and testing tools • Zoom
  66. 66. Toolbars http://firefox.cita.uiuc.edu/ http://www.paciellogroup.com/resources/wat-ie-about.html http://www.paciellogroup.com/resources/wat-about.html
  67. 67. Color Contrast • Colour Analyzer: http://juicystudio.com/services/colourcontrast.php
  68. 68. “For most people, technology makes things easier. For people with disabilities, technology makes things possible.” - President’s Council on Disability
  69. 69. Questions?

×