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.

1. Nothing Hard Baked
Designing the Inclusive Web
Colin Clark
fluidproject.org

2. Me, quickly

3. !"#$
Decapod

4. What is accessibility?

5. Rethinking Disability

6. Rethinking Disability

7. Rethinking Disability
A mismatch between the
user
and the
user interface

8. Disability is a usability issue

9. Disability is contextual

10. Designing for Context

11. Disability is environmental

12. Accessibility is...
the ability of the system
to accommodate the needs of the user

13. Accessibility is...

14. Accessibility is...
Something we all benefit from.

15. Accessible
systems are...
• Flexible
• Separable
• Modifiable

16. “I can’t even imagine what a better UI for
me would look like, because I’ve spent
the past 13 years of my life adapting to
the computer.”
- Johnny Taylor, unboundedexistence.com

19. (assistive technology)

20. 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>

21. Opaque Markup: Tabs

22. ARIA fills the gap

23. 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

24. 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>

25. 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);
});

26. The Problem with Roles
Assistive technologies see the world like this...

27. The Problem with Roles
...or like this, if you’re so inclined

28. The Problem with Roles
... but the Web is driving new kinds of user interfaces

29. The Problem with Roles
... but the Web is driving new kinds of user interfaces

30. The Problem with Roles
... even on the desktop

31. The Problem with Roles

32. Inline Edit Roles
Button?

33. Inline Edit Roles
Text Field?

34. Inline Edit Roles
Button?
Text Field?

35. Inline Edit Behaviours
Read-only
Activatable Editable
Undoable

36. What about affordances?

37. Assistive technology
is a hack

38. Accessible
systems are...
• Flexible
• Separable
• Modifiable

39. Open Architecture:
Unlock your markup
Let developers and users in
A widget isn’t just one thing
Question the rules
No Black Boxes

40. 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>

41. Markup example: jQuery UI

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. 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>

44. 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>

45. Markup agnosticism: Infusion
var jFileName = dom.locate(“fileName”);

46. Transparent
Apps
• M is where it’s at
• Events inside and out
• Assistive technology
inside the Web, not
bolted on

47. Questions?
Colin Clark
@colinbdclark
fluidproject.org

48. Photo Credits
Curb 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/2445178036
Plasticine 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/