Building Accessible User Interfaces

with JavaScript and jQuery

Antranig Basman,

Core Framework Architect, The Fluid Project

Clayton Lewis

, Professor of Computer Science, University of Colorado at Boulder

Our Goals • • •

Guide to the ropes and pitfalls of

– –

JavaScript jQuery A special emphasis on techniques appropriate for

– –

Portals, Mashups and CMSs Designing accessible, flexible apps Finish by leading into the basics of Fluid Infusion

Portals, Mashups, and CMSs • 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

Schedule

– Javascript 101 • • • – – – 8:55 Break jQuery AJAX Accessibility Basics • – 9:55 Break Accessibility Nuts and Bolts – – 10:55 Break Web 2.0 Accessibility and ARIA Fluid Infusion 11:55 Closing

Modus Operandi

• • • Brief introductions, so get to know one another a little We’ll ask you to discuss with your neighbors from time to time Questions, comments, and especially arguments are urged at any time!

Javascript 101

JavaScript is Different

• • • • • • • Everything is an “object” Extremely loose type system - Only 6 types for values - No types for references No classes Functions are first class Some annoying quirks

Super-Quick History

• • • • • Netscape rushed JS to market, bugs and all, and with a shabbily motivated name Microsoft reverse-engineered it.

Standards committee enforced the bugs.

In recent years JS has become a crucial technology Big efforts on improved implementations have delivered huge performance gains

Part 1: The Basics

• • • • Variables null vs. undefined Type coercion Objects and Arrays

• • •

Defining Variables

• • Define variables with var Types are not specified var mango = "yum"; mango = 12345; mango = false;

Defining Variables

• If you omit var , it will be defined as a global variable. • This is accident prone; JavaScript won't warn you!

• rottenTomato = "gross!"; // This is global

Numbers and Strings

• – – – Numbers lots of precision no distinction between floats and ints NaN !== NaN • – – – Strings Unicode (mostly) Immutable No character type

Null vs. Undefined

• • null is the "nothing" value undefined – – is extremely nothing Default value for uninitialized variables Also the value of missing members of objects and arguments • exception thrown when the language encounters names which are not found in any scope – “typeof” expressions are safe and need to be used for detection here

Truthy and Falsey •

JavaScript does a lot of automatic type coercion

–

A common case is in conditions if (x) x? thing1: thing2

• •

Shades of true and false Use with care

Falsey Values

• • • • • • false null undefined "" 0 (zero) NaN • Everything else is truthy. Careful...

• -1, "false", "0" are all true

Equal vs. Equivalent

• • • Comparisons are coercive: 1 == "1" // true 0 == false // true Don’t use this operator!

• • • • Non-coercive comparison: 0 === false // false 1 !== "1" // true Use this operator!

1 === Number("1") // true

Objects

Objects Are Containers Don’t use this!

• Use this!

Use this!

• • At their core, objects are just maps or “dictionaries” new Object() or {} returns an empty container of key/value pairs Keys can be any string, values can be anything • • Two different ways to access members: • basketOfFruit .

kiwis; // dot notation • basketOfFruit [ "figs" ] ; // subscript notation You can add new members to any object

at any time

Objects Are Modifiable

• var basketOfFruit = {}; • // New property • basketOfFruit.apples = "macintosh"; • // New method • basketOfFruit.eat = function () { • • } return “tasty”;

No Classes

• JavaScript doesn't have any concept of classes • Methods ( functions ) are just properties in a container: – pass them around – modify them – delete them

Determining Types

• • • • • JavaScript has a typeof keyword for determining type } var plum = "yum"; if ( typeof plum === "string") { alert("Plum is a String!");

• • typeof is Inaccurate •

// Inaccurate results for some built-in types typeof({}) // 'object' typeof([]) // 'object'

• • •

typeof(function() {}) // 'function' typeof(“”) // 'string'

•

typeof(3) // 'number'

•

typeof(false) // 'boolean' typeof(null) // 'object'

•

typeof(undefined) // 'undefined'

Duck Typing

• • The best way to check for types:

don’t

.

Check for behaviour: – function countChickens (flock) { • • if (flock.length && typeof flock.length === “number”) – } • • } //flock is ok to count.

