SlideShare a Scribd company logo
The Inclusive Web
                 Hands on with
                HTML5 and jQuery




            Justin Obara & Colin Clark
                Inclusive Design Research Centre
                                  fluidproject.org
A bit about us, 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 system
to accommodate the needs of the user
the web today
The Inclusive Web: hands-on with HTML5 and jQuery
jQuery Hits the Spot
jQuery Hits the Spot

• Browser inconsistencies and bugs
jQuery Hits the Spot

• Browser inconsistencies and bugs
• Complexity of the DOM
jQuery Hits the Spot

• Browser inconsistencies and bugs
• Complexity of the DOM
• Handling events and asynchrony
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
•   Complexity of the DOM
•   Handling events and asynchrony
•   Communicating with the server
Toolkits can help!
•   Browser abstraction
•   A simple, unified API for the DOM
•   Handling events and asynchrony
•   Communicating with the server
Toolkits can help!
•   Browser abstraction
•   A simple, unified API for the DOM
•   Easy, functional events system
•   Communicating with the server
Toolkits can help!
•   Browser abstraction
•   A simple, unified API for the DOM
•   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");
With jQuery


jQuery("li:even");
With jQuery


jQuery("li:even").addClass("striped");
Accessible
systems are...

  • Flexible
  • Separable
  • Modifiable
Graceful Degradation
Markup

<!-- Only shown if browser doesn't support JavaScript -->
<label for="..." class="fl-progEnhance-basic">Add File:</label>

<!-- Only shown if JavaScript is turned on -->
<div class="fl-progEnhance-enhanced">




                                  It’s just a couple of classes!
Styles

.fl-progEnhance-enhanced {display:none}
.fl-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
keyboard navigation & aria
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);
});
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 navigation: Tabs
Tabindex examples
<!-- Tab container should be focusable -->
<ol id=”animalTabs” tabindex=”0”>
 <!-- Individual Tabs shouldn’t be focusable -->
 <!-- We’ll focus them with JavaScript instead -->
 <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
the web tomorrow
“you have to use flash for that”

                  “the web can’t do that!”

       “you need an app for that!”
The Inclusive Web: hands-on with HTML5 and jQuery
music and video
games
augmented reality
mobile
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 files
      File API, FormData, XHR Level 2

• Coming soon
      Device, Text to Speech!
What about accessibility?
Making use of semantics
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
Canvas Accessibility
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)
building cool stuff
an HTML5 uploader
Features

     • Degrades gracefully
     • Uploads multiple files 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);
};
The Inclusive Web: hands-on with HTML5 and jQuery
HTML5 Inputs
<input   type=”tel”> <!-- phone number -->
<input   type=”email”> <!-- e-mail address -->
<input   type=”date”> <!-- date -->
<input   type=”search”> <!-- search field -->

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

<!-- Like an autocomplete widget -->
<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);
}
The Inclusive Web: hands-on with HTML5 and jQuery
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 configurable
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
UI Options & FSS
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 conflicts with your stuff
• Themes for better legibility & readability
       http://wiki.fluidproject.org/x/96M7
https://github.com/jobara/workshops
Questions?
Justin Obara
e: jobara@ocad.ca

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


fluidproject.org
github.com/fluid-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/

More Related Content

What's hot (20)

PPTX
Getting started with jQuery
Gill Cleeren
 
PDF
JavaScript Libraries (@Media)
jeresig
 
PDF
JavaScript Libraries (Kings of Code)
jeresig
 
PPTX
Maintainable JavaScript 2012
Nicholas Zakas
 
KEY
The jQuery Library
LearnNowOnline
 
PPTX
A Rich Web Experience with jQuery, Ajax and .NET
James Johnson
 
PDF
Introduction to jQuery
Zeeshan Khan
 
PDF
jQuery Makes Writing JavaScript Fun Again (for HTML5 User Group)
Doris Chen
 
PDF
jQuery (MeshU)
jeresig
 
PPTX
Getting the Most Out of jQuery Widgets
velveeta_512
 
