1.
Merging Ajax and
Accessibility
Mark Meeker
The Rich Web Experience
Vienna,VA
September 4-6, 2008

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

3.
What Changed?

4.
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

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

6.
Scope

7.
Scope
• Blind, low vision, color blindness
• Limited mobility
• Learning disabilities
• Deaf, hearing impaired

8.
Scope
• Screen readers
• Braille displays
• Screen magnification
• Keyboard only navigation
• Speech recognition

9.
Universality

10.
WCAG 1.0
6.3 Ensure that pages are usable when
scripts, applets, or other programmatic
objects are turned off or not supported. If
this is not possible, provide equivalent
information on an alternative accessible page.

11.
Progressive Enhancement

12.
Progressive Enhancement
• Content is king!

13.
Progressive Enhancement
• Content is king!
• Start with POSH - Plain Old Semantic HTML

14.
Progressive Enhancement
• Content is king!
• Start with POSH - Plain Old Semantic HTML
• Semantic markup to supply meaning to
content

15.
Progressive Enhancement
• Content is king!
• Start with POSH - Plain Old Semantic HTML
• Semantic markup to supply meaning to
content
• Serve base content to everyone

16.
Progressive Enhancement
• Content is king!
• Start with POSH - Plain Old Semantic HTML
• Semantic markup to supply meaning to
content
• Serve base content to everyone
• Add presentation and behavior to enhance
experience

17.
Progressive Enhancement

18.
Progressive Enhancement
HTML
Content

19.
Progressive Enhancement
HTML CSS
Content Presentation

20.
Progressive Enhancement
HTML CSS JS
Content Presentation Behavior

21.
Progressive Enhancement
HTML CSS JS
Content Presentation Behavior
o Frills”
“N

22.
Progressive Enhancement
HTML CSS JS
Content Presentation Behavior
ills” it Up”
No Fr ress
“ “D

23.
Progressive Enhancement
HTML CSS JS
Content Presentation Behavior
Frills” s it Up”
it Sing”
“ No “D res “M ake

24.
Progressive Enhancement
1 2 3 4
HTML    
CSS    
JS    

25.
The Long Tail
• Universality
• Multiple Devices
• Graded Browser Support
• Search Engine Friendly

26.
Progressive Enhancement

27.
Progressive Enhancement
1
HTML

CSS

JS


28.
<img src=”/map/image” />
<ul>
<li><a href=”/map/move?dir=n”>North</a></li>
<li><a href=”/map/move?dir=e”>East</a></li>
<li><a href=”/map/move?dir=s”>South</a></li>
<li><a href=”/map/move?dir=w”>West</a></li>
...
</ul>
<ul>
<li><a href=”/map/zoom?level=1”>Zoom Level 1</a></li>
<li><a href=”/map/zoom?level=2”>Zoom Level 2</a></li>
<li><a href=”/map/zoom?level=3”>Zoom Level 3</a></li>
...
</ul>

29.
Progressive Enhancement
2
HTML

CSS

JS


30.
Progressive Enhancement
3
HTML

CSS

JS


31.
Progressive Enhancement
4
HTML

CSS

JS


32.
Select from known list:
Free form input:

33.
2
HTML 
CSS 
JS 
4
HTML 
CSS 
JS 

34.
2
HTML 
CSS 
JS 
4
HTML 
CSS 
JS 

35.
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

36.
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

