0
The Inclusive Web                 Hands on with                HTML5 and jQuery            Justin Obara & Colin Clark     ...
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 systemto accommodate the needs of the user
the web today
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•   Com...
Toolkits can help!•   Browser Abstraction•   Complexity of the DOM•   Handling events and asynchrony•   Communicating with...
Toolkits can help!•   Browser abstraction•   A simple, unified API for the DOM•   Handling events and asynchrony•   Communi...
Toolkits can help!•   Browser abstraction•   A simple, unified API for the DOM•   Easy, functional events system•   Communi...
Toolkits can help!•   Browser abstraction•   A simple, unified API for the DOM•   Easy, functional events system•   Built-i...
Without jQueryfunction stripeListElements() {   // get the items from the list   var myItems = document.getElementsByTagNa...
With jQuery jQuery("li");
With jQueryjQuery("li:even");
With jQueryjQuery("li:even").addClass("striped");
Accessiblesystems are...  • Flexible  • Separable  • Modifiable
Graceful Degradation
Markup<!-- Only shown if browser doesnt support JavaScript --><label for="..." class="fl-progEnhance-basic">Add File:</labe...
Styles.fl-progEnhance-enhanced {display:none}.fl-progEnhance-basic {}              Hide the fancy stuff, show the basics by ...
The Code// Use JavaScript to hide basic markup.$("head").append("<style type=text/css>   .fl-progEnhance-basic{ display: no...
how assistive technology         works
keyboard navigation & aria
Opaque Markup<!-- This is a Tabs widget.               --><!-- How would you know, looking only at the markup? --><ol>  <l...
Opaque Markup: Tabs
ARIA fills the gap
Roles, States, Properties• Roles describe widgets not present in HTML 4      slider, menubar, tab, dialog• Properties desc...
Using ARIA<!-- Now *these* are Tabs! --><ol role=”tablist”> <li id=”ch1Tab” role=”tab”>  <a href="#ch1Panel">Chapter 1</a>...
Adding ARIA in code// Identify the container as a list of tabs.tabContainer.attr("role", "tablist");// Give each tab the "...
Keyboard Navigation• Everything that works with the mouse  should work with the keyboard• ... but not always in the same w...
Keyboard Conventions• Tab key focuses the control or widget• Arrow keys select an item• Enter or Spacebar activate an item...
Keyboard navigation: Tabs
Tabindex examples<!-- Tab container should be focusable --><ol id=”animalTabs” tabindex=”0”> <!-- Individual Tabs shouldn’...
Making Things Tabbable  • Tabindex varies subtly across browsers  • jquery.attr() normalizes it as of 1.3  • For all the g...
Adding the Arrow Keys// Make each tab accessible with the left and right arrow keys.tabContainer.fluid("selectable", {   se...
Making Them Activatable// Make each tab activatable with Spacebar and Enter.tabs.fluid("activatable", function (evt) {    /...
Documentation• Tutorial: http://wiki.fluidproject.org/display/fluid/Keyboard+Accessibility +Tutorial• API Reference: http://...
the web tomorrow
“you have to use flash for that”                  “the web can’t do that!”       “you need an app for that!”
music and video
games
augmented reality
mobile
Beyond the buzzword...• Media, drawing, animation, and interactivity      <audio>, <video>, <canvas>• New widgets—you don’...
Other cool stuff...• CSS3      transition, transform, gradient• Working with files      File API, FormData, XHR Level 2• Co...
What about accessibility?
Making use of semantics
What’s coming• Headings      Based on nesting within sections• Continued enhancements from semantics      e.g. improved AT...
Canvas Accessibility
Canvas Accessibility
Canvas Accessibility1. Shadow DOM2. Focus indicators    ... not quite yet. In the meantime...   1. Build alternatives     ...
The Bottom Line• HTML5 is coming—experiment with it now• Lots of great potential for improving access• Assistive technolog...
building cool stuff
an HTML5 uploader
Features     • Degrades gracefully     • Uploads multiple files at once     • Keyboard navigable     • Uses hot new HTML5 f...
Dive right in: markup<input type="file" multiple=""  id="d-uploader-filesControl"  class="d-uploader-filesControl fl-progEnhan...
Getting the filesfilesControl.change(function () {    that.events.onAdd.fire(filesControl[0].files);});
demo.uploader.sendRequest = function (file, url, events) {  var formData = new FormData();  formData.append("file", file);   ...
HTML5 Inputs<input   type=”tel”> <!-- phone number --><input   type=”email”> <!-- e-mail address --><input   type=”date”> ...
HTML5 Inputs:       attributes/properies<label for=”name”>Name</label><input type=”text” id=”name” placeholder=”My name is...
Geolocation// test if geolocation api is supportedif (!!navigator.geolocation) {    // success callback is passed a locati...
Geolocation:           Location Object// test if geolocation api is supportedif (!!navigator.geolocation) {    // success ...
What’s Infusion?• Application framework built on top of jQuery• UI components you can reuse and adapt• Lightweight CSS fra...
Great UX is hard work• Your code gets unruly as it grows• UIs are hard to reuse or repurpose• Design change requires big c...
Open Architecture:      Unlock your markup      Let developers and users in      A widget isn’t just one thing      Questi...
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, itshould be yours; one that you’ve created.You can look at existing fra...
Fluid Skinning System• FSS is built to be hacked on• Provides a core set of building blocks• Reset, text, layouts, themes•...
https://github.com/jobara/workshops
Questions?Justin Obarae: jobara@ocad.caColin Clarke: cclark@ocad.cat: @colinbdclarkfluidproject.orggithub.com/fluid-project
Photo CreditsCurb cut, Great PA-NJ, http://www.flickr.com/photos/50393252@N02/4822063888/Stethoscope, Han-Oh Chung, http://...
The Inclusive Web: hands-on with HTML5 and jQuery
The Inclusive Web: hands-on with HTML5 and jQuery
The Inclusive Web: hands-on with HTML5 and jQuery
The Inclusive Web: hands-on with HTML5 and jQuery
Upcoming SlideShare
Loading in...5
×

The Inclusive Web: hands-on with HTML5 and jQuery

1,611

Published on

Driven by technologies such as HTML5, JavaScript, and jQuery, innovative new user experiences are thriving on the Web. This workshop, presented by Justin Obara and Colin Clark from the Fluid community (http://fluidproject.org), will provide Web designers and developers with an overview of modern Web accessibility techniques, providing hands-on ways to make HTML5 and jQuery-based applications more accessible, flexible, and inclusive of a diverse range of users. We’ll also cover some of the features of Fluid Infusion, an application framework built on top of jQuery.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,611
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
18
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • &amp;#x2022; This is the sort of stuff that gave JavaScript a bad name\n&amp;#x2022; These are also the issues that are the source of most code\n
  • &amp;#x2022; This is the sort of stuff that gave JavaScript a bad name\n&amp;#x2022; These are also the issues that are the source of most code\n
  • &amp;#x2022; This is the sort of stuff that gave JavaScript a bad name\n&amp;#x2022; These are also the issues that are the source of most code\n
  • &amp;#x2022; This is the sort of stuff that gave JavaScript a bad name\n&amp;#x2022; These are also the issues that are the source of most code\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
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Transcript of "The Inclusive Web: hands-on with HTML5 and jQuery"

    1. 1. The Inclusive Web Hands on with HTML5 and jQuery Justin Obara & Colin Clark Inclusive Design Research Centre fluidproject.org
    2. 2. A bit about us, quickly
    3. 3. !"#$Decapod
    4. 4. What is accessibility?
    5. 5. Rethinking Disability
    6. 6. Rethinking Disability
    7. 7. Rethinking Disability A mismatch between the user and the user interface
    8. 8. Disability is a usability issue
    9. 9. Disability is contextual
    10. 10. Designing for Context
    11. 11. Disability is environmental
    12. 12. Accessibility is... the ability of the systemto accommodate the needs of the user
    13. 13. the web today
    14. 14. jQuery Hits the Spot
    15. 15. jQuery Hits the Spot• Browser inconsistencies and bugs
    16. 16. jQuery Hits the Spot• Browser inconsistencies and bugs• Complexity of the DOM
    17. 17. jQuery Hits the Spot• Browser inconsistencies and bugs• Complexity of the DOM• Handling events and asynchrony
    18. 18. jQuery Hits the Spot• Browser inconsistencies and bugs• Complexity of the DOM• Handling events and asynchrony• Communicating with the server
    19. 19. Toolkits can help!• Browser Abstraction• Complexity of the DOM• Handling events and asynchrony• Communicating with the server
    20. 20. Toolkits can help!• Browser abstraction• A simple, unified API for the DOM• Handling events and asynchrony• Communicating with the server
    21. 21. Toolkits can help!• Browser abstraction• A simple, unified API for the DOM• Easy, functional events system• Communicating with the server
    22. 22. Toolkits can help!• Browser abstraction• A simple, unified API for the DOM• Easy, functional events system• Built-in AJAX, XML, and JSON
    23. 23. Without jQueryfunction stripeListElements() { // get the items from the list var myItems = document.getElementsByTagName("li"); // skip line 0 as its the header row for(var i = 0; i < myItems.length; i++) { if ((i % 2) === 0) { myItems[i].className = "striped"; } } }
    24. 24. With jQuery jQuery("li");
    25. 25. With jQueryjQuery("li:even");
    26. 26. With jQueryjQuery("li:even").addClass("striped");
    27. 27. Accessiblesystems are... • Flexible • Separable • Modifiable
    28. 28. Graceful Degradation
    29. 29. Markup<!-- Only shown if browser doesnt 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!
    30. 30. Styles.fl-progEnhance-enhanced {display:none}.fl-progEnhance-basic {} Hide the fancy stuff, show the basics by default.
    31. 31. 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!
    32. 32. how assistive technology works
    33. 33. keyboard navigation & aria
    34. 34. 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>
    35. 35. Opaque Markup: Tabs
    36. 36. ARIA fills the gap
    37. 37. 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
    38. 38. 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>
    39. 39. 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);});
    40. 40. 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
    41. 41. 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.
    42. 42. Keyboard navigation: Tabs
    43. 43. 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>
    44. 44. 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");
    45. 45. 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); }});
    46. 46. 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()?});
    47. 47. Documentation• Tutorial: http://wiki.fluidproject.org/display/fluid/Keyboard+Accessibility +Tutorial• API Reference: http://wiki.fluidproject.org/display/fluid/Keyboard+Accessibility +Plugin+API
    48. 48. the web tomorrow
    49. 49. “you have to use flash for that” “the web can’t do that!” “you need an app for that!”
    50. 50. music and video
    51. 51. games
    52. 52. augmented reality
    53. 53. mobile
    54. 54. 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”>
    55. 55. Other cool stuff...• CSS3 transition, transform, gradient• Working with files File API, FormData, XHR Level 2• Coming soon Device, Text to Speech!
    56. 56. What about accessibility?
    57. 57. Making use of semantics
    58. 58. What’s coming• Headings Based on nesting within sections• Continued enhancements from semantics e.g. improved AT awareness for navigation <nav>• Native widgets
    59. 59. Canvas Accessibility
    60. 60. Canvas Accessibility
    61. 61. Canvas Accessibility1. Shadow DOM2. Focus indicators ... not quite yet. In the meantime... 1. Build alternatives 2. Degrade gracefully
    62. 62. 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)
    63. 63. building cool stuff
    64. 64. an HTML5 uploader
    65. 65. Features • Degrades gracefully • Uploads multiple files at once • Keyboard navigable • Uses hot new HTML5 features:FormData XMLHttpRequest Level 2 <progress> (almost!)
    66. 66. Dive right in: markup<input type="file" multiple="" id="d-uploader-filesControl" class="d-uploader-filesControl fl-progEnhance-basic" />
    67. 67. Getting the filesfilesControl.change(function () { that.events.onAdd.fire(filesControl[0].files);});
    68. 68. 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);};
    69. 69. 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>
    70. 70. HTML5 Inputs: attributes/properies<label for=”name”>Name</label><input type=”text” id=”name” placeholder=”My name is ...” required autofocus />
    71. 71. Geolocation// test if geolocation api is supportedif (!!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);}
    72. 72. Geolocation: Location Object// test if geolocation api is supportedif (!!navigator.geolocation) { // success callback is passed a location object navigator.geolocation.getCurrentPosition(success, error);}
    73. 73. 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
    74. 74. 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
    75. 75. Open Architecture: Unlock your markup Let developers and users in A widget isn’t just one thing Question the rulesNo Black Boxes
    76. 76. Transparent Apps• M is where it’s at• Events inside and out• Assistive technology inside the Web, not bolted on
    77. 77. UI Options & FSS
    78. 78. UI Options & FSS
    79. 79. CSS Frameworks“If you’re going to use a framework, itshould be yours; one that you’ve created.You can look at existing frameworks forideas and hack at it. But the professionalsin this room are not well served by pickingup a framework and using it as-is.” - Eric Meyer
    80. 80. 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
    81. 81. https://github.com/jobara/workshops
    82. 82. Questions?Justin Obarae: jobara@ocad.caColin Clarke: cclark@ocad.cat: @colinbdclarkfluidproject.orggithub.com/fluid-project
    83. 83. 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/Plasticine Animal, panshipanshi, http://www.flickr.com/photos/panshipanshi/2123208719/
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×