Open and Accessible UI
•
1 like•759 views
From Flourish 2009 conference in Chicago (http://flourishconf.com). Discussing the value of accessibility and universality for web UIs.
Report
Share
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (20)
Similar to Open and Accessible UI
Similar to Open and Accessible UI (20)
More from Mark Meeker
Recently uploaded
Recently uploaded (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?