PDF
jQuery in the [Aol.] Enterprise
Dave Artz
 
PPTX
SharePoint Cincy 2012 - jQuery essentials
Mark Rackley
 
KEY
An in-depth look at jQuery
Paul Bakaus
 
PDF
How to make Ajax Libraries work for you
Simon Willison
 
PDF
JavaScript Library Overview
jeresig
 
PDF
Web2.0 with jQuery in English
Lau Bech Lauritzen
 
PDF
jQuery Proven Performance Tips & Tricks
Addy Osmani
 
PPTX
jQuery Presentation
Rod Johnson
 
PDF
Django Heresies
Simon Willison
 
KEY
the 5 layers of web accessibility - Open Web Camp II
Dirk Ginader
 
Getting started with jQuery
Gill Cleeren
 
JavaScript Libraries (@Media)
jeresig
 
JavaScript Libraries (Kings of Code)
jeresig
 
Maintainable JavaScript 2012
Nicholas Zakas
 
The jQuery Library
LearnNowOnline
 
A Rich Web Experience with jQuery, Ajax and .NET
James Johnson
 
Introduction to jQuery
Zeeshan Khan
 
jQuery Makes Writing JavaScript Fun Again (for HTML5 User Group)
Doris Chen
 
jQuery (MeshU)
jeresig
 
Getting the Most Out of jQuery Widgets
velveeta_512
 
jQuery in the [Aol.] Enterprise
Dave Artz
 
SharePoint Cincy 2012 - jQuery essentials
Mark Rackley
 
An in-depth look at jQuery
Paul Bakaus
 
How to make Ajax Libraries work for you
Simon Willison
 
JavaScript Library Overview
jeresig
 
Web2.0 with jQuery in English
Lau Bech Lauritzen
 
jQuery Proven Performance Tips & Tricks
Addy Osmani
 
jQuery Presentation
Rod Johnson
 
Django Heresies
Simon Willison
 
the 5 layers of web accessibility - Open Web Camp II
Dirk Ginader
 

Viewers also liked (9)

PPT
Iit_teaching_aids
s1047178
 
PDF
Benweir Book August2012 Lowres
ben_weir_74
 
PDF
Flocking at the SuperCollider Symposium 2013
colinbdclark
 
PPT
Dwilsonlis557
nobleire
 
KEY
Accessible UIs with jQuery and Infusion
colinbdclark
 
PPTX
Palm Beach Learn Green Conference 10.15.10
valerie11
 
KEY
Thoughts on Open Accessibility
colinbdclark
 
PDF
Mobile Development with uPortal and Infusion
colinbdclark
 
PDF
unifi ap datasheet
Lerner Mapurunga
 
Iit_teaching_aids
s1047178
 
Benweir Book August2012 Lowres
ben_weir_74
 
Flocking at the SuperCollider Symposium 2013
colinbdclark
 
Dwilsonlis557
nobleire
 
Accessible UIs with jQuery and Infusion
colinbdclark
 
Palm Beach Learn Green Conference 10.15.10
valerie11
 
Thoughts on Open Accessibility
colinbdclark
 
Mobile Development with uPortal and Infusion
colinbdclark
 
unifi ap datasheet
Lerner Mapurunga
 
Ad

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

KEY
Making your jQuery Plugins More Accessible
colinbdclark
 
PDF
Accessibility - A feature you can build
Monika Piotrowicz
 
PDF
Ajax and Accessibiity
Mark Meeker
 
PPTX
Surviving Dev Frameworks 2019
Kate Walser
 
PPTX
Accessibility with Single Page Apps
Ross Mullen
 
PPSX
Accessible Design with HTML5 - HTML5DevConf.com May 21st San Francisco, 2012 ...
Raj Lal
 
PDF
Accessibility - A feature you can build
Monika Piotrowicz
 
PDF
Accessible web applications
Wojtek Zając
 
PPTX
Accessible web applications
Steven Faulkner
 
PDF
a11yTO - Web Accessibility for Developers
Monika Piotrowicz
 
