• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Nothing Hard Baked: Designing the Inclusive Web
 

Nothing Hard Baked: Designing the Inclusive Web

on

  • 522 views

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

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.

Statistics

Views

Total Views
522
Views on SlideShare
522
Embed Views
0

Actions

Likes
0
Downloads
3
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

Nothing Hard Baked: Designing the Inclusive Web Nothing Hard Baked: Designing the Inclusive Web Presentation Transcript

  • Nothing Hard BakedDesigning the Inclusive Web Colin Clark fluidproject.org
  • Me, quickly
  • !"#$Decapod
  • What is accessibility?
  • Rethinking Disability
  • Rethinking Disability
  • Rethinking Disability A mismatch between the user and the user interface
  • Disability is a usability issue
  • Disability is contextual
  • Designing for Context
  • Disability is environmental
  • Accessibility is... the ability of the systemto accommodate the needs of the user
  • Accessibility is...
  • Accessibility is...Something we all benefit from.
  • Accessiblesystems are... • Flexible • Separable • Modifiable
  • “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
  • (assistive technology)
  • 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>
  • Opaque Markup: Tabs
  • ARIA fills the gap
  • 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
  • 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>
  • 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);});
  • The Problem with RolesAssistive technologies see the world like this...
  • The Problem with Roles ...or like this, if you’re so inclined
  • The Problem with Roles... but the Web is driving new kinds of user interfaces
  • The Problem with Roles... but the Web is driving new kinds of user interfaces
  • The Problem with Roles ... even on the desktop
  • The Problem with Roles
  • Inline Edit RolesButton?
  • Inline Edit Roles Text Field?
  • Inline Edit RolesButton? Text Field?
  • Inline Edit Behaviours Read-only Activatable Editable Undoable
  • What about affordances?
  • Assistive technology is a hack
  • Accessiblesystems are... • Flexible • Separable • Modifiable
  • Open Architecture: Unlock your markup Let developers and users in A widget isn’t just one thing Question the rulesNo Black Boxes
  • 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>
  • Markup example: jQuery UI
  • 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>
  • 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>
  • 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>
  • Markup agnosticism: Infusionvar jFileName = dom.locate(“fileName”);
  • Transparent Apps• M is where it’s at• Events inside and out• Assistive technology inside the Web, not bolted on
  • Questions?Colin Clark@colinbdclarkfluidproject.org
  • 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/