Nothing Hard Baked: Designing the Inclusive Web

721 views

Published on

We've all experienced the frustration and exclusion of using an application that is awkwardly designed or poorly suited to our preferred device. In this talk, I redefine accessibility as a usability problem, exploring some of the limitations we've inherited from traditional, desktop-centric approaches to accessibility and user interface design. I also show a few of the techniques used in Fluid Infusion to support open web user interfaces that can more readily adapt to the needs of both developers and end-users alike.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Nothing Hard Baked: Designing the Inclusive Web

  1. 1. Nothing Hard BakedDesigning the Inclusive Web Colin Clark fluidproject.org
  2. 2. Me, quickly
  3. 3. !"#$Decapod
  4. 4. What is accessibility?
  5. 5. Rethinking Disability
  6. 6. Rethinking Disability
  7. 7. Rethinking Disability A mismatch between the user and the user interface
  8. 8. Disability is a usability issue
  9. 9. Disability is contextual
  10. 10. Designing for Context
  11. 11. Disability is environmental
  12. 12. Accessibility is... the ability of the systemto accommodate the needs of the user
  13. 13. Accessibility is...
  14. 14. Accessibility is...Something we all benefit from.
  15. 15. Accessiblesystems are... • Flexible • Separable • Modifiable
  16. 16. “I can’t even imagine what a better UI forme would look like, because I’ve spentthe past 13 years of my life adapting tothe computer.” - Johnny Taylor, unboundedexistence.com
  17. 17. (assistive technology)
  18. 18. Opaque Markup<!-- This is a Tabs widget. --><!-- How would you know, looking only at the markup? --><ol> <li id="ch1Tab"> <a href="#ch1Panel">Chapter 1</a> </li> <li id="ch2Tab"> <a href="#ch2Panel">Chapter 2</a> </li> <li id="quizTab"> <a href="#quizPanel">Quiz</a> </li></ol><div> <div id="ch1Panel">Chapter 1 Stuff</div> <div id=”ch2Panel”>Chapter 2 Stuff</div> <div id=”quizPanel”>Quiz Stuff</div></div>
  19. 19. Opaque Markup: Tabs
  20. 20. ARIA fills the gap
  21. 21. 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
  22. 22. Using ARIA<!-- Now *these* are Tabs! --><ol role=”tablist”> <li id=”ch1Tab” role=”tab”> <a href="#ch1Panel">Chapter 1</a> </li> <li id=”ch2Tab” role=”tab”> <a href="#ch2Panel">Chapter 2</a> </li> <li id=”quizTab” role=”tab”> <a href="#quizPanel">Quiz</a> </li></ol><div> <div id="ch1Panel" role=”tabpanel” aria-labelledby=”ch1Tab”>Chapter 1 Stuff</div> <div id=”ch2Panel” role=”tabpanel” aria-labelledby=”ch2Tab”>Chapter 2 Stuff</div> <div id=”quizPanel” role=”tabpanel” aria-labelledby=”quizTab”>Quiz Stuff</div></div>
  23. 23. 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);});
  24. 24. The Problem with RolesAssistive technologies see the world like this...
  25. 25. The Problem with Roles ...or like this, if you’re so inclined
  26. 26. The Problem with Roles... but the Web is driving new kinds of user interfaces
  27. 27. The Problem with Roles... but the Web is driving new kinds of user interfaces
  28. 28. The Problem with Roles ... even on the desktop
  29. 29. The Problem with Roles
  30. 30. Inline Edit RolesButton?
  31. 31. Inline Edit Roles Text Field?
  32. 32. Inline Edit RolesButton? Text Field?
  33. 33. Inline Edit Behaviours Read-only Activatable Editable Undoable
  34. 34. What about affordances?
  35. 35. Assistive technology is a hack
  36. 36. Accessiblesystems are... • Flexible • Separable • Modifiable
  37. 37. Open Architecture: Unlock your markup Let developers and users in A widget isn’t just one thing Question the rulesNo Black Boxes
  38. 38. Markup example: 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>
  39. 39. Markup example: jQuery UI
  40. 40. Markup agnosticism: 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" } <table summary="The list of files"> <tbody> <tr class="flc-uploader-file"> <td class="flc-uploader-file-name”>File Name</td> <td class="flc-uploader-file-size”>0 KB</td> </tr> </tbody> </table>
  41. 41. Markup agnosticism: 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" } <table summary="The list of files"> <tbody> <tr class="flc-uploader-file"> <td class="flc-uploader-file-name”>File Name</td> <td class="flc-uploader-file-size”>0 KB</td> </tr> </tbody> </table>
  42. 42. Markup agnosticism: 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" } <table summary="The list of files"> <tbody> <tr class="flc-uploader-file"> <td class="flc-uploader-file-name”>File Name</td> <td class="flc-uploader-file-size”>0 KB</td> </tr> </tbody> </table>
  43. 43. Markup agnosticism: Infusionvar jFileName = dom.locate(“fileName”);
  44. 44. Transparent Apps• M is where it’s at• Events inside and out• Assistive technology inside the Web, not bolted on
  45. 45. Questions?Colin Clark@colinbdclarkfluidproject.org
  46. 46. Photo CreditsCurb cut, Great PA-NJ, http://www.flickr.com/photos/50393252@N02/4822063888/Stethoscope, Han-Oh Chung, http://www.flickr.com/photos/chickenlump/2038512161/Texting while walking, Mobile Monday Amsterdam, http://www.flickr.com/photos/momoams/2926622070/MOMA WiFi, http://www.flickr.com/photos/89554035@N00/2445178036Plasticine iPhone, Paula Ortiz López, http://www.flickr.com/photos/paulaortizlopez/5342740603/Skateboarder, Amin Samsudin, http://www.flickr.com/photos/aminchoc/4108543387/Hacksaw, Fen Oswin, http://www.flickr.com/photos/fenoswin/5100072944/The Large Glass, William Cromar, http://www.flickr.com/photos/williamcromar/4599688803/Plasticine Animal, panshipanshi, http://www.flickr.com/photos/panshipanshi/2123208719/

×