PDF
Web Accessibility - A feature you can build
Monika Piotrowicz
 
PPTX
How you can start building accessible websites today (... and why!)
nrasul
 
PDF
Open and Accessible UI
Mark Meeker
 
PPTX
Accessibility of HTML5 and Rich Internet Applications - CSUN 2012
Steven Faulkner
 
PPT
IWMW 1997: Next Year's Web
IWMW
 
PPTX
AccessU 2018 - Surviving Dev Frameworks: Lessons Learned with WordPress, Drup...
Kate Walser
 
PDF
Keyboard and Interaction Accessibility Techniques
Jared Smith
 
PDF
Accessibility and JS: side-by-side
Felipe de Albuquerque
 
PDF
Developing an Accessible Web
greenideas
 
PDF
Accessible JavaScript applications
Stefan Feješ
 
Making your jQuery Plugins More Accessible
colinbdclark
 
Accessibility - A feature you can build
Monika Piotrowicz
 
Ajax and Accessibiity
Mark Meeker
 
Surviving Dev Frameworks 2019
Kate Walser
 
Accessibility with Single Page Apps
Ross Mullen
 
Accessible Design with HTML5 - HTML5DevConf.com May 21st San Francisco, 2012 ...
Raj Lal
 
Accessibility - A feature you can build
Monika Piotrowicz
 
Accessible web applications
Wojtek Zając
 
Accessible web applications
Steven Faulkner
 
a11yTO - Web Accessibility for Developers
Monika Piotrowicz
 
Web Accessibility - A feature you can build
Monika Piotrowicz
 
How you can start building accessible websites today (... and why!)
nrasul
 
Open and Accessible UI
Mark Meeker
 
Accessibility of HTML5 and Rich Internet Applications - CSUN 2012
Steven Faulkner
 
IWMW 1997: Next Year's Web
IWMW
 
AccessU 2018 - Surviving Dev Frameworks: Lessons Learned with WordPress, Drup...
Kate Walser
 
Keyboard and Interaction Accessibility Techniques
Jared Smith
 
Accessibility and JS: side-by-side
Felipe de Albuquerque
 
Developing an Accessible Web
greenideas
 
Accessible JavaScript applications
Stefan Feješ
 
Ad

Recently uploaded (20)

PPTX
Seamless Tech Experiences Showcasing Cross-Platform App Design.pptx
presentifyai
 
PPTX
MuleSoft MCP Support (Model Context Protocol) and Use Case Demo
shyamraj55
 
PDF
UPDF - AI PDF Editor & Converter Key Features
DealFuel
 
PPTX
Digital Circuits, important subject in CS
contactparinay1
 
PPTX
COMPARISON OF RASTER ANALYSIS TOOLS OF QGIS AND ARCGIS
Sharanya Sarkar
 
PPTX
New ThousandEyes Product Innovations: Cisco Live June 2025
ThousandEyes
 
PDF
Book industry state of the nation 2025 - Tech Forum 2025
BookNet Canada
 
DOCX
Cryptography Quiz: test your knowledge of this important security concept.
Rajni Bhardwaj Grover
 
PDF
Transcript: Book industry state of the nation 2025 - Tech Forum 2025
BookNet Canada
 
PDF
“Computer Vision at Sea: Automated Fish Tracking for Sustainable Fishing,” a ...
Edge AI and Vision Alliance
 
PDF
Go Concurrency Real-World Patterns, Pitfalls, and Playground Battles.pdf
Emily Achieng
 
PDF
Transforming Utility Networks: Large-scale Data Migrations with FME
Safe Software
 
PDF
Reverse Engineering of Security Products: Developing an Advanced Microsoft De...
nwbxhhcyjv
 
PDF
“Voice Interfaces on a Budget: Building Real-time Speech Recognition on Low-c...
Edge AI and Vision Alliance
 
PDF
Agentic AI lifecycle for Enterprise Hyper-Automation
Debmalya Biswas
 
PDF
Newgen 2022-Forrester Newgen TEI_13 05 2022-The-Total-Economic-Impact-Newgen-...
darshakparmar
 
