The Inclusive Web: hands-on with HTML5 and jQuery

The Inclusive Web
Hands on with
HTML5 and jQuery

Justin Obara & Colin Clark
Inclusive Design Research Centre
ﬂuidproject.org

Rethinking Disability

A mismatch between the
user
and the
user interface

Disability is a usability issue

Accessibility is...

the ability of the system
to accommodate the needs of the user

jQuery Hits the Spot

• Browser inconsistencies and bugs


• Complexity of the DOM


• Handling events and asynchrony


• Communicating with the server

Toolkits can help!
• Browser Abstraction

Toolkits can help!
• Browser abstraction
• A simple, uniﬁed API for the DOM

Toolkits can help!
• Easy, functional events system

Toolkits can help!
• Easy, functional events system
• Built-in AJAX, XML, and JSON

Without jQuery

function stripeListElements() {

// get the items from the list

var myItems = document.getElementsByTagName("li");

// skip line 0 as it's the header row

for(var i = 0; i < myItems.length; i++) {

if ((i % 2) === 0) {

myItems[i].className = "striped";

}

}
}

With jQuery

jQuery("li:even");

With jQuery

jQuery("li:even").addClass("striped");

Accessible
systems are...

• Flexible
• Separable
• Modiﬁable

Markup


<label for="..." class="ﬂ-progEnhance-basic">Add File:</label>


<div class="ﬂ-progEnhance-enhanced">

It’s just a couple of classes!

Styles

.ﬂ-progEnhance-enhanced {display:none}
.ﬂ-progEnhance-basic {}

Hide the fancy stuff, show the basics by default.

The Code

// Use JavaScript to hide basic markup.
$("head").append("<style type='text/css'>
.fl-progEnhance-basic{ display: none; }
.fl-progEnhance-enhanced { display: block; }
</style>");

Use JavaScript to flip the styles around!

how assistive technology
works

Opaque Markup



<ol>
<li id="ch1Tab">
<a href="#ch1Panel">Chapter 1</a>
</li>
<li id="ch2Tab">
</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>

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

<ol role=”tablist”>
<li id=”ch1Tab” role=”tab”>
</li>
<li id=”ch2Tab” role=”tab”>
</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);
});

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.

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://ﬂuidproject.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.ﬂuid("selectable", {
selectableSelector: that.options.selectors.tabs,
direction: ﬂuid.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.ﬂuid("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

“you have to use ﬂash for that”

“the web can’t do that!”

“you need an app for that!”

Beyond the buzzword...

• Media, drawing, animation, and interactivity
<audio>, <video>, <canvas>

• New widgets—you don’t have to roll your own
<progress>, <menu>

• Richer semantics for forms and documents
<article>, <nav>, <input type=”date”>

Other cool stuff...

• CSS3
transition, transform, gradient

• Working with ﬁles
File API, FormData, XHR Level 2

• Coming soon
Device, Text to Speech!

What’s coming

• Headings
Based on nesting within sections

• Continued enhancements from semantics
e.g. improved AT awareness for navigation <nav>

• Native widgets

Canvas Accessibility
1. Shadow DOM
2. Focus indicators ... not quite yet.

In the meantime... 1. Build alternatives
2. Degrade gracefully

The Bottom Line
• HTML5 is coming—experiment with it now
• Lots of great potential for improving access
• Assistive technologies are slow on the uptake
• Some features are going to be a challenge
(Canvas)

Features

• Degrades gracefully
• Uploads multiple ﬁles at once
• Keyboard navigable
• Uses hot new HTML5 features:

FormData XMLHttpRequest Level 2 <progress> (almost!)

Dive right in: markup

<input type="file" multiple=""
id="d-uploader-filesControl"
class="d-uploader-filesControl fl-progEnhance-basic" />

Getting the files

filesControl.change(function () {
that.events.onAdd.fire(filesControl[0].files);
});

demo.uploader.sendRequest = function (file, url, events) {
var formData = new FormData();
formData.append("file", file);

// Create a new XHR.
var xhr = new XMLHttpRequest();
xhr.open("POST", url, true);

// Register success and error listeners.
xhr.onreadystatechange = function () {
if (status === 200) {
events.onSuccess.fire(file);
} else {
events.onError.fire(file);
}
};

// Listen for progress events as the file is uploading.
xhr.upload.onprogress = function (progressEvent) {
events.onProgress.fire(file, progressEvent.loaded, progressEvent.total);
};

// Send off the request to the server.
xhr.send(formData);
};

HTML5 Inputs
<input type=”tel”> 
<input type=”email”> 
<input type=”date”> 
<input type=”search”> 


<input type=”number” min=”0” max=”10” step=”1” value=”1”>


<input list=”dlist”>
<datalist id=”dlist”><option value=”HTML5”></datalist>

HTML5 Inputs:
attributes/properies
<label for=”name”>Name</label>
<input type=”text” id=”name” placeholder=”My name is ...”
required autofocus />

Geolocation
// test if geolocation api is supported
if (!!navigator.geolocation) {
// success callback is passed a location object
// coords property holds coordinate information
// Firefox also has an address property
navigator.geolocation.getCurrentPosition(success, error);
}

Geolocation:
Location Object
// test if geolocation api is supported
if (!!navigator.geolocation) {
// success callback is passed a location object
navigator.geolocation.getCurrentPosition(success, error);
}

What’s Infusion?

• Application framework built on top of jQuery
• UI components you can reuse and adapt
• Lightweight CSS framework for styling
• Accessibility tools and plugins for jQuery
• Open architecture: everything is conﬁgurable

Great UX is hard work

• 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

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

No Black Boxes

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

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

https://github.com/jobara/workshops

Questions?
Justin Obara
e: jobara@ocad.ca

Colin Clark
e: cclark@ocad.ca
t: @colinbdclark

ﬂuidproject.org
github.com/ﬂuid-project

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/

Plasticine Animal, panshipanshi, http://www.flickr.com/photos/panshipanshi/2123208719/

The Inclusive Web: hands-on with HTML5 and jQuery

More Related Content

What's hot

Viewers also liked

Similar to The Inclusive Web: hands-on with HTML5 and jQuery

Recently uploaded

The Inclusive Web: hands-on with HTML5 and jQuery

Editor's Notes