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

Building Accessible User Interfaces
with jQuery and Fluid Infusion

Colin Clark, Fluid Project Technical Lead,
Adaptive Technology Resource Centre
Monday, September 14, 2009

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

Fluid...
http://ﬂuidproject.org

• Is an open source community of
• Designers
• Developers
• Accessibility experts
• Helps other open communities
• Consists of universities, museums and
individuals


What We Do
• Offer design advice and resources
• Contribute to other communities:
• jQuery UI
• Dojo
• W3C Accessibility
• Build Infusion, our JavaScript
application framework


Introducing

http://ﬂuidproject.org/products/infusion/

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 conﬁgurable


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


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


Flexible User Interfaces

Infusion is an application framework designed to
provide unprecedented ﬂexibility while
preserving interoperability.


Types of JavaScript Tools

• Foundational Toolkits
• Application Frameworks
... compare and contrast


Foundational toolkits

• Totally presentation focused
• DOM manipulation
• Event binding jQuery
• Ajax Prototype
Dojo core


Application frameworks

• Model notiﬁcations “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


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


Deeply Accessible


What is Accessibility?


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


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 magniﬁers
On-screen keyboards

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 ﬁgured out


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


The Solution

• Describe user interfaces with ARIA
• Add consistent keyboard controls
• Provide ﬂexible styling and presentation


Supporting Assistive Technology


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>


Opaque Markup: Tabs


ARIA

• Accessible Rich Internet Applications
• W3C speciﬁcation in the works
• Fills the semantic gaps in HTML
• Roles, states, and properties
• Live regions


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 id=”animalTabs” role=”tablist” tabindex=”0”>


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

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


Keyboard Accessibility


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


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.


Keyboard a11y: Tabs


Tabindex examples

<ol id=”animalTabs” tabindex=”0”>


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

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");

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


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()?
});


Documentation

• Tutorial:
http://wiki.fluidproject.org/display/fluid/Keyboard+Accessibility+Tutorial

• API Reference:
http://wiki.fluidproject.org/display/fluid/Keyboard+Accessibility+Plugin+API


Infusion Goes Deeper

• jQuery Keyboard Navigation Plugin
• ARIA everywhere
• Everything is highly adaptable and ﬂexible
• UI Options and the Fluid Skinning System:
• Users can customize their environment


UI Options
• One size doesn’t ﬁt all
• Allows users to customize your app:
• layout
• styling
• navigation
• Uses FSS by default; can be conﬁgured to
work with your own classes


UI Options & FSS


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


Fluid Skinning System

• FSS is built to be hacked on
• Provides a core set of building blocks
• Reset, text, layouts, themes
• Namespaced: no conﬂicts with your stuff
• Themes for better legibility & readability
http://wiki.ﬂuidproject.org/x/96M7

Open Architecture


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

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>


Handling Markup: jQuery UI


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"
},


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

Component Families: Reorderer

lists images layouts

Infusion components come in families


More Components

Uploader Inline Edit

Pager

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


Traditional MVC

Model

n
atio
oti c
State Query State Change
ge N
n
Cha

View Selection

View Controller
User Gestures


The Problem with Controllers

• Controllers are the least deﬁned
• 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


Infusion Models & Views
Model
• Controller is replaced by events Change Noti cation

• Reads to the model are transparent
• State changes and notiﬁcation are
just events State Query State Change

• Transparent architecture: you can use View
the same events we use
Framework


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


Playing Nice With Others


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


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 speciﬁc element

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


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

Where We’re Going


Infusion Next Steps

• Infusion 1.2 coming in October:
• New lightweight Inversion of Control
• Data Grid and reworked Pager components
• Lots of bug ﬁxes
• New demos portal with example code
• Screencasts

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

Our Mobile Approach

• No hard intrusions on your content
• Don’t subvert good Web idioms
• Your choice: native-like or webbish


Infusion Mobile

• mFSS: themes for iPhone, Android, more
• ScreenNavigator: unobtrusive mobile navigation
• Components designed for the mobile Web


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


Wrapping Up
• Tools for everyone:
• ARIA
• Dojo
• jQuery
• Infusion
• Give Infusion a try and let us know
• We’re a friendly community!

Wrapping Up

Please ﬁll out an evaluation.


Questions?
http://ﬂuidproject.org


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

Recomendados

Recomendados

Mais conteúdo relacionado

Destaque

Destaque (20)

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

Semelhante a Colin Clark Accessible U Is With J Query And Infusion[1] (20)

Mais de Ajax Experience 2009

Mais de Ajax Experience 2009 (20)

Último

Último (20)

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