37.
Hijax
• Term coined by Jeremy Keith
• Bulletproof Ajax
(http://bulletproofajax.com/)
• Pull in portion of page via Ajax when XHR
is supported
• Re-use same portion when a full page
refresh is required

38.
Hijax
Header
Module 1
Rail
Module 2
Footer

39.
Hijax
Header
Module 1
Rail
Module 2
Footer noscript
page
transition

40.
Hijax
Header
Module 1
Rail
Module 2
Footer noscript Login
page Module
transition

41.
Hijax
Header
Module 1 JS-Enabled
Rail XHR
Module 2
Footer noscript Login
page Module
transition

42.
Hijax
Header
Login Module
Module 1 JS-Enabled
Rail XHR
Module 2
Footer noscript Login
page Module
transition

43.
JS-Enabled
XHR
no-script
page
transition

44.
Redundant Inputs

45.
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

46.
Redundant Inputs
http://netflix.com

47.
Redundant Inputs
http://developer.yahoo.com/yui/examples/

48.
Linearization

49.
Linearization
http://ebookers.com

50.
Linearization
http://ebookers.com

51.
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

52.
Linearization

53.
Linearization
http://basecamphq.com

54.
Linearization
http://basecamphq.com

55.
Focus

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

57.
Real Link?
http://ebookers.com

58.
Real Checkbox?
http://amazon.com

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

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

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

62.
Tab Index
Focusable with mouse or
Tab Index Navigable via tab key
element.focus()
Follows default behavior of
Follows default behavior of
Not present element (only form controls
element
and anchors receive focus)
Tabindex value directly
>0 Yes specifies where this element
is positioned in the tab order.
In tab order relative to
0 Yes element’s position in
document
-1 Yes Not in tab order.
http://www.dojotoolkit.org/book/export/html/118

63.
Where to Next?
http://facebook.com

64.
Updates

65.
Updates
http://finance.yahoo.com/

66.
Updates
http://finance.yahoo.com/

67.
Updating the Buffer
function prepareBuffer()
{
var objNew = document.createElement('p');
var objHidden = document.createElement('input');
objHidden.setAttribute('type', 'hidden');
objHidden.setAttribute('value', '1');
objHidden.setAttribute('id', 'virtualbufferupdate');
objHidden.setAttribute('name', 'virtualbufferupdate');
objNew.appendChild(objHidden);
document.body.appendChild(objNew);
}
function updateBuffer()
{
var objHidden = document.getElementById('virtualbufferupdate');
if (objHidden)
{
if (objHidden.getAttribute('value') == '1')
objHidden.setAttribute('value', '0');
else
objHidden.setAttribute('value', '1');
}
}
http://juicystudio.com/article/improving-ajax-applications-for-jaws-users.php

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

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

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

71.
Set Focus on Update?
Screen Magnifiers?

72.
http://apple.com

73.
http://apple.com

74.
WAI-ARIA

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

76.
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/

77.
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

78.
States
• checked
• disabled
• readonly
• expanded
• valuemin, valuemax, valuenow

79.
ARIA

80.
ARIA
<div role=quot;dialogquot; ... >

81.
ARIA

82.
ARIA
<div role=quot;dialogquot; ... >

83.
ARIA

84.
ARIA
<li role=quot;treeitemquot; aria-expanded=quot;truequot; ... >

85.
ARIA

86.
ARIA
<div role=quot;sliderquot; aria-valuemin=quot;1quot; aria-valuemax=quot;5quot; aria-valuenow=quot;1”>

87.
ARIA

88.
ARIA
<div role=quot;region” aria-live=”polite” ... >

89.
Testing

90.
Testing
• Do user testing with Assistive Technologies (AT)
• Developers @#$% at testing interfaces
• Test with AT to validate decisions
• Test to make sure its usable

91.
Testing
Just Ask: Integrating Accessibility
Throughout Design
Shawn Lawton Henry
http://www.uiaccess.com/accessucd/

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

93.
Assistive Technologies
JAWS: Freedom Scientific
Window-Eyes: GW Micro
ZoomText: Ai Squared

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

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

96.
Color Contrast
• Color Oracle:
http://colororacle.cartography.ch/
• Colour Analyzer:
http://juicystudio.com/services/colourcontrast.php

97.
Getting Started
• Start with new features
• Learn the patterns
• Don’t make things worse
• Apply lessons learned when re-factoring existing code

98.
Move away from:
Making it accessible
Move towards:
Keeping it accessible

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

100.
Traffic Signs
• Traffic sign images are from the
Manual of Traffic Signs, by
Richard C. Moeur
• http://www.trafficsign.us

101.
Questions?
• email: mark@markmeeker.com
• blog: http://markmeeker.com
• twitter: @meeker