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
2Merging Ajax and Accessibility -
Architect, UI Engineering
Orbitz Wordwide
orbitz.comcheaptickets.comebookers.comtraveport.com
Orbitz is Hiring!
UI Engineers
Java Developers
Information Architects
Designers
3Merging Ajax and Accessibility -
ThenMostly static pages
Full page refreshes
Used standard (X)HTML forms
Checklist mentality for compliance
4Merging Ajax and Accessibility -
Now
5Merging Ajax and Accessibility -
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
6Merging Ajax and Accessibility -
7Merging Ajax and Accessibility -
Ajax is here to stay
8Merging Ajax and Accessibility -
Accessibility is here to stay
9Merging Ajax and Accessibility -
http://blaugh.com/2006/08/21/ajax-makes-everything-better/
10Merging Ajax and Accessibility -
Can you do both?
11Merging Ajax and Accessibility -
Making sites accessible
12Merging Ajax and Accessibility -
Keeping sites accessible
13Merging Ajax and Accessibility -
Keeping Sites AccessibleDon’t make things worse
Have to start somewhere
14Merging Ajax and Accessibility -
Can’t Bolt Ajax on at the EndNew interactions require more considerations
Not just client-side
Moved towards building applications
15Merging Ajax and Accessibility -
16Merging Ajax and Accessibility -
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
17Merging Ajax and Accessibility -
Entire Life-cycleWireframe Reviews
Design
Implementation
Testing
18Merging Ajax and Accessibility -
Wireframe ReviewsExposes concerns to others
On-going education
Iterative improvements
19Merging Ajax and Accessibility -
TestingDo user testing with AT
Developers @#$% at testing interfaces
Test with AT to validate decisions
YUI Theater - “Introduction to Screen Readers”
20Merging Ajax and Accessibility -
Ajax versus Accessibility
21Merging Ajax and Accessibility -
Hurdles1. Supporting no-script
22Merging Ajax and Accessibility -
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.
23Merging Ajax and Accessibility -
Long TailUniversality
Multiple Devices
Graded Browser Support
24Merging Ajax and Accessibility -
Progressive Enhancement
Structure BehaviorPresentation
25Merging Ajax and Accessibility -
Progressive EnhancementContent is king!
Semantic markup to supply meaning
Serve base content to everyone
Add presentation and behavior to enhance experience
26Merging Ajax and Accessibility -
Structure BehaviorPresentation
XHTML CSS JavaScript
27Merging Ajax and Accessibility -
Progressive EnhancementBenefits
Separation of layers
Phased development
Cleaner code
Easier to validate and unit test
Improved re-use of styles and behaviors
28Merging Ajax and Accessibility -
Hurdles1. Supporting no-script
2. Avoiding “separate but equal”
33Merging Ajax and Accessibility -
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.
34Merging Ajax and Accessibility -
Separate but Equal?
35Merging Ajax and Accessibility -
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
36Merging Ajax and Accessibility -
Hijax
37Merging Ajax and Accessibility -
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
38Merging Ajax and Accessibility -
Hijax BenefitsModular development
Improved re-use of server-side code
Don’t Repeat Yourself (DRY principal)
39Merging Ajax and Accessibility -
XHR
Hijax
44Merging Ajax and Accessibility -
Hurdles1. Supporting no-script
2. Avoiding “separate but equal”
3. Balancing the interface
48Merging Ajax and Accessibility -
Balancing the InterfaceRedundant inputs
Keyboard navigation
Flow of the page
Setting focus
49Merging Ajax and Accessibility -
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
50Merging Ajax and Accessibility -
Redundant Interfaces
51Merging Ajax and Accessibility -
Slider to choose a max price
Current price?
Very visual
52Merging Ajax and Accessibility -
Move one unit?
53Merging Ajax and Accessibility -
Setting exact price?
54Merging Ajax and Accessibility -
55Merging Ajax and Accessibility -
Redundant InterfacesMultiple options
Consider how the user will interact
Forced to identify use cases
56Merging Ajax and Accessibility -
Keyboard Navigation
57Merging Ajax and Accessibility -
Keyboard NavigationConsider keyboard input for controls
Seek out CLI based developers for feedback
59Merging Ajax and Accessibility -
Flow of the Page
60Merging Ajax and Accessibility -
61Merging Ajax and Accessibility -
62Merging Ajax and Accessibility -
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
63Merging Ajax and Accessibility -
Setting Focus
64Merging Ajax and Accessibility -
http://firefox.cita.uiuc.edu/
66Merging Ajax and Accessibility -
Setting FocusUse with caution
Better to lead with jump links and headings
67Merging Ajax and Accessibility -
Hurdles1. Supporting no-script
2. Avoiding “separate but equal”
3. Balancing the interface
4. Stretching the browser
68Merging Ajax and Accessibility -
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
69Merging Ajax and Accessibility -
WAI-ARIAW3C’s Accessible Rich Internet Applications
Expands UI controls to hook into desktop API
Supported with FF 1.5
Support in frameworks
70Merging Ajax and Accessibility -
RolesIdentifies the “what”
Mark-up controls with well-defined semantic meaning
controls: sliders, trees, alerts, dialogs
structure: navigation, toolbars , tabs
Live Regions
71Merging Ajax and Accessibility -
StatesGives meaning to Roles
Checked, expanded, disabled
Calls out various levels and nesting in a tree control
Type of update of a live region
72Merging Ajax and Accessibility -
ARIA BenefitsShared API
Can be baked into frameworks
Clean, standard mark-up
73Merging Ajax and Accessibility -
74Merging Ajax and Accessibility -
<span tabindex="0" role="role:slider" aaa:valuenow="400" aaa:valuemin="100" aaa:valuemax="550"id="price-slider" title="total cost slider" />
75Merging Ajax and Accessibility -
“ The person who removes a mountain begins by carrying
away small stones. ”
Build on a solid foundation.
Focus on usability.
Improvements benefit everyone.
76Merging Ajax and Accessibility -
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/
77Merging Ajax and Accessibility -
Slides and Contacthttp://markmeeker.com/events/tae-sf-2007
[email protected] or [email protected]
78Merging Ajax and Accessibility -