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

What Changed?

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

Universality

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

Progressive Enhancement • Content is king!

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

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

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

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

Progressive Enhancement HTML Content

Progressive Enhancement HTML CSS Content Presentation

Progressive Enhancement HTML CSS JS Content Presentation Behavior

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

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

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

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

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

Progressive Enhancement 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> <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>

Progressive Enhancement 2 HTML  CSS  JS 

Progressive Enhancement 3 HTML  CSS  JS 

Progressive Enhancement 4 HTML  CSS  JS 

Select from known list: Free form input:

2 HTML  CSS  JS  4 HTML  CSS  JS 

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

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 Footer noscript Login page Module transition

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

JS-Enabled XHR no-script page transition

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

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

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

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') objHidden.setAttribute('value', '0'); else objHidden.setAttribute('value', '1'); } } http://juicystudio.com/article/improving-ajax-applications-for-jaws-users.php

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

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

Set Focus on Update? Screen Magniﬁers?

http://apple.com

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 • 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

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

by Mark Meeker on Dec 04, 2008

Accessibility

Categories

Tags

Upload Details

Usage Rights

1 Embed 1

Statistics

Ajax and Accessibiity — Presentation Transcript