• Like
Colin Clark Accessible U Is With J Query And Infusion[1]
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Colin Clark Accessible U Is With J Query And Infusion[1]

  • 1,767 views
Published

 

Published in Travel , Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,767
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
55
Comments
0
Likes
3

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Building Accessible User Interfaces with jQuery and Fluid Infusion Colin Clark, Fluid Project Technical Lead, Adaptive Technology Resource Centre Monday, September 14, 2009
  • 2. Topics We’ll Cover • The Fluid community • Introducing Infusion • Developing accessible JavaScript • Infusion’s Architecture • Techniques for portals, mashups, CMS’s • Where we’re headed Monday, September 14, 2009
  • 3. Fluid... http://fluidproject.org • Is an open source community of • Designers • Developers • Accessibility experts • Helps other open communities • Consists of universities, museums and individuals Monday, September 14, 2009
  • 4. What We Do • Offer design advice and resources • Contribute to other communities: • jQuery UI • Dojo • W3C Accessibility • Build Infusion, our JavaScript application framework Monday, September 14, 2009
  • 5. Introducing http://fluidproject.org/products/infusion/ Monday, September 14, 2009
  • 6. World, Meet Infusion • Application framework built on top of jQuery • The culmination of our work helping others • Designed for usability and accessibility • Open architecture: everything is configurable Monday, September 14, 2009
  • 7. What’s in Infusion? • A development framework for building apps • UI components you can reuse and adapt • Lightweight CSS framework for styling • Accessibility tools and plugins for jQuery Monday, September 14, 2009
  • 8. Building Great UIs Is Hard • Your code gets unruly as it grows • UIs are hard to reuse or repurpose • Design change requires big code change • Accessibility is confusing • Combining different code/libraries doesn’t always work Monday, September 14, 2009
  • 9. Flexible User Interfaces Infusion is an application framework designed to provide unprecedented flexibility while preserving interoperability. Monday, September 14, 2009
  • 10. Types of JavaScript Tools • Foundational Toolkits • Application Frameworks ... compare and contrast Monday, September 14, 2009
  • 11. Foundational toolkits • Totally presentation focused • DOM manipulation • Event binding jQuery • Ajax Prototype Dojo core Monday, September 14, 2009
  • 12. Application frameworks • Model notifications “something changed here” • Views to help keep your presentational code clean • Data binding to sync the display with your model SproutCore Dojo/Dijit/ Dojox Cappuccino Monday, September 14, 2009
  • 13. Infusion is Different • Accessibility baked right in • Carefully designed interactions • Markup is in your control • Not the same old MVC • Supports portals, mashups and CMS’s Monday, September 14, 2009
  • 14. Deeply Accessible Monday, September 14, 2009
  • 15. What is Accessibility? Monday, September 14, 2009
  • 16. A New Definition • Accessibility is the ability of the system to accommodate the needs of the user • Disability is the mismatch between the user and the interface provided • We all experience disability • Accessible software = better software Monday, September 14, 2009
  • 17. Assistive Technologies • Present and control the user interface in different ways • Not just screen readers! • Use built-in operating system APIs to understand the user interface Screen readers Screen magnifiers On-screen keyboards Monday, September 14, 2009
  • 18. DHTML: A New Can of Worms • Shift from documents to applications • Familiar a11y techniques aren’t enough • Most DHTML is completely inaccessible • New techniques are still being figured out Monday, September 14, 2009
  • 19. The Problem • Custom widgets often look, but don’t act, like their counterparts on the desktop • HTML provides only simple semantics • Not enough information for ATs • Dynamic updates require new design strategies to be accessible Monday, September 14, 2009
  • 20. The Solution • Describe user interfaces with ARIA • Add consistent keyboard controls • Provide flexible styling and presentation Monday, September 14, 2009
  • 21. Supporting Assistive Technology Monday, September 14, 2009
  • 22. Opaque Markup // These are tabs. How would you know? <ol> <li><a href=”#cats”>Cats</a></li> <li><a href=”#dogs”>Dogs</a></li> <li><a href=”#gators”>Gators</a></li> </ol> <div> <div id=”cats”>Cats meow.</div> <div id=”dogs”>Dogs bark.</div> <div id=”gators”>Gators bite.</div> </div> Monday, September 14, 2009
  • 23. Opaque Markup: Tabs Monday, September 14, 2009
  • 24. ARIA • Accessible Rich Internet Applications • W3C specification in the works • Fills the semantic gaps in HTML • Roles, states, and properties • Live regions Monday, September 14, 2009
  • 25. Roles, States, Properties • Roles describe widgets not present in HTML 4 • slider, menubar, tab, dialog • Properties describe characteristics: • draggable, hasPopup, required • States describe what’s happening: • busy, disabled, selected, hidden Monday, September 14, 2009
  • 26. Using ARIA // Now *these* are Tabs! <ol id=”animalTabs” role=”tablist” tabindex=”0”> <!-- Individual Tabs shouldn’t be focusable --> <!-- We’ll focus them with JavaScript instead --> <li role=”tab”><a href=”#” tabindex=”-1”>Cats</a></li> <li role=”tab”><a href=”#” tabindex=”-1”>Dogs</a></li> <li role=”tab”><a href=”#” tabindex=”-1”>Gators</a></li> </ol> <div id=”panels”> <div role=”tabpanel” aria-labelledby=”cats”>Cats meow.</div> <div role=”tabpanel” aria-labelledby=”dogs”>Dogs bark.</div> <div role=”tabpanel” aria-labelledby=”gators”>Gators bite.</div> </div> Monday, September 14, 2009
  • 27. Adding ARIA in Code // Identify the container as a list of tabs. tabContainer.attr("role", "tablist"); // Give each tab the "tab" role. tabs.attr("role", "tab"); // Give each panel the appropriate role, panels.attr("role", "tabpanel"); panels.each(function (idx, panel) { var tabForPanel = that.tabs.eq(idx); // Relate the panel to the tab that labels it. $(panel).attr("aria-labelledby", tabForPanel[0].id); }); Monday, September 14, 2009
  • 28. Keyboard Accessibility Monday, September 14, 2009
  • 29. Keyboard Navigation • Everything that works with the mouse should work with the keyboard • ... but not always in the same way • Support familiar conventions http://dev.aol.com/dhtml_style_guide Monday, September 14, 2009
  • 30. Keyboard Conventions • Tab key focuses the control or widget • Arrow keys select an item • Enter or Spacebar activate an item • Tab is handled by the browser. For the rest, you need to write code. A lot of code. Monday, September 14, 2009
  • 31. Keyboard a11y: Tabs Monday, September 14, 2009
  • 32. Tabindex examples <!-- Tab container should be focusable --> <ol id=”animalTabs” tabindex=”0”> <!-- Individual Tabs shouldn’t be focusable --> <!-- We’ll focus them with JavaScript instead --> <li id=”tab1”> <a href=”#cats” tabindex=”-1”>Cats</a> </li> <li id=”tab2”> <a href=”#cats” tabindex=”-1”>Dogs</a> </li> <li id=”tab3”> <a href=”#cats” tabindex=”-1”>Alligators</a> </li> </ol> Monday, September 14, 2009
  • 33. Making Things Tabbable • Tabindex varies subtly across browsers • jquery.attr() normalizes it as of 1.3 • For all the gory details: http://fluidproject.org/blog/2008/01/09/ getting-setting-and-removing-tabindex-values-with-javascript/ // Make the tablist accessible with the Tab key. tabContainer.attr("tabindex", "0"); // And take the anchors out of the Tab order. $(“a”, tabs).attr("tabindex", "-1"); Monday, September 14, 2009
  • 34. Adding the Arrow Keys // Make each tab accessible with the left and right arrow keys. tabContainer.fluid("selectable", { selectableSelector: that.options.selectors.tabs, direction: fluid.a11y.orientation.HORIZONTAL, onSelect: function (tab) { $(tab).addClass(that.options.styles.highlighted); }, onUnselect: function (tab) { $(tab).removeClass(that.options.styles.highlighted); } }); Monday, September 14, 2009
  • 35. Making Them Activatable // Make each tab activatable with Spacebar and Enter. tabs.fluid("activatable", function (evt) { // Your handler code here. Maybe the same as .click()? }); Monday, September 14, 2009
  • 36. Documentation • Tutorial: http://wiki.fluidproject.org/display/fluid/Keyboard+Accessibility+Tutorial • API Reference: http://wiki.fluidproject.org/display/fluid/Keyboard+Accessibility+Plugin+API Monday, September 14, 2009
  • 37. Infusion Goes Deeper • jQuery Keyboard Navigation Plugin • ARIA everywhere • Everything is highly adaptable and flexible • UI Options and the Fluid Skinning System: • Users can customize their environment Monday, September 14, 2009
  • 38. UI Options • One size doesn’t fit all • Allows users to customize your app: • layout • styling • navigation • Uses FSS by default; can be configured to work with your own classes Monday, September 14, 2009
  • 39. UI Options & FSS Monday, September 14, 2009
  • 40. UI Options & FSS Monday, September 14, 2009
  • 41. CSS Frameworks “If you’re going to use a framework, it should be yours; one that you’ve created. You can look at existing frameworks for ideas and hack at it. But the professionals in this room are not well served by picking up a framework and using it as-is.” - Eric Meyer Monday, September 14, 2009
  • 42. Fluid Skinning System • FSS is built to be hacked on • Provides a core set of building blocks • Reset, text, layouts, themes • Namespaced: no conflicts with your stuff • Themes for better legibility & readability http://wiki.fluidproject.org/x/96M7 Monday, September 14, 2009
  • 43. Open Architecture Monday, September 14, 2009
  • 44. Markup Agnosticism • HTML is so fundamental to Web UIs • Others lock away markup in a black box • Markup should be totally free to edit, adapt, or replace • Libraries shouldn’t bake in assumptions about your markup • Unobtrusiveness everywhere Monday, September 14, 2009
  • 45. Handling Markup: Dojo <div class="dijitDialog" tabindex="-1" waiRole="dialog" waiState="labelledby-${id}_title"> <div dojoAttachPoint="titleBar" class="dijitDialogTitleBar"> <span dojoAttachPoint="titleNode" class="dijitDialogTitle" id="${id}_title"></span> <span dojoAttachPoint="closeButtonNode" class="dijitDialogCloseIcon" dojoAttachEvent="onclick: onCancel, onmouseenter: _onCloseEnter, onmouseleave: _onCloseLeave" title="${buttonCancel}"> <span dojoAttachPoint="closeText" class="closeText" title="${buttonCancel}">x</span> </span> </div> <div dojoAttachPoint="containerNode" class="dijitDialogPaneContent"></div> </div> Monday, September 14, 2009
  • 46. Handling Markup: jQuery UI Monday, September 14, 2009
  • 47. Handling Markup: Infusion fluid.defaults("fluid.fileQueueView", { selectors: { fileRows: ".flc-uploader-file", fileName: ".flc-uploader-file-name", fileSize: ".flc-uploader-file-size", fileIconBtn: ".flc-uploader-file-action", errorText: ".flc-uploader-file-error" }, Monday, September 14, 2009
  • 48. Components “Components suck. Apps built with components look like it” • Infusion components aren’t black boxes • Fundamentally adaptable: • Change the markup • Restyle with CSS • Add/replace actual behaviour • Everything is super-loosely coupled Monday, September 14, 2009
  • 49. Component Families: Reorderer lists images layouts Infusion components come in families Monday, September 14, 2009
  • 50. More Components Uploader Inline Edit Pager Monday, September 14, 2009
  • 51. Model, View... but not Controller • MVC is a given in most framework • JavaScript’s functional idioms offer alternatives (hint: events) • Infusion has no controller layer at all • ... and none of the classical inheritance cruft that usually goes with it Monday, September 14, 2009
  • 52. Traditional MVC Model n atio oti c State Query State Change ge N n Cha View Selection View Controller User Gestures Monday, September 14, 2009
  • 53. The Problem with Controllers • Controllers are the least defined • What’s “glue?” • Always referred to as the non-reusable part • MVC has been warped over the decades • The framework should take care of the glue Monday, September 14, 2009
  • 54. Infusion Models & Views Model • Controller is replaced by events Change Noti cation • Reads to the model are transparent • State changes and notification are just events State Query State Change • Transparent architecture: you can use View the same events we use Framework Monday, September 14, 2009
  • 55. Plain Old Models • M is the most important thing in your app • Data needs to travel seamlessly between client and server • Most toolkits force a model to extend some base class or particular structure In Infusion, models are just plain old JSON Monday, September 14, 2009
  • 56. Playing Nice With Others Monday, September 14, 2009
  • 57. Portals, Mashups, and CMS’s • These days, diverse code and markup coexists • Most JavaScript is written as if it owns the whole browser • As you combine stuff, things can break • Namespacing and privacy is essential Monday, September 14, 2009
  • 58. Writing Collision-Free JavaScript • Put code in a unique namespace • Use closures for privacy • Support more than one on the page • Scope all variables to an instance • Avoid hard-baking ID selectors • Constrain selectors within a specific element Monday, September 14, 2009
  • 59. Keeping it to Ourselves • Infusion takes namespacing seriously • We won’t steal your names • Components are carefully scoped • We won’t accidently grab the wrong stuff • Infusion doesn’t expect control of the page Monday, September 14, 2009
  • 60. Tying it All Together • Infusion helps you with accessibility • Components you can really work with • Simple structure so your code can grow • Totally transparent, event-driven design • Markup and models are under your control • No inheritance or controller cruft Monday, September 14, 2009
  • 61. Where We’re Going Monday, September 14, 2009
  • 62. Infusion Next Steps • Infusion 1.2 coming in October: • New lightweight Inversion of Control • Data Grid and reworked Pager components • Lots of bug fixes • New demos portal with example code • Screencasts Monday, September 14, 2009
  • 63. Fluid Engage • Open source collaboration with museums • Visitor engagement: learn and contribute • Use phones visitors bring into the museum • Mobile apps and in-gallery kiosks • All built with open source Web technology Monday, September 14, 2009
  • 64. Our Mobile Approach • No hard intrusions on your content • Don’t subvert good Web idioms • Your choice: native-like or webbish Monday, September 14, 2009
  • 65. Infusion Mobile • mFSS: themes for iPhone, Android, more • ScreenNavigator: unobtrusive mobile navigation • Components designed for the mobile Web Monday, September 14, 2009
  • 66. Kettle: Server-side JS • Built on top of the JSGI server spec • Don’t need lots of new APIs on server • Envjs provides a full browser • Infusion as application framework • Choose where markup gets rendered • Natural, familiardesigners for Web developers and environment Monday, September 14, 2009
  • 67. Wrapping Up • Tools for everyone: • ARIA • Dojo • jQuery • Infusion • Give Infusion a try and let us know • We’re a friendly community! Monday, September 14, 2009
  • 68. Wrapping Up Please fill out an evaluation. Monday, September 14, 2009
  • 69. Questions? http://fluidproject.org Monday, September 14, 2009