PDF
“Squinting Vision Pipelines: Detecting and Correcting Errors in Vision Models...
Edge AI and Vision Alliance
 
PDF
The Rise of AI and IoT in Mobile App Tech.pdf
IMG Global Infotech
 
PDF
Peak of Data & AI Encore AI-Enhanced Workflows for the Real World
Safe Software
 
PDF
What’s my job again? Slides from Mark Simos talk at 2025 Tampa BSides
Mark Simos
 
Seamless Tech Experiences Showcasing Cross-Platform App Design.pptx
presentifyai
 
MuleSoft MCP Support (Model Context Protocol) and Use Case Demo
shyamraj55
 
UPDF - AI PDF Editor & Converter Key Features
DealFuel
 
Digital Circuits, important subject in CS
contactparinay1
 
COMPARISON OF RASTER ANALYSIS TOOLS OF QGIS AND ARCGIS
Sharanya Sarkar
 
New ThousandEyes Product Innovations: Cisco Live June 2025
ThousandEyes
 
Book industry state of the nation 2025 - Tech Forum 2025
BookNet Canada
 
Cryptography Quiz: test your knowledge of this important security concept.
Rajni Bhardwaj Grover
 
Transcript: Book industry state of the nation 2025 - Tech Forum 2025
BookNet Canada
 
“Computer Vision at Sea: Automated Fish Tracking for Sustainable Fishing,” a ...
Edge AI and Vision Alliance
 
Go Concurrency Real-World Patterns, Pitfalls, and Playground Battles.pdf
Emily Achieng
 
Transforming Utility Networks: Large-scale Data Migrations with FME
Safe Software
 
Reverse Engineering of Security Products: Developing an Advanced Microsoft De...
nwbxhhcyjv
 
“Voice Interfaces on a Budget: Building Real-time Speech Recognition on Low-c...
Edge AI and Vision Alliance
 
Agentic AI lifecycle for Enterprise Hyper-Automation
Debmalya Biswas
 
Newgen 2022-Forrester Newgen TEI_13 05 2022-The-Total-Economic-Impact-Newgen-...
darshakparmar
 
“Squinting Vision Pipelines: Detecting and Correcting Errors in Vision Models...
Edge AI and Vision Alliance
 
The Rise of AI and IoT in Mobile App Tech.pdf
IMG Global Infotech
 
Peak of Data & AI Encore AI-Enhanced Workflows for the Real World
Safe Software
 
What’s my job again? Slides from Mark Simos talk at 2025 Tampa BSides
Mark Simos
 

