Open and Accessible

Mark Meeker

About Me

Now...

Previously...

Image Source: http://en.wikipedia.org/wiki/Britannica

Barriers“The Sum of Human Knowledge”

Barriers“The Sum of Human Knowledge”NEWv

“ The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.”

- Tim Berners-Lee

“Browsers are the most hostile software engineering

environment possible”- Douglas Crockford

http://churchcrunch.com/2009/01/25/above-the-fold-make-it-count/

Users will never use your site in theway you expect them to.

Barriershttp://www.flickr.com/photos/goldfishsnaps/2830876853/

Disabilities

• Blind, low vision

• color blindness

• Limited mobility

• Deaf, hearing impaired

Old Technology

Release date: August 27, 2001

Accessibility

Universality

Usability

Solutionshttp://www.flickr.com/photos/82046831@N00/514212023/

W3C - WCAG 2.0

• Use the HTML elements the way they were intended.

• There are 91. How many can you name?

• http://www.oneplusyou.com/bb/html_quiz

Semantic Markup

Progressive Enhancement

• Separate HTML from CSS from JavaScript.

• No in-line style or onclick attributes

http://www.alistapart.com/articles/understandingprogressiveenhancement

• Not every browser is equal in capability.

• Don’t serve what a browser can’t support.

• Color TV versus Black and White TV

• http://developer.yahoo.com/yui/articles/gbs/

Graded Browser Support

Graded Browser Support

http://developer.yahoo.com/yui/articles/gbs/

http://tv.yahoo.com

http://tv.yahoo.com

http://sa.watson.ibm.com

http://sa.watson.ibm.com

JavaScript Libraries

“As far as the customer is concerned, the interface

is the product.”- Jef Raskin

Redundant Inputs

• Offer multiple input options

• GUI input and keyboard input

• Enhance visual cues with text-based cues

• Look to desktop interfaces for patterns

• Seek out CLI developers for testing

Redundant Inputs

http://netflix.com

Redundant Inputs

http://developer.yahoo.com/yui/examples/

Redundant Inputs

Linearization

Linearization

http://ebookers.com

State/Province

Zip/Postal Code

Examples

No Yes United Kingdom, France, Germany

Drop Down Yes United States, Canada, Australia

Input Yes

No No Ireland

Linearization

Linearization

http://basecamphq.com

Focus

Focus

vs.

<input>

<a>

<button>

<div>

<td>

<img>

Real Link?

http://ebookers.com

http://amazon.com

Real Checkbox?

http://amazon.com

Real Checkbox?

1 2 3

4 5 6

7 8 9

http://amazon.com

Real Checkbox?

1 2 34 5 67 8 9

http://apple.com

Is that a button?

Where to Next?

http://facebook.com

Updates

Updates

http://finance.yahoo.com/

Updates

http://finance.yahoo.com/

Set Focus on Update?

http://orbitz.com

<div id=”tripcost” tabindex="-1">// trip cost markup

</div>

onclick:document.getElementById('tripcost').focus();

Set Focus on Update?

Set Focus on Update?

Screen Magnifiers?

http://apple.com

http://blaugh.com/2006/08/21/ajax-makes-everything-better/

Ajax is Everywhere

• Filters• Transitions• Auto-complete• Calendar Pickers• Collapse• Drag and Drop• Lightboxes• Yellow Fade• Auto Update• Hover• Tabs

• Rating Widgets• Sliders• Micro-content• Auto-fill• Expand / Collapse• Inline Validation• Zoom• Navigation• Auto Refresh• Carrousel• Inline edit

Interaction Patterns

WAI-ARIA

• <div> can be a button

• <span> can be a slider

• Need a better API

• Leverage accessibility support in the OS

Replicating the Desktop

• W3C Web Accessibility InitiativeAccessible Rich Internet Applications

• Adds hooks into accessibility API of the platform

• Define Roles and States so scripts can interact with AT APIs

• http://www.w3.org/WAI/

WAI - ARIA

• link• combobox, options• checkbox• radio, radiogroup• button• progressbar• slider• spinbutton• tree,treeitem

• application• presentation• group• grid, gridcell• tab, tablist, tabpanel• list, listitem• menu, menubar• toolbar• alert

Roles

States

• checked

• disabled

• readonly

• expanded

• valuemin, valuemax, valuenow

ARIA

<div role="dialog" ... >

ARIA

<div role="dialog" ... >

ARIA

<li role="treeitem" aria-expanded="true" ... >

ARIA

<div role="slider" aria-valuemin="1" aria-valuemax="5" aria-valuenow="1”>

ARIA

<div role="region” aria-live=”polite” ... >

Resources

Testing

Just Ask: Integrating Accessibility Throughout Design

Shawn Lawton Henry

http://www.uiaccess.com/accessucd/

Testing

http://developer.yahoo.com/yui/theater/

Assistive Technologies

JAWS: Freedom Scientific

Window-Eyes: GW Micro

ZoomText: Ai Squared

FireVox

• Lists of headings

• Text equivalents for images

• Disable scripting, mouse events

• Validation and testing tools

• Zoom

Toolbars

Toolbars

http://firefox.cita.uiuc.edu/

http://www.paciellogroup.com/resources/wat-ie-about.html

http://www.paciellogroup.com/resources/wat-about.html

• Colour Analyzer: http://juicystudio.com/services/colourcontrast.php

Color Contrast

“For most people, technology makes things easier. For people with disabilities, technology makes things possible.”

- President’s Council on Disability

Questions?