Merging Ajax and Accessibilityajaxexperience.techtarget.com/.../Meeker_Mark_Accessibility.pdf ·...

transcript

Merging Ajax and Accessibility

1Merging Ajax and Accessibility -

Mark MeekerArchitect, Orbitz Worldwide

The Ajax ExperienceSan Francisco - July 27, 2007

Mark Meeker

Architect, UI Engineering

Orbitz Wordwide

orbitz.comcheaptickets.comebookers.comtraveport.com

Orbitz is Hiring!

UI Engineers

Java Developers

Information Architects

Designers

ThenMostly static pages

Full page refreshes

Used standard (X)HTML forms

Checklist mentality for compliance

Filters - Transitions - Auto Complete - Calendar Picker - Collapse - Drag and

Drop - Lightbox Forms - Fade - Auto Update - Hover - Module Tabs -

Ratings Widget - Sliders - Micro-content popup - Auto Fill -

Expand - Inline Validation - Zoom - Navigation - Auto Refresh - Carrousel

NowHighly interactive model

Manipulating content on the fly

Non-user initiated updates

New kinds of controls/widgets

Usability tests for compliance

Ajax is here to stay

Accessibility is here to stay

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

Can you do both?

Making sites accessible

Keeping sites accessible

Keeping Sites AccessibleDon’t make things worse

Have to start somewhere

Can’t Bolt Ajax on at the EndNew interactions require more considerations

Not just client-side

Moved towards building applications

Can I get a side of accessibility?

Menu: Hot Doug’s, Chicago, IL

Train TeamsGet buy-in

De-bunk accessibility myths

More to AT than just screen readers

Educate on correct approach

Empower to be champions of accessibility

Applies across the organization

Entire Life-cycleWireframe Reviews

Design

Implementation

Testing

Wireframe ReviewsExposes concerns to others

On-going education

Iterative improvements

TestingDo user testing with AT

Developers @#$% at testing interfaces

Test with AT to validate decisions

YUI Theater - “Introduction to Screen Readers”

Ajax versus Accessibility

Hurdles1. Supporting no-script

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.

Long TailUniversality

Multiple Devices

Graded Browser Support

Progressive Enhancement

Structure BehaviorPresentation

Progressive EnhancementContent is king!

Semantic markup to supply meaning

Serve base content to everyone

Add presentation and behavior to enhance experience

Structure BehaviorPresentation

XHTML CSS JavaScript

Progressive EnhancementBenefits

Separation of layers

Phased development

Cleaner code

Easier to validate and unit test

Improved re-use of styles and behaviors

2. Avoiding “separate but equal”

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.

Separate but Equal?

Filters - Transitions - Auto Complete - Calendar Picker - Collapse - Drag and

Drop - Lightbox Forms - Fade - Auto Update - Hover - Module Tabs -

Ratings Widget - Sliders - Micro-content popup - Auto Fill - Expand - Auto Refresh - Zoom -

Navigation - Inline Login - Carrousel

HijaxTerm 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 BenefitsModular development

Improved re-use of server-side code

Don’t Repeat Yourself (DRY principal)

3. Balancing the interface

Balancing the InterfaceRedundant inputs

Keyboard navigation

Flow of the page

Setting focus

Balancing the Interface Benefits

Improved awareness of accessibility

Greater concern for usability in general

Introduction of UI pattern library

Helps interface evolve quicker

End goal of making it usable

Redundant Interfaces

Slider to choose a max price

Current price?

Very visual

Move one unit?

Setting exact price?

Redundant InterfacesMultiple options

Consider how the user will interact

Forced to identify use cases

Keyboard Navigation

Keyboard NavigationConsider keyboard input for controls

Seek out CLI based developers for feedback

Flow of the Page

Flow of the PageLinear page flow

Lead the user towards the updates

Consider the viewport of the browser

Insert into existing elements

Avoid inserting at the document level

Setting Focus

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

Setting FocusUse with caution

Better to lead with jump links and headings

3. Balancing the interface

4. Stretching the browser

Stretching the BrowserBringing desktop applications to the browser

<div> can be a button

<span> can be a slider

Need a better API

Leverage accessibility support in the OS

WAI-ARIAW3C’s Accessible Rich Internet Applications

Expands UI controls to hook into desktop API

Supported with FF 1.5

Support in frameworks

RolesIdentifies the “what”

Mark-up controls with well-defined semantic meaning

controls: sliders, trees, alerts, dialogs

structure: navigation, toolbars , tabs

Live Regions

StatesGives meaning to Roles

Checked, expanded, disabled

Calls out various levels and nesting in a tree control

Type of update of a live region

ARIA BenefitsShared API

Can be baked into frameworks

Clean, standard mark-up

“ The person who removes a mountain begins by carrying

away small stones. ”

Build on a solid foundation.

Focus on usability.

Improvements benefit everyone.

Photo Creditshttp://www.flickr.com/photos/pdxsurreal/242001382/

http://www.flickr.com/photos/pedersoj/504469871/

http://www.flickr.com/photos/pantagrapher/663227477/

http://www.flickr.com/photos/cafemama/156916738/

http://www.flickr.com/photos/wing-mui/14362747/

Slides and Contacthttp://markmeeker.com/events/tae-sf-2007

mmeeker@orbitz.com or mark@markmeeker.com

Merging Ajax and Accessibilityajaxexperience.techtarget.com/.../Meeker_Mark_Accessibility.pdf ·...

Documents