yahoo! experiences with accessibility (a11y), dhtml, and ajax in rich internet applications
DESCRIPTION
Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications. Nate Koechley [email protected] http://nate.koechley.com/blog. The Ajax Experience Boston, Massachusetts 2006.10.24. Hello, World. Nate Koechley Charter member of Web Development team - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022081515/568143f6550346895db0829c/html5/thumbnails/1.jpg)
1
Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax
in Rich Internet Applications
Nate Koechley [email protected]://nate.koechley.com/blog
The Ajax ExperienceBoston, Massachusetts
2006.10.24
![Page 2: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022081515/568143f6550346895db0829c/html5/thumbnails/2.jpg)
2
Hello, World
• Nate Koechley
– Charter member of Web Development team
– In the trenches and in management
– Yahoo! User Interface (YUI) Library team• Senior Front-End Engineer, Technical Evangelist,
Design Liaison, YUIBlog Editor
• Responsible for Yahoo! Browser Support specs
• Role: Strategy and Direction
![Page 3: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022081515/568143f6550346895db0829c/html5/thumbnails/3.jpg)
4
What’s Happening?
![Page 4: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022081515/568143f6550346895db0829c/html5/thumbnails/4.jpg)
5
Browser vs. Desktop
![Page 5: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022081515/568143f6550346895db0829c/html5/thumbnails/5.jpg)
6
Web 1.0 vs. Web 2.0
![Page 6: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022081515/568143f6550346895db0829c/html5/thumbnails/6.jpg)
7
![Page 7: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022081515/568143f6550346895db0829c/html5/thumbnails/7.jpg)
8
“Getting It Right The Second Time”
– matt sweeney
![Page 8: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022081515/568143f6550346895db0829c/html5/thumbnails/8.jpg)
9
Getting it Right the Second Time
• Use technology as designedH1, LI, P
• Not corrupt layers of the stack
Bad: class=“red-button” and href=“#”
• Create platforms. Evolvability
– Encapsulation, Flexibility, Mashups, Services, Portability
• Preserve opportunity & availability
![Page 9: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022081515/568143f6550346895db0829c/html5/thumbnails/9.jpg)
10
How do you move to RIAs?
![Page 10: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022081515/568143f6550346895db0829c/html5/thumbnails/10.jpg)
11
Learn from Desktop History
Adapted from Alan Cooper’s “About Face 2.0” Book
![Page 11: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022081515/568143f6550346895db0829c/html5/thumbnails/11.jpg)
12
[primitives]
[compounds]
[idioms]
Connection Manager (Ajax)Connection Manager (Ajax) Event UtilityEvent Utility
Dom CollectionDom Collection
Drag & DropDrag & DropAnimationAnimation
Logger ControlLogger Control
Menu ControlMenu Control
SliderSliderTree ControlTree Control
Calendar ControlCalendar Control
AutoCompleteAutoComplete
The Yahoo! User Interface (YUI) Library
DHTML WindowingDHTML Windowing
CSS Reset, Fonts, GridsCSS Reset, Fonts, GridsLoaderLoader
![Page 12: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022081515/568143f6550346895db0829c/html5/thumbnails/12.jpg)
13
![Page 13: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022081515/568143f6550346895db0829c/html5/thumbnails/13.jpg)
14
Yahoo! is Hiring
Josie Aguada: [email protected]
Usual suspects:
JavaScript, PHP, CSS, HTML, ActionScript…
![Page 14: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022081515/568143f6550346895db0829c/html5/thumbnails/14.jpg)
15
Definitions
![Page 15: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022081515/568143f6550346895db0829c/html5/thumbnails/15.jpg)
16
Definitions:DHTML / Ajax
• Is NOT a specific technology
![Page 16: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022081515/568143f6550346895db0829c/html5/thumbnails/16.jpg)
17
Definitions:DHTML / Ajax
• Is NOT a specific technology
• Is NOT inherently inaccessible
![Page 17: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022081515/568143f6550346895db0829c/html5/thumbnails/17.jpg)
18
Definitions:Rich Internet Applications (RIAs)
• RIAs are:
– web apps with features and functionality of traditional desktop applications
– can be created in various languages: Flash, JavaScript, Java
• today’s talk is focused on JavaScript RIAs
![Page 18: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022081515/568143f6550346895db0829c/html5/thumbnails/18.jpg)
19
Definitions:Accessibility
• Accessibility is:
– “A general term used to describe the degree to which a system is usable by as many people as possible without modification”
(cite: wikipedia)
• Often, our focus is on enabling screen-readers specifically
– However, the resulting work in generally more far-reaching
![Page 19: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022081515/568143f6550346895db0829c/html5/thumbnails/19.jpg)
20
Accessibility = AvailabilityAccessibility is Availability
![Page 20: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022081515/568143f6550346895db0829c/html5/thumbnails/20.jpg)
21
Accessibility = AvailabilityAccessibility is Availability
![Page 21: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022081515/568143f6550346895db0829c/html5/thumbnails/21.jpg)
22
Accessibility = AvailabilityAccessibility is Availability
![Page 22: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022081515/568143f6550346895db0829c/html5/thumbnails/22.jpg)
23
“Rich” isn’t new, so what about desktop accessibility?
![Page 23: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022081515/568143f6550346895db0829c/html5/thumbnails/23.jpg)
24
Accessibility on the Desktop
• OS provides A11y API
• Assistive Technology talks to OS API
• Result: nearly ubiquitous a11y
![Page 24: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022081515/568143f6550346895db0829c/html5/thumbnails/24.jpg)
25
Microsoft’s Active Accessibility
• Microsoft’s Active Accessibility 2.0 (MSAA) is
– a COM-based interface/technology
– dynamic-link libraries incorporated into OS;
– provides reliable methods for exposing information about user interface elements.
![Page 25: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022081515/568143f6550346895db0829c/html5/thumbnails/25.jpg)
26
Sun’s Java Access Bridge
• Sun’s Java Access Bridge
– Bridges Win API and the Java Accessibility API, and is implemented in the Java Foundation Classes (JFC) Swing user interface components.
– Contains "native methods“ – some Class code is supplied by a Windows DLL
![Page 26: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022081515/568143f6550346895db0829c/html5/thumbnails/26.jpg)
27
Accessibility Toolkit for Linux (ATK)
• Accessibility Toolkit (ATK) refers in particular to the GNOME ATK.
• Developer toolkit allows programmers to use common GNOME accessibility features in their applications. This includes such features as high-contrast visual themes for the visually-impaired and keyboard behavior modifiers (e.g. sticky keys) for those with diminished motor control.
![Page 27: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022081515/568143f6550346895db0829c/html5/thumbnails/27.jpg)
28
So desktop accessibility is nearly ubiquitous, but what about
web accessibility?
![Page 28: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022081515/568143f6550346895db0829c/html5/thumbnails/28.jpg)
29
Accessibility on the Web (1)
• Some information is provided to the desktop API
– The Document Object Model (DOM) provides static information via semantic elements and attributes
• Form elements announce focus (sometimes)
![Page 29: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022081515/568143f6550346895db0829c/html5/thumbnails/29.jpg)
30
http://www.w3.org/Consortium/Points/
“One of W3C's primary goals is to make these benefits available to all people, whatever their hardware, software, network infrastructure, native language, culture, geographical location, or physical or mental ability. “
![Page 30: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022081515/568143f6550346895db0829c/html5/thumbnails/30.jpg)
31
Accessibility on the Web (2)
• So the picture isn’t fully bleak
… but the depth of necessary information is missing:
• Role, state, actions, caret, selection, children, relations, changes…
– Input and output communication is missing too:
• Keyboard, focus, blur, change, updates.
• Clunky, see data table and speadsheets
![Page 31: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022081515/568143f6550346895db0829c/html5/thumbnails/31.jpg)
32
So how can we move forward?
![Page 32: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022081515/568143f6550346895db0829c/html5/thumbnails/32.jpg)
33
Characteristics of Techniques
• Don’t make it worse
• Provide alternatives
• Learn from other technologies
• Prepare for when a11y tech improves
• Support improvement of a11y tech
![Page 33: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022081515/568143f6550346895db0829c/html5/thumbnails/33.jpg)
34
Four Techniques – Use Them All
1. Standards-based development
2. Redundant interfaces
3. Faithful and Predictable Ports
4. WAI ARIA aka “Accessible DHTML”
![Page 34: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022081515/568143f6550346895db0829c/html5/thumbnails/34.jpg)
35
Standards-Based Development
Don’t miss the opportunity
![Page 35: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022081515/568143f6550346895db0829c/html5/thumbnails/35.jpg)
36
Approach 1:Standards-Based Development
• Overview and Definition
• Create and stand upon a sstrong foundation
• Subsequent layers enhance meaningful and structured markup
• Progressive and unobtrusive enhancement
• Don’t contaminate the neighborhood
• Be generous
![Page 36: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022081515/568143f6550346895db0829c/html5/thumbnails/36.jpg)
37
Standards-Based Development
Example: Y!News Tab Panel
• Example: Tab-Panel box: complete
![Page 37: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022081515/568143f6550346895db0829c/html5/thumbnails/37.jpg)
38
Standards-Based Development
Example: Y!News Tab Panel
• Example: Tab-Panel box: no CSS
![Page 38: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022081515/568143f6550346895db0829c/html5/thumbnails/38.jpg)
39
Standards-Based Development
Example: Y!News Tab Panel
• Example: Tab-Panel box: no JavaScript
![Page 39: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022081515/568143f6550346895db0829c/html5/thumbnails/39.jpg)
40
Standards-Based Development
Example: Y!News Tab Panel
• Notice:
• Tab box is really anchored links and lists – well marked up content, available to all
• Unobtrusive JavaScript doesn’t Hijax links when it shouldn’t
• Stretching semantics to provide clues
• Microformats enrich date, and provide predictable hooks for add-ons
![Page 40: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022081515/568143f6550346895db0829c/html5/thumbnails/40.jpg)
41
Standards-Based Development
Ex: Y!Photos Ratings & Tags
http://nate.koechley.com/talks/2006/10/ajax_experience/RIA%20Accessibility/photos-nocss.avi
![Page 41: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022081515/568143f6550346895db0829c/html5/thumbnails/41.jpg)
42
Standards-Based Development
Example: Y!Games
http://nate.koechley.com/talks/2006/10/ajax_experience/RIA%20Accessibility/games-nav.avi
![Page 42: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022081515/568143f6550346895db0829c/html5/thumbnails/42.jpg)
43
Standards-Based Development
Example: Y! Home Page
http://nate.koechley.com/talks/2006/10/ajax_experience/RIA%20Accessibility/da11y-fp-searchtabs.avi
![Page 43: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022081515/568143f6550346895db0829c/html5/thumbnails/43.jpg)
44
Standards-Based Development
Benefits
• Should be doing this regardless
• “With the grain” of web technologies
• Truly available to all
• The foundation of better things
• A step toward a semantic web
• Here to stay (10+ years)
![Page 44: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022081515/568143f6550346895db0829c/html5/thumbnails/44.jpg)
45
Standards-Based Development
Drawbacks
• Doesn’t solve every problem
• Perceived overhead
• Unobtrusive JavaScript and Hijax are still less familiar techniques
– Be careful not to step on event handlers
– Only trap clicks when appropriate
– Server must reply to both partial and complete requests from the client
![Page 45: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022081515/568143f6550346895db0829c/html5/thumbnails/45.jpg)
46
Redundant InterfacesOffer flexible interactions
![Page 46: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022081515/568143f6550346895db0829c/html5/thumbnails/46.jpg)
47
Approach 2:
Redundant Interfaces
• Overview and Definition
• Multiple means of input• GUI input vs. char input
• Direct movement of objects vs. configuration-based movement
• Plain text vs. Auto Complete
• Tab vs. Arrow Keys
![Page 47: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022081515/568143f6550346895db0829c/html5/thumbnails/47.jpg)
48
Approach 2:
Redundant Interfaces
• Overview and Definition
• Multiple means of manipulation• Keyboard vs. Mouse
• Esc vs. Cancel
• Drag-drop vs. form-based
• Ajax vs. HTTP
![Page 48: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022081515/568143f6550346895db0829c/html5/thumbnails/48.jpg)
49
Redundant Interfaces
Example: 1D Slider
http://developer.yahoo.com/yui/examples/slider/index.html
• Simple support for vertical and horizontal sliders as a direct-manipulation alternative to input boxes
• Enhances the basic input box, but need not replace it.
http://nate.koechley.com/talks/2006/10/ajax_experience/RIA%20Accessibility/Slider-basic.avi
![Page 49: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022081515/568143f6550346895db0829c/html5/thumbnails/49.jpg)
50
Redundant Interfaces
Example: 2D Slider
http://developer.yahoo.com/yui/examples/slider/rgb2.html
![Page 50: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022081515/568143f6550346895db0829c/html5/thumbnails/50.jpg)
51
Redundant Interfaces
Example: Date Selector
http://developer.yahoo.com/yui/examples/calendar/intl_japan/
![Page 51: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022081515/568143f6550346895db0829c/html5/thumbnails/51.jpg)
52
Redundant Interfaces
Example: YUI Menu from Markup
http://developer.yahoo.com/yui/examples/menu/leftnavfrommarkup.html
![Page 52: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022081515/568143f6550346895db0829c/html5/thumbnails/52.jpg)
53
Redundant Interfaces
Example: YUI Panel from Markup
• Motion Protection
– http://developer.yahoo.com/yui/examples/container/panel-aqua.html
• Technology Protection
– http://yuiblog.com/blog/2006/09/22/yahoo-devday-schedule/
![Page 53: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022081515/568143f6550346895db0829c/html5/thumbnails/53.jpg)
54
Redundant Interfaces
Example: Yahoo! home page
http://nate.koechley.com/talks/2006/10/ajax_experience/RIA%20Accessibility/frontpage-nojs.avi
![Page 54: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022081515/568143f6550346895db0829c/html5/thumbnails/54.jpg)
55
Redundant Interfaces
Ex: Drag-n-Drop vs. Edit Flow
http://nate.koechley.com/talks/2006/10/ajax_experience/RIA%20Accessibility/my-change-layout.avi
![Page 55: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022081515/568143f6550346895db0829c/html5/thumbnails/55.jpg)
56
Redundant Interfaces
Benefits
• Better for everybody
– Keyboard is important for ALL users
– Let users choose from multiple task flows
• Transfer the complete set of expectations from the desktop to the browser
• Works today
![Page 56: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022081515/568143f6550346895db0829c/html5/thumbnails/56.jpg)
57
Redundant Interfaces
Drawbacks
• Insufficient communication with accessibility APIs on the desktop
• Dual experiences/interfaces may pressure goals of parity
• Requires development of two experiences• But not 2x effort!
• Can actually benefit development process
![Page 57: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022081515/568143f6550346895db0829c/html5/thumbnails/57.jpg)
58
Faithful and Predictable
Preserve the illusion
![Page 58: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022081515/568143f6550346895db0829c/html5/thumbnails/58.jpg)
59
Faithful and Predictable Ports:
Faithful and Predictable Ports
• Overview and Definition
• We must capture this moment in time
• Learnability
• Discoverability
• Completeness is critical
![Page 59: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022081515/568143f6550346895db0829c/html5/thumbnails/59.jpg)
60
Faithful and Predictable Ports:
Example: Full Selection Model
http://photos.yahoo.com/
http://nate.koechley.com/talks/2006/10/ajax_experience/RIA%20Accessibility/photos-selection.avi
![Page 60: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022081515/568143f6550346895db0829c/html5/thumbnails/60.jpg)
61
Faithful and Predictable Ports:
Ex: Full Keyboard Control
![Page 61: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022081515/568143f6550346895db0829c/html5/thumbnails/61.jpg)
62
Faithful and Predictable Ports:
Ex: Full Keyboard Control
• Example: Slider fortified with keyboard
http://nate.koechley.com/talks/2006/10/ajax_experience/RIA%20Accessibility/slider-keyboard.avi
![Page 62: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022081515/568143f6550346895db0829c/html5/thumbnails/62.jpg)
63
Faithful and Predictable Ports:
Ex: Full Keyboard Control
![Page 63: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022081515/568143f6550346895db0829c/html5/thumbnails/63.jpg)
64
Faithful and Predictable Ports:
Benefits
• More options for everybody
• Better discoverability
• Better usability
• Supports many working styles
• Establish the new platform
![Page 64: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022081515/568143f6550346895db0829c/html5/thumbnails/64.jpg)
65
Faithful and Predictable Ports:
Drawbacks
• Isn’t always easy
• Seems heavier and/or more complex
• Not always the path of least resistance
![Page 65: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022081515/568143f6550346895db0829c/html5/thumbnails/65.jpg)
66
WAI ARIA
“Accessible DHTML”
![Page 66: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022081515/568143f6550346895db0829c/html5/thumbnails/66.jpg)
67
Approach 4:
“Accessible DHTML”
• Overview and Definition– IBM technology, now in W3C and open
• http://www.w3.org/TR/aria-roadmap/
• http://www.w3.org/WAI/PF/adaptable/HTML4/embedding-20060318.html
– Allows embedded role and state metadata in (X)HTML documents
– Uses namespace extensions to XHTML 2, but• Techniques allow most functionality in HTML 4 documents,
as of today
– Communicate directly with the desktop API
![Page 67: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022081515/568143f6550346895db0829c/html5/thumbnails/67.jpg)
68
The Virtual Buffer
• Screen readers “scrape” a page into a Virtual Buffer.
• Facilitates knowledge of the page
– “20 links”, “list, 14 items”, “four headers”
![Page 68: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022081515/568143f6550346895db0829c/html5/thumbnails/68.jpg)
69
The Virtual Buffer and Script
• Handles basic script: – click, keypress, mouseover
– For these, new content is exposed
• Ajax content isn’t natively exposed in reaction to these events
• For example, doesn’t know onreadystatechange
![Page 69: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022081515/568143f6550346895db0829c/html5/thumbnails/69.jpg)
70
Content has changed!
• focus on updated content– tabindex -1
• Omits from tab order
• Not fully cross-browser
• Works, but unsophisticated
![Page 70: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022081515/568143f6550346895db0829c/html5/thumbnails/70.jpg)
71
Rich Interfaces Require Sophisticated Definitions
![Page 71: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022081515/568143f6550346895db0829c/html5/thumbnails/71.jpg)
72
“Assistive technologies … requires information about the semantics of specific portions of a document in order to present those portions in an accessible form.
For example, to provide reliable access to a form element, a tool must also be able to recognize the state of that element (for example, whether it is checked, disabled, focused, collapsed, or hidden).”
http://www.w3.org/2006/09/aria-pressrelease.html
![Page 72: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022081515/568143f6550346895db0829c/html5/thumbnails/72.jpg)
73
Role Taxonomy for Accessible Adaptable Applicationshttp://www.w3.org/WAI/PF/GUI/
![Page 73: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022081515/568143f6550346895db0829c/html5/thumbnails/73.jpg)
74
States and Adaptable Properties Modulehttp://www.w3.org/WAI/PF/adaptable
• checked• iconed• disabled• readonly• multiselectable• domactive• zoom• expanded• selected• pressed• important• required• haseffect• valueNew• valuemax
• valuemin• step• invalid• describedby• labeledby• hasparent• haschild• haspopup• alternatestyle• tabindex• flowto• flowfrom• controls• controlledby• subpageof
![Page 74: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022081515/568143f6550346895db0829c/html5/thumbnails/74.jpg)
75
“Accessible DHTML”
Example: XHTML
<html xmlns:wairole="/w3.org/2005/01/wai-rdf/GUIRoleTaxonomy#" xmlns:waistate=“/w3.org/2005/07/aaa">
<span id="slider" class="myslider"role="wairole:slider"waistate:valuemin="0"waistate:valuemax="50"waistate:valuenow="33"> </span>
![Page 75: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022081515/568143f6550346895db0829c/html5/thumbnails/75.jpg)
76
“Accessible DHTML”
Example: HTML 4
<script type="text/javascript" src="enable.js"></script>
<span id="slider" class="myslider myselector2 slider valuemin-0 valuemax-50 valuenow-33" tabindex="0" >
</span>
![Page 76: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022081515/568143f6550346895db0829c/html5/thumbnails/76.jpg)
77
“Accessible DHTML”
Benefits
• Utilizes powerful and well-understood desktop API
• Map controls, events, roles and states directly to powerful and well-understood desktop accessibility APIs
• Standard and predictable enrichment of markup
• Allows ARIA on top of RIA
![Page 77: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022081515/568143f6550346895db0829c/html5/thumbnails/77.jpg)
78
“Accessible DHTML”
Drawbacks
• Requires recent-version of assistive technology software (e.g., screen reader)
• Only works in Mozilla’s Firefox 1.5+ today
– Not in Microsoft’s IE7
• XHTML required for full power
– HTML does not allow multiple states, for example
![Page 78: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022081515/568143f6550346895db0829c/html5/thumbnails/78.jpg)
79
Need Your Help
• This is an important development
– Thanks for IMB/Mozilla/W3C• Becky Gibson
• Aaron Leventhal
– We can thank them with adoption and a steady commitment
– Tiny industry needs to serve a unified front
![Page 79: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022081515/568143f6550346895db0829c/html5/thumbnails/79.jpg)
80
Availability and Browser Support
“Graded Browser Support”
![Page 80: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022081515/568143f6550346895db0829c/html5/thumbnails/80.jpg)
81
The Dirty Truth
• The Web is the most hostile software engineering environment imaginable.
– Douglas Crockford
![Page 81: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022081515/568143f6550346895db0829c/html5/thumbnails/81.jpg)
82
Binary Browser Support
• Do I need to support ___ on this project?
![Page 82: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022081515/568143f6550346895db0829c/html5/thumbnails/82.jpg)
83
Graded Browser Support:Two Key Ideas (1)
1) Support != Same
Expecting two users using different browser software to have an identical experience fails to embrace or acknowledge the heterogeneous essence of the Web.
![Page 83: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022081515/568143f6550346895db0829c/html5/thumbnails/83.jpg)
84
Graded Browser Support:Two Key Ideas (2)
2) Support must not be binary!
Our primary goal is availability.
– Don’t exclude anyone
– Welcome all visitors
![Page 84: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022081515/568143f6550346895db0829c/html5/thumbnails/84.jpg)
85http://developer.yahoo.com/yui/articles/gbs/gbs.html
![Page 85: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022081515/568143f6550346895db0829c/html5/thumbnails/85.jpg)
86
Graded Browser Support:General Best Practice
Three Grades of Browser Support
C-grade support (core support, 2%)
A-grade support (advanced support, 96%)
X-grade support (the X-Factor, 2%)
![Page 86: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022081515/568143f6550346895db0829c/html5/thumbnails/86.jpg)
87
http://developer.yahoo.com/yui/articles/gbs/gbs_browser-chart.html
![Page 87: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022081515/568143f6550346895db0829c/html5/thumbnails/87.jpg)
88
Final Thoughts
• It’s possible to give the new richness to everybody, and morally correct.
– More users + good PR = win win
• There’s no excuse for not doing this, plus it’s not that hard.
• Together we’ll get there faster.
![Page 88: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022081515/568143f6550346895db0829c/html5/thumbnails/88.jpg)
89
More Information
• Nate Koechley:– [email protected]– http://nate.koechley.com/blog
• Yahoo! Developer Network and Y! UI Blog:– http://developer.yahoo.com – http://developer.yahoo.com/yui– http://developer.yahoo.com/ypatterns– http://www.yuiblog.com– http://groups.yahoo.com/group/ydn-javascript
• All photos Creative Commons licensed on Flickr:– http://www.flickr.com/photos/tgray/48830193/ – http://www.flickr.com/photos/macwagen/90472902/ – http://www.flickr.com/photos/zen/157658496/
![Page 89: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022081515/568143f6550346895db0829c/html5/thumbnails/89.jpg)
90
Thanks!
• Discussion?
http://nate.koechley.com/talks/2006/10/ajax_experience/
![Page 90: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022081515/568143f6550346895db0829c/html5/thumbnails/90.jpg)
91
Yahoo! is Hiring
Josie Aguada: [email protected]
Usual suspects:
JavaScript, PHP, CSS, HTML, ActionScript…