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. Refresh 06 Orlando, Florida 2006.11.16. 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/2022062816/568149e3550346895db70b5c/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
Refresh 06Orlando, Florida
2006.11.16
![Page 2: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022062816/568149e3550346895db70b5c/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/2022062816/568149e3550346895db70b5c/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/2022062816/568149e3550346895db70b5c/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/2022062816/568149e3550346895db70b5c/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/2022062816/568149e3550346895db70b5c/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/2022062816/568149e3550346895db70b5c/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/2022062816/568149e3550346895db70b5c/html5/thumbnails/8.jpg)
9
Getting it Right the Second Time
• Use technology as designedH1, LI, P
• Not corrupt layers of the stackBad: 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/2022062816/568149e3550346895db70b5c/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/2022062816/568149e3550346895db70b5c/html5/thumbnails/10.jpg)
13
Definitions
![Page 11: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022062816/568149e3550346895db70b5c/html5/thumbnails/11.jpg)
14
Definitions:DHTML / Ajax
• Is NOT a specific technology
![Page 12: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022062816/568149e3550346895db70b5c/html5/thumbnails/12.jpg)
15
Definitions:DHTML / Ajax
• Is NOT a specific technology• Is NOT inherently inaccessible
![Page 13: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022062816/568149e3550346895db70b5c/html5/thumbnails/13.jpg)
16
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 14: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022062816/568149e3550346895db70b5c/html5/thumbnails/14.jpg)
17
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 15: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022062816/568149e3550346895db70b5c/html5/thumbnails/15.jpg)
18
Accessibility = AvailabilityAccessibility is Availability
![Page 16: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022062816/568149e3550346895db70b5c/html5/thumbnails/16.jpg)
19
Accessibility = AvailabilityAccessibility is Availability
![Page 17: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022062816/568149e3550346895db70b5c/html5/thumbnails/17.jpg)
20
Accessibility = AvailabilityAccessibility is Availability
![Page 18: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022062816/568149e3550346895db70b5c/html5/thumbnails/18.jpg)
21
“Rich” isn’t new, so what about desktop accessibility?
![Page 19: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022062816/568149e3550346895db70b5c/html5/thumbnails/19.jpg)
22
Accessibility on the Desktop
• OS provides a11y API– Microsoft’s Active Accessibility 2.0 (MSAA)– Sun’s Java Access Bridge– Accessibility Toolkit for Linux (ATK)
• Assistive Technology talks to OS API• Result: nearly ubiquitous a11y
![Page 20: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022062816/568149e3550346895db70b5c/html5/thumbnails/20.jpg)
23
So desktop accessibility is nearly ubiquitous, but what about
web accessibility?
![Page 21: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022062816/568149e3550346895db70b5c/html5/thumbnails/21.jpg)
24
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 22: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022062816/568149e3550346895db70b5c/html5/thumbnails/22.jpg)
25
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 23: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022062816/568149e3550346895db70b5c/html5/thumbnails/23.jpg)
26
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 24: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022062816/568149e3550346895db70b5c/html5/thumbnails/24.jpg)
27
So how can we move forward?
![Page 25: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022062816/568149e3550346895db70b5c/html5/thumbnails/25.jpg)
28
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 26: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022062816/568149e3550346895db70b5c/html5/thumbnails/26.jpg)
29
Four Techniques – Use Them All
1. Standards-based development
2. Redundant interfaces
3. Faithful and Predictable Ports
4. WAI ARIA aka “Accessible DHTML”
![Page 27: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022062816/568149e3550346895db70b5c/html5/thumbnails/27.jpg)
30
Standards-Based Development
Don’t miss the opportunity
![Page 28: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022062816/568149e3550346895db70b5c/html5/thumbnails/28.jpg)
31
Approach 1:Standards-Based Development
• Overview and Definition• Create and stand upon a strong foundation• Subsequent layers enhance meaningful and
structured markup• Progressive and unobtrusive enhancement• Don’t contaminate the neighborhood• Be generous – it’s your last chance!
![Page 29: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022062816/568149e3550346895db70b5c/html5/thumbnails/29.jpg)
32
Standards-Based DevelopmentExample: Y!News Tab Panel
• Example: Tab-Panel box: complete
![Page 30: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022062816/568149e3550346895db70b5c/html5/thumbnails/30.jpg)
33
Standards-Based DevelopmentExample: Y!News Tab Panel
• Example: Tab-Panel box: no CSS
![Page 31: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022062816/568149e3550346895db70b5c/html5/thumbnails/31.jpg)
34
Standards-Based DevelopmentExample: Y!News Tab Panel
• Example: Tab-Panel box: no JavaScript
![Page 32: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022062816/568149e3550346895db70b5c/html5/thumbnails/32.jpg)
35
Standards-Based DevelopmentExample: 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 33: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022062816/568149e3550346895db70b5c/html5/thumbnails/33.jpg)
36
Standards-Based DevelopmentEx: Y!Photos Ratings & Tags
http://nate.koechley.com/talks/2006/11/refresh06/RIA_Accessibility/photos-nocss.avi
![Page 34: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022062816/568149e3550346895db70b5c/html5/thumbnails/34.jpg)
37
Standards-Based DevelopmentExample: Y!Games
http://nate.koechley.com/talks/2006/11/refresh06/RIA_Accessibility/games-nav.avi
![Page 35: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022062816/568149e3550346895db70b5c/html5/thumbnails/35.jpg)
38
Standards-Based DevelopmentExample: Y! Home Page
http://nate.koechley.com/talks/2006/11/refresh06/RIA_Accessibility/da11y-fp-searchtabs.avi
![Page 36: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022062816/568149e3550346895db70b5c/html5/thumbnails/36.jpg)
39
Standards-Based DevelopmentBenefits
• 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 37: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022062816/568149e3550346895db70b5c/html5/thumbnails/37.jpg)
40
Standards-Based DevelopmentDrawbacks
• 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 38: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022062816/568149e3550346895db70b5c/html5/thumbnails/38.jpg)
41
Redundant InterfacesOffer flexible interactions
![Page 39: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022062816/568149e3550346895db70b5c/html5/thumbnails/39.jpg)
42
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 40: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022062816/568149e3550346895db70b5c/html5/thumbnails/40.jpg)
43
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 41: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022062816/568149e3550346895db70b5c/html5/thumbnails/41.jpg)
44
Redundant InterfacesExample: 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/11/refresh06/RIA_Accessibility/Slider-basic.avi
![Page 42: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022062816/568149e3550346895db70b5c/html5/thumbnails/42.jpg)
45
Redundant InterfacesExample: 2D Slider
http://developer.yahoo.com/yui/examples/slider/rgb2.html
![Page 43: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022062816/568149e3550346895db70b5c/html5/thumbnails/43.jpg)
46
Redundant InterfacesExample: Date Selector
http://developer.yahoo.com/yui/examples/calendar/intl_japan/
![Page 44: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022062816/568149e3550346895db70b5c/html5/thumbnails/44.jpg)
47
Redundant InterfacesExample: YUI Menu from Markup
http://developer.yahoo.com/yui/examples/menu/leftnavfrommarkup.html
![Page 45: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022062816/568149e3550346895db70b5c/html5/thumbnails/45.jpg)
48
Redundant InterfacesExample: YUI Panel from Markup
• Motion Protection– http://developer.yahoo.com/yui/examples/co
ntainer/panel-aqua.html
• Technology Protection– http://yuiblog.com/blog/2006/09/22/yahoo-de
vday-schedule/
![Page 46: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022062816/568149e3550346895db70b5c/html5/thumbnails/46.jpg)
49
Redundant InterfacesExample: Yahoo! home page
http://nate.koechley.com/talks/2006/11/refresh06/RIA_Accessibility/frontpage-nojs.avi
![Page 47: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022062816/568149e3550346895db70b5c/html5/thumbnails/47.jpg)
50
Redundant InterfacesEx: Drag-n-Drop vs. Edit Flow
http://nate.koechley.com/talks/2006/11/refresh06/RIA_Accessibility/my-change-layout.avi
![Page 48: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022062816/568149e3550346895db70b5c/html5/thumbnails/48.jpg)
51
Redundant InterfacesBenefits
• 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 49: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022062816/568149e3550346895db70b5c/html5/thumbnails/49.jpg)
52
Redundant InterfacesDrawbacks
• 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 50: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022062816/568149e3550346895db70b5c/html5/thumbnails/50.jpg)
53
Faithful and Predictable Preserve the illusion
![Page 51: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022062816/568149e3550346895db70b5c/html5/thumbnails/51.jpg)
54
Faithful and Predictable Ports:Faithful and Predictable Ports
• Overview and Definition• We must capture this moment in time• Learnability• Discoverability• Completeness is critical
![Page 52: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022062816/568149e3550346895db70b5c/html5/thumbnails/52.jpg)
55
Faithful and Predictable Ports:Example: Full Selection Model
http://photos.yahoo.com/ http://nate.koechley.com/talks/2006/11/refresh06/RIA_Accessibility/photos-selection.avi
![Page 53: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022062816/568149e3550346895db70b5c/html5/thumbnails/53.jpg)
56
Faithful and Predictable Ports:Ex: Full Keyboard Control
![Page 54: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022062816/568149e3550346895db70b5c/html5/thumbnails/54.jpg)
57
Faithful and Predictable Ports:Ex: Full Keyboard Control
Example:
Slider fortified
with keyboard
http://nate.koechley.com/talks/2006/11/refresh06/RIA_Accessibility/slider-keyboard.avi
![Page 55: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022062816/568149e3550346895db70b5c/html5/thumbnails/55.jpg)
58
Faithful and Predictable Ports:Ex: Full Keyboard Control
![Page 56: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022062816/568149e3550346895db70b5c/html5/thumbnails/56.jpg)
59
Faithful and Predictable Ports:Benefits
• More options for everybody• Better discoverability• Better usability• Supports many working styles• Establish the new platform
![Page 57: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022062816/568149e3550346895db70b5c/html5/thumbnails/57.jpg)
60
Faithful and Predictable Ports:Drawbacks
• Isn’t always easy• Seems heavier and/or more complex• Not always the path of least resistance
![Page 58: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022062816/568149e3550346895db70b5c/html5/thumbnails/58.jpg)
61
WAI ARIA“Accessible DHTML”
![Page 59: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022062816/568149e3550346895db70b5c/html5/thumbnails/59.jpg)
62
Rich Interfaces Require Sophisticated Definitions
![Page 60: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022062816/568149e3550346895db70b5c/html5/thumbnails/60.jpg)
63
“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 61: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022062816/568149e3550346895db70b5c/html5/thumbnails/61.jpg)
64
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-2
0060318.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 62: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022062816/568149e3550346895db70b5c/html5/thumbnails/62.jpg)
65
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 63: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022062816/568149e3550346895db70b5c/html5/thumbnails/63.jpg)
66
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 64: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022062816/568149e3550346895db70b5c/html5/thumbnails/64.jpg)
67
Content has changed!
• focus on updated content– tabindex -1
• Omits from tab order• Not fully cross-browser
• Works, but unsophisticated
![Page 65: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022062816/568149e3550346895db70b5c/html5/thumbnails/65.jpg)
68
Role Taxonomy for Accessible Adaptable Applicationshttp://www.w3.org/WAI/PF/GUI/
![Page 66: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022062816/568149e3550346895db70b5c/html5/thumbnails/66.jpg)
69
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 67: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022062816/568149e3550346895db70b5c/html5/thumbnails/67.jpg)
70
“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 68: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022062816/568149e3550346895db70b5c/html5/thumbnails/68.jpg)
71
“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 69: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022062816/568149e3550346895db70b5c/html5/thumbnails/69.jpg)
72
“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 70: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022062816/568149e3550346895db70b5c/html5/thumbnails/70.jpg)
73
“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 71: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022062816/568149e3550346895db70b5c/html5/thumbnails/71.jpg)
74
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
– We can help these small companies.
![Page 72: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022062816/568149e3550346895db70b5c/html5/thumbnails/72.jpg)
75
Availability and Browser Support
“Graded Browser Support”
![Page 73: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022062816/568149e3550346895db70b5c/html5/thumbnails/73.jpg)
76
The Dirty Truth
• The Web is the most hostile software engineering environment imaginable.
– Douglas Crockford
![Page 74: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022062816/568149e3550346895db70b5c/html5/thumbnails/74.jpg)
77
Binary Browser Support
• Do I need to support ___ on this project?
![Page 75: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022062816/568149e3550346895db70b5c/html5/thumbnails/75.jpg)
78
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 76: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022062816/568149e3550346895db70b5c/html5/thumbnails/76.jpg)
79
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 77: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022062816/568149e3550346895db70b5c/html5/thumbnails/77.jpg)
80http://developer.yahoo.com/yui/articles/gbs/gbs.html
![Page 78: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022062816/568149e3550346895db70b5c/html5/thumbnails/78.jpg)
81
Graded Browser Support:General Best Practice
Three Grades of Browser SupportC-grade support (core support, 2%)
A-grade support (advanced support, 96%)
X-grade support (the X-Factor, 2%)
![Page 79: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022062816/568149e3550346895db70b5c/html5/thumbnails/79.jpg)
82
http://developer.yahoo.com/yui/articles/gbs/gbs_browser-chart.html
![Page 80: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022062816/568149e3550346895db70b5c/html5/thumbnails/80.jpg)
83
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 81: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022062816/568149e3550346895db70b5c/html5/thumbnails/81.jpg)
84
Thanks!nate.koechley.com/talks/2006/11/refresh06/RIA_Accessibility/
• Nate Koechley:– [email protected] | [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
• Creative Commons Photos from Flickr:– http://www.flickr.com/photos/tgray/48830193/ – http://www.flickr.com/photos/macwagen/90472902/ – http://www.flickr.com/photos/zen/157658496/
![Page 82: Yahoo! Experiences with Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022062816/568149e3550346895db70b5c/html5/thumbnails/82.jpg)
85
We’re Hiring!
Josie Aguada: [email protected]
Usual suspects:
JavaScript, PHP, CSS, HTML, ActionScript…