Open and Accessible UI
•
1 j'aime•759 vues
From Flourish 2009 conference in Chicago (http://flourishconf.com). Discussing the value of accessibility and universality for web UIs.
Recommandé
Recommandé
Contenu connexe
Tendances
Tendances (20)
En vedette
En vedette (20)
Similaire à Open and Accessible UI
Similaire à Open and Accessible UI (20)
Plus de Mark Meeker
Dernier
Dernier (20)
Open and Accessible UI
- 1. Open and Accessible Mark Meeker
- 3. Barriers “The Sum of Human Knowledge” Image Source: http://en.wikipedia.org/wiki/Britannica
- 4. NEW v Barriers “The Sum of Human Knowledge”
- 5. “ The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.” - Tim Berners-Lee
- 9. “Browsers are the most hostile software engineering environment possible” - Douglas Crockford
- 11. Users will never use your site in the way you expect them to.
- 12. Barriers http://www.flickr.com/photos/goldfishsnaps/2830876853/
- 13. Disabilities • Blind, low vision • color blindness • Limited mobility • Deaf, hearing impaired
- 15. Old Technology Release date: August 27, 2001
- 17. Usability
- 18. Solutions http://www.flickr.com/photos/82046831@N00/514212023/
- 19. W3C - WCAG 2.0
- 21. 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
- 22. Progressive Enhancement • Separate HTML from CSS from JavaScript. • No in-line style or onclick attributes http://www.alistapart.com/articles/understandingprogressiveenhancement
- 23. 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/
- 24. Graded Browser Support http://developer.yahoo.com/yui/articles/gbs/
- 30. “As far as the customer is concerned, the interface is the product.” - Jef Raskin
- 31. Redundant Inputs
- 32. 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
- 33. Redundant Inputs http://netflix.com
- 34. Redundant Inputs http://developer.yahoo.com/yui/examples/
- 35. Linearization
- 36. Linearization http://ebookers.com
- 37. 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
- 38. Linearization http://basecamphq.com
- 39. Focus
- 40. Focus <input> <div> vs. <a> <td> <button> <img>
- 41. Real Link? http://ebookers.com
- 42. Real Checkbox? http://amazon.com
- 43. Real Checkbox? 1 2 3 4 5 6 7 8 9 http://amazon.com
- 44. Real Checkbox? 123 456 789 http://amazon.com
- 45. Is that a button? http://apple.com
- 46. Where to Next? http://facebook.com
- 47. Updates
- 48. Updates http://finance.yahoo.com/
- 49. Updates http://finance.yahoo.com/
- 50. Set Focus on Update? http://orbitz.com
- 51. Set Focus on Update? <div id=”tripcost” tabindex=quot;-1quot;> // trip cost markup </div> onclick: document.getElementById('tripcost').focus();
- 52. Set Focus on Update? Screen Magnifiers?
- 56. http://apple.com
- 57. Ajax is Everywhere http://blaugh.com/2006/08/21/ajax-makes-everything-better/
- 58. 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
- 59. WAI-ARIA
- 60. Replicating the Desktop • <div> can be a button • <span> can be a slider • Need a better API • Leverage accessibility support in the OS
- 61. 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/
- 62. 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
- 63. States • checked • disabled • readonly • expanded • valuemin, valuemax, valuenow
- 64. ARIA <div role=quot;dialogquot; ... >
- 65. ARIA <div role=quot;dialogquot; ... >
- 66. ARIA <li role=quot;treeitemquot; aria-expanded=quot;truequot; ... >
- 67. ARIA <div role=quot;sliderquot; aria-valuemin=quot;1quot; aria-valuemax=quot;5quot; aria-valuenow=quot;1”>
- 68. ARIA <div role=quot;region” aria-live=”polite” ... >
- 69. Resources
- 70. Testing Just Ask: Integrating Accessibility Throughout Design Shawn Lawton Henry http://www.uiaccess.com/accessucd/
- 72. Assistive Technologies JAWS: Freedom Scientific Window-Eyes: GW Micro ZoomText: Ai Squared FireVox
- 73. Toolbars • Lists of headings • Text equivalents for images • Disable scripting, mouse events • Validation and testing tools • Zoom
- 74. Toolbars http://firefox.cita.uiuc.edu/ http://www.paciellogroup.com/resources/wat-ie-about.html http://www.paciellogroup.com/resources/wat-about.html
- 75. Color Contrast • Colour Analyzer: http://juicystudio.com/services/colourcontrast.php
- 76. “For most people, technology makes things easier. For people with disabilities, technology makes things possible.” - President’s Council on Disability
- 77. Questions?