Open and Accessible
Mark Meeker

About Me
Now...
Previously...

Barriers
“The Sum of Human Knowledge”
Image Source: http://en.wikipedia.org/wiki/Britannica

NEW
v
Barriers
“The Sum of Human Knowledge”

“ 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 the
way you expect them to.

Barriers http://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

Solutions http://www.flickr.com/photos/82046831@N00/514212023/

W3C - WCAG 2.0

Semantic Markup
• Use the HTML elements the way they
were intended.
• There are 91. How many can you name?
• http://www.oneplusyou.com/bb/html_quiz

Progressive Enhancement
• Separate HTML from CSS from JavaScript.
• No in-line style or onclick attributes
http://www.alistapart.com/articles/understandingprogressiveenhancement

Graded Browser Support
• 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
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

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/

Linearization

Linearization
http://ebookers.com

Linearization
State/ Zip/Postal
Examples
Province Code
No Yes United Kingdom, France, Germany
Drop Down Yes United States, Canada, Australia
Input Yes
No No Ireland

Linearization
http://basecamphq.com

Focus

Focus
<input> <div>
vs.
<a> <td>
<button> <img>

Real Link?
http://ebookers.com

Real Checkbox?
http://amazon.com

Real Checkbox?
1 2 3
4 5 6
7 8 9
http://amazon.com

Real Checkbox?
123
456
789
http://amazon.com

Is that a button?
http://apple.com

Where to Next?
http://facebook.com

Updates

Updates
http://finance.yahoo.com/

Updates
http://finance.yahoo.com/

Set Focus on Update?
http://orbitz.com

Set Focus on Update?
<div id=”tripcost” tabindex=\"-1\">
// trip cost markup
</div>
onclick:
document.getElementById('tripcost').focus();

Set Focus on Update?
Screen Magnifiers?

http://apple.com

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

Interaction Patterns
• Filters • Rating Widgets
• Transitions • Sliders
• Auto-complete • Micro-content
• Calendar Pickers • Auto-fill
• Collapse • Expand / Collapse
• Drag and Drop • Inline Validation
• Lightboxes • Zoom
• Yellow Fade • Navigation
• Auto Update • Auto Refresh
• Hover • Carrousel
• Tabs • Inline edit

WAI-ARIA

Replicating the Desktop
• <div> can be a button
• <span> can be a slider
• Need a better API
• Leverage accessibility support in the OS

WAI - ARIA
• W3C Web Accessibility Initiative
Accessible 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/

Roles
• link • application
• combobox, options • presentation
• checkbox • group
• radio, radiogroup • grid, gridcell
• button • tab, tablist, tabpanel
• progressbar • list, listitem
• slider • menu, menubar
• spinbutton • toolbar
• tree,treeitem • alert

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

Toolbars
• Lists of headings
• Text equivalents for images
• Disable scripting, mouse events
• Validation and testing tools
• Zoom

Toolbars
http://firefox.cita.uiuc.edu/
http://www.paciellogroup.com/resources/wat-ie-about.html
http://www.paciellogroup.com/resources/wat-about.html

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

“For most people, technology
makes things easier. For people
with disabilities, technology
makes things possible.”
- President’s Council on Disability

Questions?