{ : fluid.isArrayable(eggs)

Part 2: Functions & Scope

• • • • Functions are first class Determining types Understanding this Closures

First Class Functions • • • • •

Functions are data (variable values) You can assign them You can pass them as arguments You can return them as results You can add members to a function(!)

–

convenient for managing names

Defining and Using Functions

• • • • • function squeeze(aFruit) { // familiarish… … • } • var puree = function (aFruit) { // more generally useful • }; … function popsicle(juiceMakerFn, fruit) { var juice = juiceMakerFn(fruit); • • } return freeze(juice); • var goody = popsicle(puree, berries); • var goody2 = popsicle(squeeze, berries);

What Does This Mean?

• • No more anonymous inner classes!

You can pass bits of logic around and have them be invoked later • Callbacks are easy to write and ubiquitous • Functions are our basic building block

this

Context and

this • JavaScript this unpredictable pointer is wild and • It points to different objects depending on the context • Subtle, confusing, and inexplicable

• • • •

The Reason For This, We Will Not Discuss

this is part of a package of language features ( new , prototype , instanceof , constructor , this ) which we (Fluid) do not recommend We will present a simpler subset of the language that lets you get all your work done Other dangerous features: eval , with Ask us in the break or afterwards if you want to know more

that

Coping With the Problems

• • this can be confusing and unstable Constructor functions can accidentally clobber the global namespace • Prototypal inheritance can easily cause existing code to break • Can we simplify things?

Plain Old Functions & Objects

• • • • • // Just use plain old functions and objects.

• function orange () { // Stable pointer to the current instance.

var that = {}; // Anything private stays inside here.

• • • // For public methods, just add properties.

that.squeeze

• } return that ; = function () {...}

Closures

• • • • Functions can be defined inside other functions Inner functions have access to the outer function's variables A closure is formed by returning the inner function from the outer function The inner function will still have access to all the variables function from the outer

A Simple Closure – Challenge #1

• • • • • • function addNumbers (a, b) { var sum = a + b; } function addEmUp (c) { return sum + c; return addEmUp; • } • var func = addNumbers(1, 2); • func(3); // Result is ???

• func(5); // Result is ???

A Simple Closure

• • • • • • function addNumbers (a, b) { var sum = a + b; } function addEmUp (c) { return sum + c; return addEmUp; • } • var add3 = addNumbers(1, 2); • // result is an “add 3” Function • add3(3); // Result is 6 • add3(5); // Result is 8

Closures Simplify Event Handlers

• • function makeShowMessage(todaysPie) { var messageToDisplay = “Today’s Pie is: ”; • • • • return function(event) { alert(messageToDisplay + " " + todaysPie); showPictureOfPie(event.target, todaysPie); } • } • var clickHandler = makeShowMessage(“Banana creme pie”); • $(element).click(clickHandler); //attach click handler using jQuery • // Shows an alert: "Today's pie is: Banana creme pie" • $(element).click(); //trigger event using jQuery

Over to Antranig

JavaScript Pitfall Challenge #2

What is wrong with the following code?

}

for

(

var var

i = 0; i < elements.length; i++) { el = elements[i]; el.addEventListener('click',

function

() { doSomethingWith(i, el); });

“Creating functions in a loop” •

A standard complaint from JSLint, a useful code quality tool

• •

Sometimes this is OK In this case it is not – the function body makes use of a variable held in the outer closure scope

•

Every listener will see i as n and el as undefined

Basic Remedy #1 – extra function •

An extra function needs to be created somehow to store fixed values in a scope }

for

(

var

i = 0; i < elements.length; i++) {

(function(i, el) {

el.addEventListener('click',

function

() { doSomethingWith(i, el); }); })(i, elements[i]);

•

What a mess!

Basic Remedy #2 – Use Framework support for iteration

$.each(elements, function(i, el) {

el.addEventListener('click',

function

() { doSomethingWith(i, el); }); }); OR

fluid.each(elements, function(el, i) {

el.addEventListener('click',

function

() { doSomethingWith(i, el); }); • }); Note that 2 functions are still needed

Advanced Remedy #3 – jQuery vectorisation

$(elements).click(function(event) {

doSomethingWith(event.target); }; ); • • • • jQuery.click() is one of a large family of portable event binding methods provided by jQuery (mousemove, keydown, focus, etc.) “A jQuery” wraps some collection of DOM elements A jQuery be used to treat the wrapped collection homogeneously – Changes: We don’t get to use the index “i” any more – Outer function level has disappeared, replaced by magic “this”

Advanced Remedy #4 – jQuery.delegate()

$(container).delegate(“elementSelector”, “click”, function(event) {

doSomethingWith(event.target); }; • • • • • }); Container is some DOM node containing the elements “elementSelector” is some selector (from the CSS dialect) matching the elements This is much more efficient, since it registers just ONE listener, no matter how many elements there are event.target will differ from “this” which remains the container, but holds the element which received the event Takes a bit more setting up, but is worthwhile in the long run

that

Coping With Bugs

• • this can be confusing and unstable Constructor functions can accidentally clobber the global namespace • Prototypal inheritance can easily cause existing code to break • Can we simplify things?

Plain Old Functions & Objects

• • • • • // Just use plain old functions and objects.

• function orange () { // Stable pointer to the current instance.

var that = {}; // Anything private stays inside here.

• • • // For public methods, just add properties.

that.squeeze

• } return that ; = function () {...}

• • • • 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 specific element These are policies followed by Fluid Infusion

Keeping it to Ourselves

• • • •

You should take namespacing seriously Don’t steal global names

–

JavaScript globals

– – –

jQuery plugin names HTML id values others Components are carefully scoped Don’t expect control of the page

Start With a Unique Namespace

// Add on to the fluid object if it exists, // otherwise initialize it as an empty object.

var fluid = fluid || {};

Use Closures for Privacy

var fluid = fluid || {}; (function() { // Private stuff.

function myPrivateFunction () { } // Add public stuff to your namespace.

fluid.tabs = function () { // Public creator function.

})(); };

Keep Common Aliases Private

• Pass important dependencies in as an argument to the closure: – jQuery.noConflict(); // Tell jQuery to surrender $ – (function ($) { • // $ is now only visible in our private space.

• //$ === jQuery; – }) (jQuery) ;

JSON syntax

• • • Use of {} and [], Equivalence of assignment and JSON forms A curly bracket doesn’t just mean a block

JavaScript pitfalls

• Corrupting Object.prototype and Array.prototype (or any prototypes for that matter) • • Writing for (var x in v) for an array Asynchrony in AJAX (Talk about promises) and jQuery.when() – single threaded!

What is in jQuery?

• • • • • • • – Browser-independence for: – Querying $(“a.myLinkClass”) Attaching events $(“a.myLinkClass”).click(myHandler) Manipulating markup $(“div.myDivClass”).append(“”); Making AJAX requests $.post(“ajax/test.html”, myPostHandler);

jQuery and jQuery UI • • jQuery: Foundational Library – version 1.6.1

jQuery UI: Library of plugins and widgets for jQuery – Datepicker, Accordion, Slider, Tabs – version 1.8.3

finding something without a framework function stripeListElements(listID) { // get the items from the list var myItems = getElementsByTagName("li"); // skip line 0 as it's the header row } for(var i = 0; i < myItems.length; i++) { if ((count % 2) === 0) { myItems[count].className = "odd"; } }

finding something with jQuery var myItems = jQuery( 'li' );

finding something with jQuery jQuery(" ") selectors : tags : ids : jQuery(" tr ") jQuery(" #myId ") jQuery(" .myClass

") } classes : These forms as supported in CSS pseudo tags : jQuery(" div:first ")

finding something with jQuery jQuery(" ") more selectors = combining selectors element by class : jQuery(" li.selected

"); relationships : jQuery(" tbody tr:even "); children : jQuery(" div > p "); siblings : jQuery(" div ~ p "); etc, etc, etc...

doing something with jQuery jQuery( "li" );

doing something with jQuery jQuery( " li: even" );

doing something with jQuery jQuery("li:even") .addClass( "odd" );

doing something with jQuery

} function stripeListElements(listId) { jQuery('#' + listId + " li:even").addClass("odd"); $(“li:even”, fluid.byId(listId)).addClass(“odd”)

jQuery ===

$

doing something with jQuery

$(".some-hidden-thing").

show (); $(".some-hidden-thing").

fadeIn ("slow"); $("

A new list item

").

appendTo ("#myList"); $("#myList li:last").

replaceWith ("

A new list item

"); $("div.container").

clone ().

appendTo ("body");

doing something with jQuery

$("div.container").

clone ().

appendTo ("body"); chaining...

$("div#mytemplate").

addClass ('menu').

clone ().

appendTo ("body").

click (dosomething());

Attaching events

$(".button").

click (function(){ doSomething(); }); $(".button").

hover (function(){ jQuery(this).addClass("hilite"); }, function(){ jQuery(this).removeClass("hilite"); }); $(".button").

focus (function(){ jQuery(this).addClass("hilite"); }); In real life, do these 3 using CSS: It’s more performant, and more reliable $(".button").

blur (function(){ jQuery(this).addClass("hilite"); });

Doing things with jQuery

$(".button").

click ();

jQuery AJAX

• • Various short forms for special cases – $.get(), $.post(), $.load() Long form allows any function in HTTP – $.ajax()

All I/O is Asynchronous

• • JavaScript’s function-oriented design makes it easy to supply callbacks Note, however, that browser JavaScript is single-threaded, even if multiple requests may be “in flight” $.post('ajax/test.html', function(data) { $('.result').html(data); });

API wrinkles

• Historically, short-form jQuery AJAX didn’t supply a position for error() • callbacks – Essential in a robust application However, as of 1.5, jQuery AJAX API supports Promises (interesting topic) var jqxhr = $.post("example.php", function() { console.log("success"); }).error(function() { console.log(“POST failed”); });

Loading markup • •

A useful shorthand API is jQuery.load() Example from the docs: $('#result').load(“ajax/test.html #container”, myCallback); Put the markup in here From this URL Select just this part of the remote document Call this function when completed

•

In practice, don’t use id-based selectors like this!

–

Violates portal-friendliness

Over to Clayton

What is Accessibility?

Definitions

• 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

Motivations for Accessibility

• • Legislative (ADA and Section 508) Business and outreach (reach everyone) • Accessible is better (for everyone)

It’s just better

• • “curb cut effect” -- everyone benefits accessible technology tends to be – more interoperable – – – – easier to re-purpose more future-proof more robust easier to use on a variety of devices

Models for Web Accessibility

• • • Text-only site One site, accessible for all Adaptable and Personalizable • Discuss

Models for Web Accessibility

• • • Text-only site-- really?

One site, accessible for all --better Adaptable and Personalizable --best

W3C: Web Content Accessibility Guidelines (WCAG) 2.0

• • Principle 1: Perceivable - Information and user interface components must be presentable to users in ways they can perceive.

• • Principle 2: Operable - User interface components and navigation must be operable.

Principle 3: Understandable - Information and the operation of user interface must be understandable.

Principle 4: Robust - Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies.

WCAG is Good Design

Perceivable

• • • • Text alternatives for: – – – Images Time-based media CAPTCHAs Adaptable presentation Use colour and contrast effectively Organize content in a meaningful sequence

Searchable, readable, faster

Operable

• Content needs to work with the keyboard • • Provide enough time to read and use Help users to navigate, find content, and locate themselves in your site

Easier to use and interact with

Understandable

• • • • Use plain language Define jargon and abbreviations Consistent and predictable user interfaces Help users avoid mistakes

Speaks to users on their terms; less frustrating UX

Robust

• • Use valid markup and standards Describe the names, roles, and values of all user interface controls

Sites last longer, and are easier to repurpose

Better Usability

Designing for everyone • Look at what an interaction is like for various users and contexts and then (re)envision how it could be • • • start with interactions, not technology iterative testing have a wide-open community

Designing for Everyone

• • • Accessibility is no longer optional Visual design is no longer optional • • Accessibility cannot be absolutely measured Accessibility is a continuum Accessibility and Design have the same GOAL http://webaim.org/blog/access_vs_design/

Taking a Look at Accessibility

Testing and Checking • • • Fluid UX Walkthroughs Evaluators: AChecker, WAVE, and more • • • General principles: Flexibility Labelling Alternatives

Step in the shoes of your users...

• • • Fluid UX Walkthroughs Easy ways to assess usability and accessibility Combination

heuristic evaluation

and

cognitive walkthrough

• • Translated: a checklist with scenarios Anyone can do one http://wiki.fluidproject.org/display/fluid/User+Experience+Walkthroughs

Simple Accessibility Evaluation 1. Try changing your font size, resolution window size and 2.

Look critically at your page’s layout , structure & content 3. Use the Tab key to navigate through all controls 4. Check for alternatives to images, sound, and video

Screen Enlargement When you make things bigger or resize...

1. Is all the text visible?

2. Does it overlap or break up in any way?

3. Are headers and labels still correctly associated?

4. Do columns shift or realign unexpectedly?

Layout and Structure • • • Is the page structured into logical sections?

Are the sections clearly labeled?

Are there sufficient non-visual cues for site structure?

• • • Are there sufficient visual cues?

Is the most important information prominent?

Is navigation consistent from page to page?

Keyboard Navigation • • • • Many different types of users use the keyboard You probably do, too!

Keyboard access is one-dimensional: forward & back

Aim: Everything that works with the mouse, works with the keyboard

Keyboard Navigation Conventions

Keyboard Navigation Conventions 1. The Tab key moves focus to the next control

Keyboard Navigation Conventions 1. The Tab key moves focus to the next control 2.

Shift-Tab moves focus backwards

Keyboard Navigation Conventions 1. The Tab key moves focus to the next control 2.

Shift-Tab moves focus backwards 3. The Enter and Spacebar keys activate a control

Keyboard Navigation Checklist 1. Do all links, buttons, and form controls receive focus?

2. Can all controls be activated with Enter or Spacebar ?

3. Are there any areas you get stuck or need the mouse?

4. Do calendar pickers and other rich widgets work?

What About Shortcuts?

• • • • Accessibility guidelines use to suggest “access keys” Keyboard shortcuts bound to the alt key A huge source of controversy Bottom line:

don’t add new keyboard shortcuts

Alternatives to Media 1. Do all images have meaningful, non-redundant alt text?

2.

Do videos have captions? (They’re easy to add!) 3. Does audio have a transcript?

Hover your mouse over images in Internet Explorer to see alt text...

Tools for Evaluating Accessibility

Evaluation Tools 1. Static Analyzers 2. HTML and CSS 3. Accessibility

HTML & CSS Validation • Validators ensure that HTML and CSS are to spec • Passing doesn’t mean you’re accessible, but it’s a start • • • HTML http://validator.w3.org

/ http://jigsaw.w3.org/cs s-validator/

Accessibility Checkers aChecker http://achecker.ca/checker/index.php

Wave http://jigsaw.w3.org/css-validator/

Accessibility Checkers aChecker http://achecker.ca/checker/index.php

Accessibility Checkers Wave http://jigsaw.w3.org/css validator/

Accessibility Checkers: What They Do • • • • Statically analyze markup • Specify the Guideline for Validation e.g. WCAG 2.0 AA Will alert you to in accessible markup e.g. missing alt text on images

Accessibility Checkers: Limitations • • No Magic Is the alt text meaningful?

• • Static analysis Will javascript make it inaccessible?

• • Markup based validation How will CSS affect the page?

Colour Validation • • View in respect to Colour Blindness Determine Adjustability of Colours http://colorfilter.wickline.org

http://vischeck.com

Colour Validation Limitations • • Automating testing of interfaces is hard e.g. determining contrast levels Is this contrast level to spec?

Design Color Scheme Early Easier and cheaper to make good design choices early Colour Pickers that also measure contrast http://gmazzocato.altervista.org/colorwheel/wheel.php

http://www.snook.ca/technical/colour_contrast/colour.

html

Accessible Markup

Concepts of HTML Accessibility • • Label as much as you can Use semantic markup to describe your page • • • Design in layers Textual alternatives Clearly delineate navigation from content

what is “alt” text?

• It is read by screen readers in place of images allowing the content and function of the image to be accessible to those with visual or certain cognitive disabilities.

• • It is displayed in place of the image in user agents (browsers) that don't support the display of images or when the user has chosen not to view images.

It provides a semantic meaning and description to images which can be read by search engines or be used to later determine the content of the image from page context alone.

http://www.webaim.org/techniques/alttext /

The “alt” attribute

• Be accurate and equivalent in presenting the same content and function as presented by the image.

• Be succinct. Typically no more than a few words are necessary.

• do NOT be redundant or provide the exact same information as text within the context.

• do NOT use the phrases "image of ..." or "graphic of ..." to describe the image. It usually apparent to the user that it is an image. http://www.webaim.org/techniques/alttext/

“alt” text in code

Video

YouTube

Captioning

YouTube and beyond • • • • • • Captions are great for everyone They make your videos search-friendly YouTube Automatic Captioning Speech recognition: pretty awkward Supply a transcript: quick and reliable Flash has accessibility problems, but HTML 5 is coming

Video (Cont.)

HTML 5

Avoiding Repetition

Avoiding Repetition

Navigation Bar

Avoiding Repetition

Navigation Bar Main Content

Skip Links

Avoid Repetition

Navigation Bar Main Content

Sakai Mock-up