Open & Acccessible

Flourish! Conference - April, 2009

Transcript

1. Flourish!*Open*Source*Conference* April,'2009 Mark*Meeker* @meeker OPEN & ACCESSIBLE
2. About Me Now... Previously...
3. Image Source: http://en.wikipedia.org/wiki/Britannica Barriers “The Sum of Human Knowledge”
4. Barriers “The Sum of Human Knowledge” NEW v
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
10. http://churchcrunch.com/2009/01/25/above-the-fold-make-it-count/
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
16. Accessibility Universality
17. Usability
18. Solutions http://www.flickr.com/photos/82046831@N00/514212023/
19. W3C - WCAG 2.0
21. • Use the HTML elements the way they were intended. • There are 91. How many can you name? • http://www.oneplusyou.com/bb/html_quiz Semantic Markup
22. Progressive Enhancement • Separate HTML from CSS from JavaScript. • No in-line style or onclick attributes http://www.alistapart.com/articles/understandingprogressiveenhancement
23. • 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/ Graded Browser Support
24. Graded Browser Support http://developer.yahoo.com/yui/articles/gbs/
25. http://tv.yahoo.com
26. http://tv.yahoo.com
27. http://sa.watson.ibm.com
28. http://sa.watson.ibm.com
29. JavaScript Libraries
30. “As far as the customer is concerned, the interface is the product.” - Jef Raskin
31. Redundant Inputs
32. • 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 Redundant Inputs
33. http://netflix.com Redundant Inputs
34. http://developer.yahoo.com/yui/examples/ Redundant Inputs
35. Linearization
36. Linearization http://ebookers.com
37. State/ Province Zip/Postal Code Examples No Yes United Kingdom, France, Germany Drop Down Yes United States, Canada, Australia Input Yes No No Ireland Linearization
38. Linearization http://basecamphq.com
39. Focus
40. Focus vs. <input> <a> <button> <div> <td> <img>
41. Real Link? http://ebookers.com
42. http://amazon.com Real Checkbox?
43. http://amazon.com Real Checkbox? 1 2 3 4 5 6 7 8 9
44. http://amazon.com Real Checkbox? 1 2 3 4 5 6 7 8 9
45. http://apple.com Is that a button?
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. <div id=”tripcost” tabindex="-1"> // trip cost markup </div> onclick: document.getElementById('tripcost').focus(); Set Focus on Update?
52. Set Focus on Update? Screen Magnifiers?
56. http://apple.com
57. http://blaugh.com/2006/08/21/ajax-makes-everything-better/ Ajax is Everywhere
58. • Filters • Transitions • Auto-complete • Calendar Pickers • Collapse • Drag and Drop • Lightboxes • Yellow Fade • Auto Update • Hover • Tabs • Rating Widgets • Sliders • Micro-content • Auto-fill • Expand / Collapse • Inline Validation • Zoom • Navigation • Auto Refresh • Carrousel • Inline edit Interaction Patterns
59. WAI-ARIA
60. • <div> can be a button • <span> can be a slider • Need a better API • Leverage accessibility support in the OS Replicating the Desktop
61. • 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/ WAI - ARIA
62. • link • combobox, options • checkbox • radio, radiogroup • button • progressbar • slider • spinbutton • tree,treeitem • application • presentation • group • grid, gridcell • tab, tablist, tabpanel • list, listitem • menu, menubar • toolbar • alert Roles
63. States • checked • disabled • readonly • expanded • valuemin, valuemax, valuenow
64. ARIA <div role="dialog" ... >
65. ARIA <div role="dialog" ... >
66. ARIA <li role="treeitem" aria-expanded="true" ... >
67. ARIA <div role="slider" aria-valuemin="1" aria-valuemax="5" aria-valuenow="1”>
68. ARIA <div role="region” aria-live=”polite” ... >
69. Resources
70. Testing Just Ask: Integrating Accessibility Throughout Design Shawn Lawton Henry http://www.uiaccess.com/accessucd/
71. Testing http://developer.yahoo.com/yui/theater/
72. Assistive Technologies JAWS: Freedom Scientific Window-Eyes: GW Micro ZoomText: Ai Squared FireVox
73. • Lists of headings • Text equivalents for images • Disable scripting, mouse events • Validation and testing tools • Zoom Toolbars
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. • Colour Analyzer: http://juicystudio.com/services/colourcontrast.php Color Contrast
76. “For most people, technology makes things easier. For people with disabilities, technology makes things possible.” - President’s Council on Disability
77. Questions?