The Inclusive Web: hands-on with HTML5 and jQuery

  • 1. The Inclusive Web Hands on with HTML5 and jQuery Justin Obara & Colin Clark Inclusive Design Research Centre fluidproject.org
  • 2. A bit about us, quickly
  • 7. Rethinking Disability A mismatch between the user and the user interface
  • 8. Disability is a usability issue
  • 12. Accessibility is... the ability of the system to accommodate the needs of the user
  • 16. jQuery Hits the Spot • Browser inconsistencies and bugs
  • 17. jQuery Hits the Spot • Browser inconsistencies and bugs • Complexity of the DOM
  • 18. jQuery Hits the Spot • Browser inconsistencies and bugs • Complexity of the DOM • Handling events and asynchrony
  • 19. jQuery Hits the Spot • Browser inconsistencies and bugs • Complexity of the DOM • Handling events and asynchrony • Communicating with the server
  • 20. Toolkits can help! • Browser Abstraction • Complexity of the DOM • Handling events and asynchrony • Communicating with the server
  • 21. Toolkits can help! • Browser abstraction • A simple, unified API for the DOM • Handling events and asynchrony • Communicating with the server
  • 22. Toolkits can help! • Browser abstraction • A simple, unified API for the DOM • Easy, functional events system • Communicating with the server
  • 23. Toolkits can help! • Browser abstraction • A simple, unified API for the DOM • Easy, functional events system • Built-in AJAX, XML, and JSON
  • 24. 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"; } } }
  • 28. Accessible systems are... • Flexible • Separable • Modifiable
  • 30. Markup <!-- Only shown if browser doesn't support JavaScript --> <label for="..." class="fl-progEnhance-basic">Add File:</label> <!-- Only shown if JavaScript is turned on --> <div class="fl-progEnhance-enhanced"> It’s just a couple of classes!
  • 31. Styles .fl-progEnhance-enhanced {display:none} .fl-progEnhance-basic {} Hide the fancy stuff, show the basics by default.
  • 32. 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!
  • 35. 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>
  • 38. 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
  • 39. 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>
  • 40. 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); });
  • 41. 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
  • 42. 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.
  • 44. Tabindex examples <!-- Tab container should be focusable --> <ol id=”animalTabs” tabindex=”0”> <!-- Individual Tabs shouldn’t be focusable --> <!-- We’ll focus them with JavaScript instead --> <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>
  • 45. 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");
  • 46. 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); } });
  • 47. 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()? });
  • 48. Documentation • Tutorial: http://wiki.fluidproject.org/display/fluid/Keyboard+Accessibility +Tutorial • API Reference: http://wiki.fluidproject.org/display/fluid/Keyboard+Accessibility +Plugin+API
  • 50. “you have to use flash for that” “the web can’t do that!” “you need an app for that!”
  • 53. games
  • 56. 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”>
  • 57. Other cool stuff... • CSS3 transition, transform, gradient • Working with files File API, FormData, XHR Level 2 • Coming soon Device, Text to Speech!
  • 59. Making use of semantics
  • 60. What’s coming • Headings Based on nesting within sections • Continued enhancements from semantics e.g. improved AT awareness for navigation <nav> • Native widgets
  • 63. Canvas Accessibility 1. Shadow DOM 2. Focus indicators ... not quite yet. In the meantime... 1. Build alternatives 2. Degrade gracefully
  • 64. 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)
  • 67. Features • Degrades gracefully • Uploads multiple files at once • Keyboard navigable • Uses hot new HTML5 features: FormData XMLHttpRequest Level 2 <progress> (almost!)
  • 68. Dive right in: markup <input type="file" multiple="" id="d-uploader-filesControl" class="d-uploader-filesControl fl-progEnhance-basic" />
  • 69. Getting the files filesControl.change(function () { that.events.onAdd.fire(filesControl[0].files); });
  • 70. 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); };
  • 72. HTML5 Inputs <input type=”tel”> <!-- phone number --> <input type=”email”> <!-- e-mail address --> <input type=”date”> <!-- date --> <input type=”search”> <!-- search field --> <!-- number field --> <input type=”number” min=”0” max=”10” step=”1” value=”1”> <!-- Like an autocomplete widget --> <input list=”dlist”> <datalist id=”dlist”><option value=”HTML5”></datalist>
  • 73. HTML5 Inputs: attributes/properies <label for=”name”>Name</label> <input type=”text” id=”name” placeholder=”My name is ...” required autofocus />
  • 74. 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); }
  • 75. Geolocation: Location Object // test if geolocation api is supported if (!!navigator.geolocation) { // success callback is passed a location object navigator.geolocation.getCurrentPosition(success, error); }
  • 77. 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 configurable
  • 78. 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
  • 79. Open Architecture: Unlock your markup Let developers and users in A widget isn’t just one thing Question the rules No Black Boxes
  • 80. Transparent Apps • M is where it’s at • Events inside and out • Assistive technology inside the Web, not bolted on
  • 83. 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
  • 84. Fluid Skinning System • FSS is built to be hacked on • Provides a core set of building blocks • Reset, text, layouts, themes • Namespaced: no conflicts with your stuff • Themes for better legibility & readability http://wiki.fluidproject.org/x/96M7
  • 86. Questions? Justin Obara e: [email protected] Colin Clark e: [email protected] t: @colinbdclark fluidproject.org github.com/fluid-project
  • 87. 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/

Editor's Notes