Ajax and Accessibiity

Merging Ajax and
Accessibility
Mark Meeker

The Rich Web Experience
Vienna,VA
September 4-6, 2008

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

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

Ajax is Everywhere

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

Scope

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

Scope

• Screen readers
• Braille displays
• Screen magniﬁcation
• Keyboard only navigation
• Speech recognition

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.

Progressive Enhancement

• Content is king!


• Start with POSH - Plain Old Semantic HTML


• Semantic markup to supply meaning to
content


content
• Serve base content to everyone


content
• Serve base content to everyone
• Add presentation and behavior to enhance
experience


HTML

Content


HTML CSS

Content Presentation


HTML CSS JS

Content Presentation Behavior


HTML CSS JS


o Frills”
“N


HTML CSS JS


ills” it Up”
No Fr ress
“ “D


HTML CSS JS


Frills” s it Up”
it Sing”
“ No “D res “M ake


1 2 3 4

HTML    
CSS    
JS    

The Long Tail

• Universality
• Multiple Devices
• Graded Browser Support
• Search Engine Friendly


1
HTML

CSS

JS


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


2

HTML

CSS

JS



3

HTML

CSS

JS



4

HTML

CSS

JS


Select from known list:

Free form input:

2

HTML 
CSS 
JS 

4

HTML 
CSS 
JS 

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

Hijax

Header

Module 1

Rail

Module 2

Footer

Hijax

Header

Module 1

Rail

Module 2

Footer noscript
page
transition

Hijax

Header

Module 1

Rail

Module 2

Footer noscript Login
page Module
transition

Hijax

Header

Module 1 JS-Enabled
Rail XHR
Module 2

page Module
transition

Hijax

Header

Login Module
Module 1 JS-Enabled
Rail XHR
Module 2

page Module
transition

JS-Enabled
XHR

no-script
page
transition

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://netﬂix.com

Redundant Inputs

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

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

<input> <div>

<a> vs. <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?

1 2 3
4 5 6
7 8 9

http://amazon.com

Is that a button?

http://apple.com

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 speciﬁes 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

Where to Next?

http://facebook.com

Updates

http://ﬁnance.yahoo.com/

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')
else
}
}

http://juicystudio.com/article/improving-ajax-applications-for-jaws-users.php

Set Focus on Update?

http://orbitz.com

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

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


Screen Magniﬁers?

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
• Deﬁne 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=quot;dialogquot; ... >

ARIA

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

ARIA

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

ARIA

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

Testing

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

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 Scientiﬁc

Window-Eyes: GW Micro

ZoomText: Ai Squared

Toolbars

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

Toolbars

http://ﬁrefox.cita.uiuc.edu/

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

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

Color Contrast

• Color Oracle:
http://colororacle.cartography.ch/

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

Getting Started

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

Move away from:

Making it accessible

Move towards:
Keeping it accessible

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

Traffic Signs

• Traffic sign images are from the
Manual of Traffic Signs, by
Richard C. Moeur

• http://www.trafficsign.us

Questions?

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

Ajax and Accessibiity

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Andere mochten auch

Andere mochten auch (20)

Ähnlich wie Ajax and Accessibiity

Ähnlich wie Ajax and Accessibiity (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Ajax and Accessibiity