![Page 1: Merging Ajax and Accessibilityajaxexperience.techtarget.com/.../Meeker_Mark_Accessibility.pdf · Supporting no-script Merging Ajax and Accessibility -22. WCAG 1.0 6.3 Ensure that](https://reader030.vdocuments.us/reader030/viewer/2022040803/5e3d441432b4192e4a4125fc/html5/thumbnails/1.jpg)
Merging Ajax and Accessibility
1Merging Ajax and Accessibility -
Mark MeekerArchitect, Orbitz Worldwide
The Ajax ExperienceSan Francisco - July 27, 2007
![Page 2: Merging Ajax and Accessibilityajaxexperience.techtarget.com/.../Meeker_Mark_Accessibility.pdf · Supporting no-script Merging Ajax and Accessibility -22. WCAG 1.0 6.3 Ensure that](https://reader030.vdocuments.us/reader030/viewer/2022040803/5e3d441432b4192e4a4125fc/html5/thumbnails/2.jpg)
Mark Meeker
2Merging Ajax and Accessibility -
Architect, UI Engineering
Orbitz Wordwide
orbitz.comcheaptickets.comebookers.comtraveport.com
![Page 3: Merging Ajax and Accessibilityajaxexperience.techtarget.com/.../Meeker_Mark_Accessibility.pdf · Supporting no-script Merging Ajax and Accessibility -22. WCAG 1.0 6.3 Ensure that](https://reader030.vdocuments.us/reader030/viewer/2022040803/5e3d441432b4192e4a4125fc/html5/thumbnails/3.jpg)
Orbitz is Hiring!
UI Engineers
Java Developers
Information Architects
Designers
3Merging Ajax and Accessibility -
![Page 4: Merging Ajax and Accessibilityajaxexperience.techtarget.com/.../Meeker_Mark_Accessibility.pdf · Supporting no-script Merging Ajax and Accessibility -22. WCAG 1.0 6.3 Ensure that](https://reader030.vdocuments.us/reader030/viewer/2022040803/5e3d441432b4192e4a4125fc/html5/thumbnails/4.jpg)
ThenMostly static pages
Full page refreshes
Used standard (X)HTML forms
Checklist mentality for compliance
4Merging Ajax and Accessibility -
![Page 5: Merging Ajax and Accessibilityajaxexperience.techtarget.com/.../Meeker_Mark_Accessibility.pdf · Supporting no-script Merging Ajax and Accessibility -22. WCAG 1.0 6.3 Ensure that](https://reader030.vdocuments.us/reader030/viewer/2022040803/5e3d441432b4192e4a4125fc/html5/thumbnails/5.jpg)
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
![Page 6: Merging Ajax and Accessibilityajaxexperience.techtarget.com/.../Meeker_Mark_Accessibility.pdf · Supporting no-script Merging Ajax and Accessibility -22. WCAG 1.0 6.3 Ensure that](https://reader030.vdocuments.us/reader030/viewer/2022040803/5e3d441432b4192e4a4125fc/html5/thumbnails/6.jpg)
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 -
![Page 7: Merging Ajax and Accessibilityajaxexperience.techtarget.com/.../Meeker_Mark_Accessibility.pdf · Supporting no-script Merging Ajax and Accessibility -22. WCAG 1.0 6.3 Ensure that](https://reader030.vdocuments.us/reader030/viewer/2022040803/5e3d441432b4192e4a4125fc/html5/thumbnails/7.jpg)
7Merging Ajax and Accessibility -
![Page 8: Merging Ajax and Accessibilityajaxexperience.techtarget.com/.../Meeker_Mark_Accessibility.pdf · Supporting no-script Merging Ajax and Accessibility -22. WCAG 1.0 6.3 Ensure that](https://reader030.vdocuments.us/reader030/viewer/2022040803/5e3d441432b4192e4a4125fc/html5/thumbnails/8.jpg)
Ajax is here to stay
8Merging Ajax and Accessibility -
![Page 9: Merging Ajax and Accessibilityajaxexperience.techtarget.com/.../Meeker_Mark_Accessibility.pdf · Supporting no-script Merging Ajax and Accessibility -22. WCAG 1.0 6.3 Ensure that](https://reader030.vdocuments.us/reader030/viewer/2022040803/5e3d441432b4192e4a4125fc/html5/thumbnails/9.jpg)
Accessibility is here to stay
9Merging Ajax and Accessibility -
![Page 10: Merging Ajax and Accessibilityajaxexperience.techtarget.com/.../Meeker_Mark_Accessibility.pdf · Supporting no-script Merging Ajax and Accessibility -22. WCAG 1.0 6.3 Ensure that](https://reader030.vdocuments.us/reader030/viewer/2022040803/5e3d441432b4192e4a4125fc/html5/thumbnails/10.jpg)
http://blaugh.com/2006/08/21/ajax-makes-everything-better/
10Merging Ajax and Accessibility -
![Page 11: Merging Ajax and Accessibilityajaxexperience.techtarget.com/.../Meeker_Mark_Accessibility.pdf · Supporting no-script Merging Ajax and Accessibility -22. WCAG 1.0 6.3 Ensure that](https://reader030.vdocuments.us/reader030/viewer/2022040803/5e3d441432b4192e4a4125fc/html5/thumbnails/11.jpg)
Can you do both?
11Merging Ajax and Accessibility -
![Page 12: Merging Ajax and Accessibilityajaxexperience.techtarget.com/.../Meeker_Mark_Accessibility.pdf · Supporting no-script Merging Ajax and Accessibility -22. WCAG 1.0 6.3 Ensure that](https://reader030.vdocuments.us/reader030/viewer/2022040803/5e3d441432b4192e4a4125fc/html5/thumbnails/12.jpg)
Making sites accessible
12Merging Ajax and Accessibility -
![Page 13: Merging Ajax and Accessibilityajaxexperience.techtarget.com/.../Meeker_Mark_Accessibility.pdf · Supporting no-script Merging Ajax and Accessibility -22. WCAG 1.0 6.3 Ensure that](https://reader030.vdocuments.us/reader030/viewer/2022040803/5e3d441432b4192e4a4125fc/html5/thumbnails/13.jpg)
Keeping sites accessible
13Merging Ajax and Accessibility -
![Page 14: Merging Ajax and Accessibilityajaxexperience.techtarget.com/.../Meeker_Mark_Accessibility.pdf · Supporting no-script Merging Ajax and Accessibility -22. WCAG 1.0 6.3 Ensure that](https://reader030.vdocuments.us/reader030/viewer/2022040803/5e3d441432b4192e4a4125fc/html5/thumbnails/14.jpg)
Keeping Sites AccessibleDon’t make things worse
Have to start somewhere
14Merging Ajax and Accessibility -
![Page 15: Merging Ajax and Accessibilityajaxexperience.techtarget.com/.../Meeker_Mark_Accessibility.pdf · Supporting no-script Merging Ajax and Accessibility -22. WCAG 1.0 6.3 Ensure that](https://reader030.vdocuments.us/reader030/viewer/2022040803/5e3d441432b4192e4a4125fc/html5/thumbnails/15.jpg)
Can’t Bolt Ajax on at the EndNew interactions require more considerations
Not just client-side
Moved towards building applications
15Merging Ajax and Accessibility -
![Page 16: Merging Ajax and Accessibilityajaxexperience.techtarget.com/.../Meeker_Mark_Accessibility.pdf · Supporting no-script Merging Ajax and Accessibility -22. WCAG 1.0 6.3 Ensure that](https://reader030.vdocuments.us/reader030/viewer/2022040803/5e3d441432b4192e4a4125fc/html5/thumbnails/16.jpg)
16Merging Ajax and Accessibility -
Can I get a side of accessibility?
Menu: Hot Doug’s, Chicago, IL
![Page 17: Merging Ajax and Accessibilityajaxexperience.techtarget.com/.../Meeker_Mark_Accessibility.pdf · Supporting no-script Merging Ajax and Accessibility -22. WCAG 1.0 6.3 Ensure that](https://reader030.vdocuments.us/reader030/viewer/2022040803/5e3d441432b4192e4a4125fc/html5/thumbnails/17.jpg)
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 -
![Page 18: Merging Ajax and Accessibilityajaxexperience.techtarget.com/.../Meeker_Mark_Accessibility.pdf · Supporting no-script Merging Ajax and Accessibility -22. WCAG 1.0 6.3 Ensure that](https://reader030.vdocuments.us/reader030/viewer/2022040803/5e3d441432b4192e4a4125fc/html5/thumbnails/18.jpg)
Entire Life-cycleWireframe Reviews
Design
Implementation
Testing
18Merging Ajax and Accessibility -
![Page 19: Merging Ajax and Accessibilityajaxexperience.techtarget.com/.../Meeker_Mark_Accessibility.pdf · Supporting no-script Merging Ajax and Accessibility -22. WCAG 1.0 6.3 Ensure that](https://reader030.vdocuments.us/reader030/viewer/2022040803/5e3d441432b4192e4a4125fc/html5/thumbnails/19.jpg)
Wireframe ReviewsExposes concerns to others
On-going education
Iterative improvements
19Merging Ajax and Accessibility -
![Page 20: Merging Ajax and Accessibilityajaxexperience.techtarget.com/.../Meeker_Mark_Accessibility.pdf · Supporting no-script Merging Ajax and Accessibility -22. WCAG 1.0 6.3 Ensure that](https://reader030.vdocuments.us/reader030/viewer/2022040803/5e3d441432b4192e4a4125fc/html5/thumbnails/20.jpg)
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 -
![Page 21: Merging Ajax and Accessibilityajaxexperience.techtarget.com/.../Meeker_Mark_Accessibility.pdf · Supporting no-script Merging Ajax and Accessibility -22. WCAG 1.0 6.3 Ensure that](https://reader030.vdocuments.us/reader030/viewer/2022040803/5e3d441432b4192e4a4125fc/html5/thumbnails/21.jpg)
Ajax versus Accessibility
21Merging Ajax and Accessibility -
![Page 22: Merging Ajax and Accessibilityajaxexperience.techtarget.com/.../Meeker_Mark_Accessibility.pdf · Supporting no-script Merging Ajax and Accessibility -22. WCAG 1.0 6.3 Ensure that](https://reader030.vdocuments.us/reader030/viewer/2022040803/5e3d441432b4192e4a4125fc/html5/thumbnails/22.jpg)
Hurdles1. Supporting no-script
22Merging Ajax and Accessibility -
![Page 23: Merging Ajax and Accessibilityajaxexperience.techtarget.com/.../Meeker_Mark_Accessibility.pdf · Supporting no-script Merging Ajax and Accessibility -22. WCAG 1.0 6.3 Ensure that](https://reader030.vdocuments.us/reader030/viewer/2022040803/5e3d441432b4192e4a4125fc/html5/thumbnails/23.jpg)
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 -
![Page 24: Merging Ajax and Accessibilityajaxexperience.techtarget.com/.../Meeker_Mark_Accessibility.pdf · Supporting no-script Merging Ajax and Accessibility -22. WCAG 1.0 6.3 Ensure that](https://reader030.vdocuments.us/reader030/viewer/2022040803/5e3d441432b4192e4a4125fc/html5/thumbnails/24.jpg)
Long TailUniversality
Multiple Devices
Graded Browser Support
24Merging Ajax and Accessibility -
![Page 25: Merging Ajax and Accessibilityajaxexperience.techtarget.com/.../Meeker_Mark_Accessibility.pdf · Supporting no-script Merging Ajax and Accessibility -22. WCAG 1.0 6.3 Ensure that](https://reader030.vdocuments.us/reader030/viewer/2022040803/5e3d441432b4192e4a4125fc/html5/thumbnails/25.jpg)
Progressive Enhancement
Structure BehaviorPresentation
25Merging Ajax and Accessibility -
![Page 26: Merging Ajax and Accessibilityajaxexperience.techtarget.com/.../Meeker_Mark_Accessibility.pdf · Supporting no-script Merging Ajax and Accessibility -22. WCAG 1.0 6.3 Ensure that](https://reader030.vdocuments.us/reader030/viewer/2022040803/5e3d441432b4192e4a4125fc/html5/thumbnails/26.jpg)
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 -
![Page 27: Merging Ajax and Accessibilityajaxexperience.techtarget.com/.../Meeker_Mark_Accessibility.pdf · Supporting no-script Merging Ajax and Accessibility -22. WCAG 1.0 6.3 Ensure that](https://reader030.vdocuments.us/reader030/viewer/2022040803/5e3d441432b4192e4a4125fc/html5/thumbnails/27.jpg)
Structure BehaviorPresentation
XHTML CSS JavaScript
27Merging Ajax and Accessibility -
![Page 28: Merging Ajax and Accessibilityajaxexperience.techtarget.com/.../Meeker_Mark_Accessibility.pdf · Supporting no-script Merging Ajax and Accessibility -22. WCAG 1.0 6.3 Ensure that](https://reader030.vdocuments.us/reader030/viewer/2022040803/5e3d441432b4192e4a4125fc/html5/thumbnails/28.jpg)
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 -
![Page 29: Merging Ajax and Accessibilityajaxexperience.techtarget.com/.../Meeker_Mark_Accessibility.pdf · Supporting no-script Merging Ajax and Accessibility -22. WCAG 1.0 6.3 Ensure that](https://reader030.vdocuments.us/reader030/viewer/2022040803/5e3d441432b4192e4a4125fc/html5/thumbnails/29.jpg)
![Page 30: Merging Ajax and Accessibilityajaxexperience.techtarget.com/.../Meeker_Mark_Accessibility.pdf · Supporting no-script Merging Ajax and Accessibility -22. WCAG 1.0 6.3 Ensure that](https://reader030.vdocuments.us/reader030/viewer/2022040803/5e3d441432b4192e4a4125fc/html5/thumbnails/30.jpg)
![Page 31: Merging Ajax and Accessibilityajaxexperience.techtarget.com/.../Meeker_Mark_Accessibility.pdf · Supporting no-script Merging Ajax and Accessibility -22. WCAG 1.0 6.3 Ensure that](https://reader030.vdocuments.us/reader030/viewer/2022040803/5e3d441432b4192e4a4125fc/html5/thumbnails/31.jpg)
![Page 32: Merging Ajax and Accessibilityajaxexperience.techtarget.com/.../Meeker_Mark_Accessibility.pdf · Supporting no-script Merging Ajax and Accessibility -22. WCAG 1.0 6.3 Ensure that](https://reader030.vdocuments.us/reader030/viewer/2022040803/5e3d441432b4192e4a4125fc/html5/thumbnails/32.jpg)
![Page 33: Merging Ajax and Accessibilityajaxexperience.techtarget.com/.../Meeker_Mark_Accessibility.pdf · Supporting no-script Merging Ajax and Accessibility -22. WCAG 1.0 6.3 Ensure that](https://reader030.vdocuments.us/reader030/viewer/2022040803/5e3d441432b4192e4a4125fc/html5/thumbnails/33.jpg)
Hurdles1. Supporting no-script
2. Avoiding “separate but equal”
33Merging Ajax and Accessibility -
![Page 34: Merging Ajax and Accessibilityajaxexperience.techtarget.com/.../Meeker_Mark_Accessibility.pdf · Supporting no-script Merging Ajax and Accessibility -22. WCAG 1.0 6.3 Ensure that](https://reader030.vdocuments.us/reader030/viewer/2022040803/5e3d441432b4192e4a4125fc/html5/thumbnails/34.jpg)
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 -
![Page 35: Merging Ajax and Accessibilityajaxexperience.techtarget.com/.../Meeker_Mark_Accessibility.pdf · Supporting no-script Merging Ajax and Accessibility -22. WCAG 1.0 6.3 Ensure that](https://reader030.vdocuments.us/reader030/viewer/2022040803/5e3d441432b4192e4a4125fc/html5/thumbnails/35.jpg)
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
![Page 36: Merging Ajax and Accessibilityajaxexperience.techtarget.com/.../Meeker_Mark_Accessibility.pdf · Supporting no-script Merging Ajax and Accessibility -22. WCAG 1.0 6.3 Ensure that](https://reader030.vdocuments.us/reader030/viewer/2022040803/5e3d441432b4192e4a4125fc/html5/thumbnails/36.jpg)
36Merging Ajax and Accessibility -
![Page 37: Merging Ajax and Accessibilityajaxexperience.techtarget.com/.../Meeker_Mark_Accessibility.pdf · Supporting no-script Merging Ajax and Accessibility -22. WCAG 1.0 6.3 Ensure that](https://reader030.vdocuments.us/reader030/viewer/2022040803/5e3d441432b4192e4a4125fc/html5/thumbnails/37.jpg)
Hijax
37Merging Ajax and Accessibility -
![Page 38: Merging Ajax and Accessibilityajaxexperience.techtarget.com/.../Meeker_Mark_Accessibility.pdf · Supporting no-script Merging Ajax and Accessibility -22. WCAG 1.0 6.3 Ensure that](https://reader030.vdocuments.us/reader030/viewer/2022040803/5e3d441432b4192e4a4125fc/html5/thumbnails/38.jpg)
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 -
![Page 39: Merging Ajax and Accessibilityajaxexperience.techtarget.com/.../Meeker_Mark_Accessibility.pdf · Supporting no-script Merging Ajax and Accessibility -22. WCAG 1.0 6.3 Ensure that](https://reader030.vdocuments.us/reader030/viewer/2022040803/5e3d441432b4192e4a4125fc/html5/thumbnails/39.jpg)
Hijax BenefitsModular development
Improved re-use of server-side code
Don’t Repeat Yourself (DRY principal)
39Merging Ajax and Accessibility -
![Page 40: Merging Ajax and Accessibilityajaxexperience.techtarget.com/.../Meeker_Mark_Accessibility.pdf · Supporting no-script Merging Ajax and Accessibility -22. WCAG 1.0 6.3 Ensure that](https://reader030.vdocuments.us/reader030/viewer/2022040803/5e3d441432b4192e4a4125fc/html5/thumbnails/40.jpg)
![Page 41: Merging Ajax and Accessibilityajaxexperience.techtarget.com/.../Meeker_Mark_Accessibility.pdf · Supporting no-script Merging Ajax and Accessibility -22. WCAG 1.0 6.3 Ensure that](https://reader030.vdocuments.us/reader030/viewer/2022040803/5e3d441432b4192e4a4125fc/html5/thumbnails/41.jpg)
![Page 42: Merging Ajax and Accessibilityajaxexperience.techtarget.com/.../Meeker_Mark_Accessibility.pdf · Supporting no-script Merging Ajax and Accessibility -22. WCAG 1.0 6.3 Ensure that](https://reader030.vdocuments.us/reader030/viewer/2022040803/5e3d441432b4192e4a4125fc/html5/thumbnails/42.jpg)
![Page 43: Merging Ajax and Accessibilityajaxexperience.techtarget.com/.../Meeker_Mark_Accessibility.pdf · Supporting no-script Merging Ajax and Accessibility -22. WCAG 1.0 6.3 Ensure that](https://reader030.vdocuments.us/reader030/viewer/2022040803/5e3d441432b4192e4a4125fc/html5/thumbnails/43.jpg)
![Page 44: Merging Ajax and Accessibilityajaxexperience.techtarget.com/.../Meeker_Mark_Accessibility.pdf · Supporting no-script Merging Ajax and Accessibility -22. WCAG 1.0 6.3 Ensure that](https://reader030.vdocuments.us/reader030/viewer/2022040803/5e3d441432b4192e4a4125fc/html5/thumbnails/44.jpg)
XHR
Hijax
44Merging Ajax and Accessibility -
![Page 45: Merging Ajax and Accessibilityajaxexperience.techtarget.com/.../Meeker_Mark_Accessibility.pdf · Supporting no-script Merging Ajax and Accessibility -22. WCAG 1.0 6.3 Ensure that](https://reader030.vdocuments.us/reader030/viewer/2022040803/5e3d441432b4192e4a4125fc/html5/thumbnails/45.jpg)
![Page 46: Merging Ajax and Accessibilityajaxexperience.techtarget.com/.../Meeker_Mark_Accessibility.pdf · Supporting no-script Merging Ajax and Accessibility -22. WCAG 1.0 6.3 Ensure that](https://reader030.vdocuments.us/reader030/viewer/2022040803/5e3d441432b4192e4a4125fc/html5/thumbnails/46.jpg)
![Page 47: Merging Ajax and Accessibilityajaxexperience.techtarget.com/.../Meeker_Mark_Accessibility.pdf · Supporting no-script Merging Ajax and Accessibility -22. WCAG 1.0 6.3 Ensure that](https://reader030.vdocuments.us/reader030/viewer/2022040803/5e3d441432b4192e4a4125fc/html5/thumbnails/47.jpg)
![Page 48: Merging Ajax and Accessibilityajaxexperience.techtarget.com/.../Meeker_Mark_Accessibility.pdf · Supporting no-script Merging Ajax and Accessibility -22. WCAG 1.0 6.3 Ensure that](https://reader030.vdocuments.us/reader030/viewer/2022040803/5e3d441432b4192e4a4125fc/html5/thumbnails/48.jpg)
Hurdles1. Supporting no-script
2. Avoiding “separate but equal”
3. Balancing the interface
48Merging Ajax and Accessibility -
![Page 49: Merging Ajax and Accessibilityajaxexperience.techtarget.com/.../Meeker_Mark_Accessibility.pdf · Supporting no-script Merging Ajax and Accessibility -22. WCAG 1.0 6.3 Ensure that](https://reader030.vdocuments.us/reader030/viewer/2022040803/5e3d441432b4192e4a4125fc/html5/thumbnails/49.jpg)
Balancing the InterfaceRedundant inputs
Keyboard navigation
Flow of the page
Setting focus
49Merging Ajax and Accessibility -
![Page 50: Merging Ajax and Accessibilityajaxexperience.techtarget.com/.../Meeker_Mark_Accessibility.pdf · Supporting no-script Merging Ajax and Accessibility -22. WCAG 1.0 6.3 Ensure that](https://reader030.vdocuments.us/reader030/viewer/2022040803/5e3d441432b4192e4a4125fc/html5/thumbnails/50.jpg)
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 -
![Page 51: Merging Ajax and Accessibilityajaxexperience.techtarget.com/.../Meeker_Mark_Accessibility.pdf · Supporting no-script Merging Ajax and Accessibility -22. WCAG 1.0 6.3 Ensure that](https://reader030.vdocuments.us/reader030/viewer/2022040803/5e3d441432b4192e4a4125fc/html5/thumbnails/51.jpg)
Redundant Interfaces
51Merging Ajax and Accessibility -
![Page 52: Merging Ajax and Accessibilityajaxexperience.techtarget.com/.../Meeker_Mark_Accessibility.pdf · Supporting no-script Merging Ajax and Accessibility -22. WCAG 1.0 6.3 Ensure that](https://reader030.vdocuments.us/reader030/viewer/2022040803/5e3d441432b4192e4a4125fc/html5/thumbnails/52.jpg)
Slider to choose a max price
Current price?
Very visual
52Merging Ajax and Accessibility -
![Page 53: Merging Ajax and Accessibilityajaxexperience.techtarget.com/.../Meeker_Mark_Accessibility.pdf · Supporting no-script Merging Ajax and Accessibility -22. WCAG 1.0 6.3 Ensure that](https://reader030.vdocuments.us/reader030/viewer/2022040803/5e3d441432b4192e4a4125fc/html5/thumbnails/53.jpg)
Move one unit?
53Merging Ajax and Accessibility -
![Page 54: Merging Ajax and Accessibilityajaxexperience.techtarget.com/.../Meeker_Mark_Accessibility.pdf · Supporting no-script Merging Ajax and Accessibility -22. WCAG 1.0 6.3 Ensure that](https://reader030.vdocuments.us/reader030/viewer/2022040803/5e3d441432b4192e4a4125fc/html5/thumbnails/54.jpg)
Setting exact price?
54Merging Ajax and Accessibility -
![Page 55: Merging Ajax and Accessibilityajaxexperience.techtarget.com/.../Meeker_Mark_Accessibility.pdf · Supporting no-script Merging Ajax and Accessibility -22. WCAG 1.0 6.3 Ensure that](https://reader030.vdocuments.us/reader030/viewer/2022040803/5e3d441432b4192e4a4125fc/html5/thumbnails/55.jpg)
55Merging Ajax and Accessibility -
![Page 56: Merging Ajax and Accessibilityajaxexperience.techtarget.com/.../Meeker_Mark_Accessibility.pdf · Supporting no-script Merging Ajax and Accessibility -22. WCAG 1.0 6.3 Ensure that](https://reader030.vdocuments.us/reader030/viewer/2022040803/5e3d441432b4192e4a4125fc/html5/thumbnails/56.jpg)
Redundant InterfacesMultiple options
Consider how the user will interact
Forced to identify use cases
56Merging Ajax and Accessibility -
![Page 57: Merging Ajax and Accessibilityajaxexperience.techtarget.com/.../Meeker_Mark_Accessibility.pdf · Supporting no-script Merging Ajax and Accessibility -22. WCAG 1.0 6.3 Ensure that](https://reader030.vdocuments.us/reader030/viewer/2022040803/5e3d441432b4192e4a4125fc/html5/thumbnails/57.jpg)
Keyboard Navigation
57Merging Ajax and Accessibility -
![Page 58: Merging Ajax and Accessibilityajaxexperience.techtarget.com/.../Meeker_Mark_Accessibility.pdf · Supporting no-script Merging Ajax and Accessibility -22. WCAG 1.0 6.3 Ensure that](https://reader030.vdocuments.us/reader030/viewer/2022040803/5e3d441432b4192e4a4125fc/html5/thumbnails/58.jpg)
![Page 59: Merging Ajax and Accessibilityajaxexperience.techtarget.com/.../Meeker_Mark_Accessibility.pdf · Supporting no-script Merging Ajax and Accessibility -22. WCAG 1.0 6.3 Ensure that](https://reader030.vdocuments.us/reader030/viewer/2022040803/5e3d441432b4192e4a4125fc/html5/thumbnails/59.jpg)
Keyboard NavigationConsider keyboard input for controls
Seek out CLI based developers for feedback
59Merging Ajax and Accessibility -
![Page 60: Merging Ajax and Accessibilityajaxexperience.techtarget.com/.../Meeker_Mark_Accessibility.pdf · Supporting no-script Merging Ajax and Accessibility -22. WCAG 1.0 6.3 Ensure that](https://reader030.vdocuments.us/reader030/viewer/2022040803/5e3d441432b4192e4a4125fc/html5/thumbnails/60.jpg)
Flow of the Page
60Merging Ajax and Accessibility -
![Page 61: Merging Ajax and Accessibilityajaxexperience.techtarget.com/.../Meeker_Mark_Accessibility.pdf · Supporting no-script Merging Ajax and Accessibility -22. WCAG 1.0 6.3 Ensure that](https://reader030.vdocuments.us/reader030/viewer/2022040803/5e3d441432b4192e4a4125fc/html5/thumbnails/61.jpg)
61Merging Ajax and Accessibility -
![Page 62: Merging Ajax and Accessibilityajaxexperience.techtarget.com/.../Meeker_Mark_Accessibility.pdf · Supporting no-script Merging Ajax and Accessibility -22. WCAG 1.0 6.3 Ensure that](https://reader030.vdocuments.us/reader030/viewer/2022040803/5e3d441432b4192e4a4125fc/html5/thumbnails/62.jpg)
62Merging Ajax and Accessibility -
![Page 63: Merging Ajax and Accessibilityajaxexperience.techtarget.com/.../Meeker_Mark_Accessibility.pdf · Supporting no-script Merging Ajax and Accessibility -22. WCAG 1.0 6.3 Ensure that](https://reader030.vdocuments.us/reader030/viewer/2022040803/5e3d441432b4192e4a4125fc/html5/thumbnails/63.jpg)
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 -
![Page 64: Merging Ajax and Accessibilityajaxexperience.techtarget.com/.../Meeker_Mark_Accessibility.pdf · Supporting no-script Merging Ajax and Accessibility -22. WCAG 1.0 6.3 Ensure that](https://reader030.vdocuments.us/reader030/viewer/2022040803/5e3d441432b4192e4a4125fc/html5/thumbnails/64.jpg)
Setting Focus
64Merging Ajax and Accessibility -
![Page 65: Merging Ajax and Accessibilityajaxexperience.techtarget.com/.../Meeker_Mark_Accessibility.pdf · Supporting no-script Merging Ajax and Accessibility -22. WCAG 1.0 6.3 Ensure that](https://reader030.vdocuments.us/reader030/viewer/2022040803/5e3d441432b4192e4a4125fc/html5/thumbnails/65.jpg)
![Page 66: Merging Ajax and Accessibilityajaxexperience.techtarget.com/.../Meeker_Mark_Accessibility.pdf · Supporting no-script Merging Ajax and Accessibility -22. WCAG 1.0 6.3 Ensure that](https://reader030.vdocuments.us/reader030/viewer/2022040803/5e3d441432b4192e4a4125fc/html5/thumbnails/66.jpg)
http://firefox.cita.uiuc.edu/
66Merging Ajax and Accessibility -
![Page 67: Merging Ajax and Accessibilityajaxexperience.techtarget.com/.../Meeker_Mark_Accessibility.pdf · Supporting no-script Merging Ajax and Accessibility -22. WCAG 1.0 6.3 Ensure that](https://reader030.vdocuments.us/reader030/viewer/2022040803/5e3d441432b4192e4a4125fc/html5/thumbnails/67.jpg)
Setting FocusUse with caution
Better to lead with jump links and headings
67Merging Ajax and Accessibility -
![Page 68: Merging Ajax and Accessibilityajaxexperience.techtarget.com/.../Meeker_Mark_Accessibility.pdf · Supporting no-script Merging Ajax and Accessibility -22. WCAG 1.0 6.3 Ensure that](https://reader030.vdocuments.us/reader030/viewer/2022040803/5e3d441432b4192e4a4125fc/html5/thumbnails/68.jpg)
Hurdles1. Supporting no-script
2. Avoiding “separate but equal”
3. Balancing the interface
4. Stretching the browser
68Merging Ajax and Accessibility -
![Page 69: Merging Ajax and Accessibilityajaxexperience.techtarget.com/.../Meeker_Mark_Accessibility.pdf · Supporting no-script Merging Ajax and Accessibility -22. WCAG 1.0 6.3 Ensure that](https://reader030.vdocuments.us/reader030/viewer/2022040803/5e3d441432b4192e4a4125fc/html5/thumbnails/69.jpg)
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 -
![Page 70: Merging Ajax and Accessibilityajaxexperience.techtarget.com/.../Meeker_Mark_Accessibility.pdf · Supporting no-script Merging Ajax and Accessibility -22. WCAG 1.0 6.3 Ensure that](https://reader030.vdocuments.us/reader030/viewer/2022040803/5e3d441432b4192e4a4125fc/html5/thumbnails/70.jpg)
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 -
![Page 71: Merging Ajax and Accessibilityajaxexperience.techtarget.com/.../Meeker_Mark_Accessibility.pdf · Supporting no-script Merging Ajax and Accessibility -22. WCAG 1.0 6.3 Ensure that](https://reader030.vdocuments.us/reader030/viewer/2022040803/5e3d441432b4192e4a4125fc/html5/thumbnails/71.jpg)
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 -
![Page 72: Merging Ajax and Accessibilityajaxexperience.techtarget.com/.../Meeker_Mark_Accessibility.pdf · Supporting no-script Merging Ajax and Accessibility -22. WCAG 1.0 6.3 Ensure that](https://reader030.vdocuments.us/reader030/viewer/2022040803/5e3d441432b4192e4a4125fc/html5/thumbnails/72.jpg)
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 -
![Page 73: Merging Ajax and Accessibilityajaxexperience.techtarget.com/.../Meeker_Mark_Accessibility.pdf · Supporting no-script Merging Ajax and Accessibility -22. WCAG 1.0 6.3 Ensure that](https://reader030.vdocuments.us/reader030/viewer/2022040803/5e3d441432b4192e4a4125fc/html5/thumbnails/73.jpg)
ARIA BenefitsShared API
Can be baked into frameworks
Clean, standard mark-up
73Merging Ajax and Accessibility -
![Page 74: Merging Ajax and Accessibilityajaxexperience.techtarget.com/.../Meeker_Mark_Accessibility.pdf · Supporting no-script Merging Ajax and Accessibility -22. WCAG 1.0 6.3 Ensure that](https://reader030.vdocuments.us/reader030/viewer/2022040803/5e3d441432b4192e4a4125fc/html5/thumbnails/74.jpg)
74Merging Ajax and Accessibility -
![Page 75: Merging Ajax and Accessibilityajaxexperience.techtarget.com/.../Meeker_Mark_Accessibility.pdf · Supporting no-script Merging Ajax and Accessibility -22. WCAG 1.0 6.3 Ensure that](https://reader030.vdocuments.us/reader030/viewer/2022040803/5e3d441432b4192e4a4125fc/html5/thumbnails/75.jpg)
<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 -
![Page 76: Merging Ajax and Accessibilityajaxexperience.techtarget.com/.../Meeker_Mark_Accessibility.pdf · Supporting no-script Merging Ajax and Accessibility -22. WCAG 1.0 6.3 Ensure that](https://reader030.vdocuments.us/reader030/viewer/2022040803/5e3d441432b4192e4a4125fc/html5/thumbnails/76.jpg)
“ 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 -
![Page 77: Merging Ajax and Accessibilityajaxexperience.techtarget.com/.../Meeker_Mark_Accessibility.pdf · Supporting no-script Merging Ajax and Accessibility -22. WCAG 1.0 6.3 Ensure that](https://reader030.vdocuments.us/reader030/viewer/2022040803/5e3d441432b4192e4a4125fc/html5/thumbnails/77.jpg)
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 -
![Page 78: Merging Ajax and Accessibilityajaxexperience.techtarget.com/.../Meeker_Mark_Accessibility.pdf · Supporting no-script Merging Ajax and Accessibility -22. WCAG 1.0 6.3 Ensure that](https://reader030.vdocuments.us/reader030/viewer/2022040803/5e3d441432b4192e4a4125fc/html5/thumbnails/78.jpg)
Slides and Contacthttp://markmeeker.com/events/tae-sf-2007
[email protected] or [email protected]
78Merging Ajax and Accessibility -