Download - ria_acessibility.ppt
![Page 1: ria_acessibility.ppt](https://reader035.vdocument.in/reader035/viewer/2022062705/556468b3d8b42a951e8b5594/html5/thumbnails/1.jpg)
1
DHTML AccessibilityYahoo! Experiences with
Accessibility (a11y), DHTML, and Ajax in Rich Internet Applications
Nate Koechley [email protected]://nate.koechley.com/blog
![Page 2: ria_acessibility.ppt](https://reader035.vdocument.in/reader035/viewer/2022062705/556468b3d8b42a951e8b5594/html5/thumbnails/2.jpg)
3
What’s Happening?
![Page 3: ria_acessibility.ppt](https://reader035.vdocument.in/reader035/viewer/2022062705/556468b3d8b42a951e8b5594/html5/thumbnails/3.jpg)
4
Browser vs. Desktop
![Page 4: ria_acessibility.ppt](https://reader035.vdocument.in/reader035/viewer/2022062705/556468b3d8b42a951e8b5594/html5/thumbnails/4.jpg)
5
Web 1.0 vs. Web 2.0
![Page 5: ria_acessibility.ppt](https://reader035.vdocument.in/reader035/viewer/2022062705/556468b3d8b42a951e8b5594/html5/thumbnails/5.jpg)
6
![Page 6: ria_acessibility.ppt](https://reader035.vdocument.in/reader035/viewer/2022062705/556468b3d8b42a951e8b5594/html5/thumbnails/6.jpg)
7
“Getting It Right The Second Time”
– matt sweeney
![Page 7: ria_acessibility.ppt](https://reader035.vdocument.in/reader035/viewer/2022062705/556468b3d8b42a951e8b5594/html5/thumbnails/7.jpg)
8
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 8: ria_acessibility.ppt](https://reader035.vdocument.in/reader035/viewer/2022062705/556468b3d8b42a951e8b5594/html5/thumbnails/8.jpg)
9
How do you move to RIAs?
![Page 9: ria_acessibility.ppt](https://reader035.vdocument.in/reader035/viewer/2022062705/556468b3d8b42a951e8b5594/html5/thumbnails/9.jpg)
12
Definitions
![Page 10: ria_acessibility.ppt](https://reader035.vdocument.in/reader035/viewer/2022062705/556468b3d8b42a951e8b5594/html5/thumbnails/10.jpg)
13
Definitions:DHTML / Ajax
• Is NOT a specific technology
![Page 11: ria_acessibility.ppt](https://reader035.vdocument.in/reader035/viewer/2022062705/556468b3d8b42a951e8b5594/html5/thumbnails/11.jpg)
14
Definitions:DHTML / Ajax
• Is NOT a specific technology
• Is NOT inherently inaccessible
![Page 12: ria_acessibility.ppt](https://reader035.vdocument.in/reader035/viewer/2022062705/556468b3d8b42a951e8b5594/html5/thumbnails/12.jpg)
15
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 13: ria_acessibility.ppt](https://reader035.vdocument.in/reader035/viewer/2022062705/556468b3d8b42a951e8b5594/html5/thumbnails/13.jpg)
16
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 14: ria_acessibility.ppt](https://reader035.vdocument.in/reader035/viewer/2022062705/556468b3d8b42a951e8b5594/html5/thumbnails/14.jpg)
17
Accessibility = AvailabilityAccessibility is Availability
![Page 15: ria_acessibility.ppt](https://reader035.vdocument.in/reader035/viewer/2022062705/556468b3d8b42a951e8b5594/html5/thumbnails/15.jpg)
18
Accessibility = AvailabilityAccessibility is Availability
![Page 16: ria_acessibility.ppt](https://reader035.vdocument.in/reader035/viewer/2022062705/556468b3d8b42a951e8b5594/html5/thumbnails/16.jpg)
19
Accessibility = AvailabilityAccessibility is Availability
![Page 17: ria_acessibility.ppt](https://reader035.vdocument.in/reader035/viewer/2022062705/556468b3d8b42a951e8b5594/html5/thumbnails/17.jpg)
20
“Rich” isn’t new, so what about desktop accessibility?
![Page 18: ria_acessibility.ppt](https://reader035.vdocument.in/reader035/viewer/2022062705/556468b3d8b42a951e8b5594/html5/thumbnails/18.jpg)
21
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 19: ria_acessibility.ppt](https://reader035.vdocument.in/reader035/viewer/2022062705/556468b3d8b42a951e8b5594/html5/thumbnails/19.jpg)
22
So desktop accessibility is nearly ubiquitous, but what about
web accessibility?
![Page 20: ria_acessibility.ppt](https://reader035.vdocument.in/reader035/viewer/2022062705/556468b3d8b42a951e8b5594/html5/thumbnails/20.jpg)
23
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 21: ria_acessibility.ppt](https://reader035.vdocument.in/reader035/viewer/2022062705/556468b3d8b42a951e8b5594/html5/thumbnails/21.jpg)
24
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 22: ria_acessibility.ppt](https://reader035.vdocument.in/reader035/viewer/2022062705/556468b3d8b42a951e8b5594/html5/thumbnails/22.jpg)
25
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 23: ria_acessibility.ppt](https://reader035.vdocument.in/reader035/viewer/2022062705/556468b3d8b42a951e8b5594/html5/thumbnails/23.jpg)
26
So how can we move forward?
![Page 24: ria_acessibility.ppt](https://reader035.vdocument.in/reader035/viewer/2022062705/556468b3d8b42a951e8b5594/html5/thumbnails/24.jpg)
27
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 25: ria_acessibility.ppt](https://reader035.vdocument.in/reader035/viewer/2022062705/556468b3d8b42a951e8b5594/html5/thumbnails/25.jpg)
28
Four Techniques – Use Them All
1. Standards-based development
2. Redundant interfaces
3. Faithful and Predictable Ports
4. WAI ARIA aka “Accessible DHTML”
![Page 26: ria_acessibility.ppt](https://reader035.vdocument.in/reader035/viewer/2022062705/556468b3d8b42a951e8b5594/html5/thumbnails/26.jpg)
29
Standards-Based Development
Don’t miss the opportunity
![Page 27: ria_acessibility.ppt](https://reader035.vdocument.in/reader035/viewer/2022062705/556468b3d8b42a951e8b5594/html5/thumbnails/27.jpg)
30
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 28: ria_acessibility.ppt](https://reader035.vdocument.in/reader035/viewer/2022062705/556468b3d8b42a951e8b5594/html5/thumbnails/28.jpg)
31
Standards-Based Development
Example: Y!News Tab Panel
• Example: Tab-Panel box: complete
![Page 29: ria_acessibility.ppt](https://reader035.vdocument.in/reader035/viewer/2022062705/556468b3d8b42a951e8b5594/html5/thumbnails/29.jpg)
32
Standards-Based Development
Example: Y!News Tab Panel
• Example: Tab-Panel box: no CSS
![Page 30: ria_acessibility.ppt](https://reader035.vdocument.in/reader035/viewer/2022062705/556468b3d8b42a951e8b5594/html5/thumbnails/30.jpg)
33
Standards-Based Development
Example: Y!News Tab Panel
• Example: Tab-Panel box: no JavaScript
![Page 31: ria_acessibility.ppt](https://reader035.vdocument.in/reader035/viewer/2022062705/556468b3d8b42a951e8b5594/html5/thumbnails/31.jpg)
34
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 32: ria_acessibility.ppt](https://reader035.vdocument.in/reader035/viewer/2022062705/556468b3d8b42a951e8b5594/html5/thumbnails/32.jpg)
35
Standards-Based Development
Ex: Y!Photos Ratings & Tags
http://nate.koechley.com/talks/2007/web-design-world/ria_accessibility/photos-nocss.avi
![Page 33: ria_acessibility.ppt](https://reader035.vdocument.in/reader035/viewer/2022062705/556468b3d8b42a951e8b5594/html5/thumbnails/33.jpg)
36
Standards-Based Development
Example: Y!Games
http://nate.koechley.com/talks/2007/web-design-world/ria_accessibility/games-nav.avi
![Page 34: ria_acessibility.ppt](https://reader035.vdocument.in/reader035/viewer/2022062705/556468b3d8b42a951e8b5594/html5/thumbnails/34.jpg)
37
Standards-Based Development
Example: Y! Home Page
http://nate.koechley.com/talks/2007/web-design-world/ria_accessibility/da11y-fp-searchtabs.avi
![Page 35: ria_acessibility.ppt](https://reader035.vdocument.in/reader035/viewer/2022062705/556468b3d8b42a951e8b5594/html5/thumbnails/35.jpg)
38
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 36: ria_acessibility.ppt](https://reader035.vdocument.in/reader035/viewer/2022062705/556468b3d8b42a951e8b5594/html5/thumbnails/36.jpg)
39
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 37: ria_acessibility.ppt](https://reader035.vdocument.in/reader035/viewer/2022062705/556468b3d8b42a951e8b5594/html5/thumbnails/37.jpg)
40
Redundant InterfacesOffer flexible interactions
![Page 38: ria_acessibility.ppt](https://reader035.vdocument.in/reader035/viewer/2022062705/556468b3d8b42a951e8b5594/html5/thumbnails/38.jpg)
41
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 39: ria_acessibility.ppt](https://reader035.vdocument.in/reader035/viewer/2022062705/556468b3d8b42a951e8b5594/html5/thumbnails/39.jpg)
42
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 40: ria_acessibility.ppt](https://reader035.vdocument.in/reader035/viewer/2022062705/556468b3d8b42a951e8b5594/html5/thumbnails/40.jpg)
43
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.
![Page 41: ria_acessibility.ppt](https://reader035.vdocument.in/reader035/viewer/2022062705/556468b3d8b42a951e8b5594/html5/thumbnails/41.jpg)
44
Redundant Interfaces
Example: 2D Slider
http://developer.yahoo.com/yui/examples/slider/rgb2.html
![Page 42: ria_acessibility.ppt](https://reader035.vdocument.in/reader035/viewer/2022062705/556468b3d8b42a951e8b5594/html5/thumbnails/42.jpg)
45
Redundant Interfaces
Example: Date Selector
http://developer.yahoo.com/yui/examples/calendar/intl_japan/
![Page 43: ria_acessibility.ppt](https://reader035.vdocument.in/reader035/viewer/2022062705/556468b3d8b42a951e8b5594/html5/thumbnails/43.jpg)
46
Redundant Interfaces
Example: YUI Menu from Markup
http://developer.yahoo.com/yui/examples/menu/leftnavfrommarkup.html
![Page 44: ria_acessibility.ppt](https://reader035.vdocument.in/reader035/viewer/2022062705/556468b3d8b42a951e8b5594/html5/thumbnails/44.jpg)
47
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 45: ria_acessibility.ppt](https://reader035.vdocument.in/reader035/viewer/2022062705/556468b3d8b42a951e8b5594/html5/thumbnails/45.jpg)
48
Redundant Interfaces
Example: Yahoo! home page
http://nate.koechley.com/talks/2007/web-design-world/ria_accessibility/frontpage-nojs.avi
![Page 46: ria_acessibility.ppt](https://reader035.vdocument.in/reader035/viewer/2022062705/556468b3d8b42a951e8b5594/html5/thumbnails/46.jpg)
49
Redundant Interfaces
Ex: Drag-n-Drop vs. Edit Flow
http://nate.koechley.com/talks/2007/web-design-world/ria_accessibility/my-change-layout.avi
![Page 47: ria_acessibility.ppt](https://reader035.vdocument.in/reader035/viewer/2022062705/556468b3d8b42a951e8b5594/html5/thumbnails/47.jpg)
50
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 48: ria_acessibility.ppt](https://reader035.vdocument.in/reader035/viewer/2022062705/556468b3d8b42a951e8b5594/html5/thumbnails/48.jpg)
51
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 49: ria_acessibility.ppt](https://reader035.vdocument.in/reader035/viewer/2022062705/556468b3d8b42a951e8b5594/html5/thumbnails/49.jpg)
52
Faithful and Predictable
Preserve the illusion
![Page 50: ria_acessibility.ppt](https://reader035.vdocument.in/reader035/viewer/2022062705/556468b3d8b42a951e8b5594/html5/thumbnails/50.jpg)
53
Faithful and Predictable Ports:
Faithful and Predictable Ports
• Overview and Definition
• We must capture this moment in time
• Learnability
• Discoverability
• Completeness is critical
![Page 51: ria_acessibility.ppt](https://reader035.vdocument.in/reader035/viewer/2022062705/556468b3d8b42a951e8b5594/html5/thumbnails/51.jpg)
54
Faithful and Predictable Ports:
Example: Full Selection Model
http://nate.koechley.com/talks/2007/web-design-world/ria_accessibility/photos-selection.avi
![Page 52: ria_acessibility.ppt](https://reader035.vdocument.in/reader035/viewer/2022062705/556468b3d8b42a951e8b5594/html5/thumbnails/52.jpg)
55
Faithful and Predictable Ports:
Ex: Full Keyboard Control
![Page 53: ria_acessibility.ppt](https://reader035.vdocument.in/reader035/viewer/2022062705/556468b3d8b42a951e8b5594/html5/thumbnails/53.jpg)
56
Faithful and Predictable Ports:
Ex: Full Keyboard Control
Example:
Slider fortified
with keyboard
http://nate.koechley.com/talks/2007/web-design-world/ria_accessibility/slider-keyboard.avi
![Page 54: ria_acessibility.ppt](https://reader035.vdocument.in/reader035/viewer/2022062705/556468b3d8b42a951e8b5594/html5/thumbnails/54.jpg)
57
Faithful and Predictable Ports:
Ex: Full Keyboard Control
![Page 55: ria_acessibility.ppt](https://reader035.vdocument.in/reader035/viewer/2022062705/556468b3d8b42a951e8b5594/html5/thumbnails/55.jpg)
58
Faithful and Predictable Ports:
Benefits
• More options for everybody
• Better discoverability
• Better usability
• Supports many working styles
• Establish the new platform
![Page 56: ria_acessibility.ppt](https://reader035.vdocument.in/reader035/viewer/2022062705/556468b3d8b42a951e8b5594/html5/thumbnails/56.jpg)
59
Faithful and Predictable Ports:
Drawbacks
• Isn’t always easy
• Seems heavier and/or more complex
• Not always the path of least resistance
![Page 57: ria_acessibility.ppt](https://reader035.vdocument.in/reader035/viewer/2022062705/556468b3d8b42a951e8b5594/html5/thumbnails/57.jpg)
60
WAI ARIA
“Accessible DHTML”
![Page 58: ria_acessibility.ppt](https://reader035.vdocument.in/reader035/viewer/2022062705/556468b3d8b42a951e8b5594/html5/thumbnails/58.jpg)
61
Rich Interfaces Require Sophisticated Definitions
![Page 59: ria_acessibility.ppt](https://reader035.vdocument.in/reader035/viewer/2022062705/556468b3d8b42a951e8b5594/html5/thumbnails/59.jpg)
62
“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 60: ria_acessibility.ppt](https://reader035.vdocument.in/reader035/viewer/2022062705/556468b3d8b42a951e8b5594/html5/thumbnails/60.jpg)
63
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 61: ria_acessibility.ppt](https://reader035.vdocument.in/reader035/viewer/2022062705/556468b3d8b42a951e8b5594/html5/thumbnails/61.jpg)
64
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 62: ria_acessibility.ppt](https://reader035.vdocument.in/reader035/viewer/2022062705/556468b3d8b42a951e8b5594/html5/thumbnails/62.jpg)
65
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 63: ria_acessibility.ppt](https://reader035.vdocument.in/reader035/viewer/2022062705/556468b3d8b42a951e8b5594/html5/thumbnails/63.jpg)
66
Content has changed!
• focus on updated content– tabindex -1
• Omits from tab order
• Not fully cross-browser
• Works, but unsophisticated
![Page 64: ria_acessibility.ppt](https://reader035.vdocument.in/reader035/viewer/2022062705/556468b3d8b42a951e8b5594/html5/thumbnails/64.jpg)
67
Role Taxonomy for Accessible Adaptable Applicationshttp://www.w3.org/WAI/PF/GUI/
![Page 65: ria_acessibility.ppt](https://reader035.vdocument.in/reader035/viewer/2022062705/556468b3d8b42a951e8b5594/html5/thumbnails/65.jpg)
68
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 66: ria_acessibility.ppt](https://reader035.vdocument.in/reader035/viewer/2022062705/556468b3d8b42a951e8b5594/html5/thumbnails/66.jpg)
69
“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 67: ria_acessibility.ppt](https://reader035.vdocument.in/reader035/viewer/2022062705/556468b3d8b42a951e8b5594/html5/thumbnails/67.jpg)
70
“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 68: ria_acessibility.ppt](https://reader035.vdocument.in/reader035/viewer/2022062705/556468b3d8b42a951e8b5594/html5/thumbnails/68.jpg)
71
“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 69: ria_acessibility.ppt](https://reader035.vdocument.in/reader035/viewer/2022062705/556468b3d8b42a951e8b5594/html5/thumbnails/69.jpg)
72
“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 70: ria_acessibility.ppt](https://reader035.vdocument.in/reader035/viewer/2022062705/556468b3d8b42a951e8b5594/html5/thumbnails/70.jpg)
73
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 71: ria_acessibility.ppt](https://reader035.vdocument.in/reader035/viewer/2022062705/556468b3d8b42a951e8b5594/html5/thumbnails/71.jpg)
74
Availability and Browser Support
“Graded Browser Support”
![Page 72: ria_acessibility.ppt](https://reader035.vdocument.in/reader035/viewer/2022062705/556468b3d8b42a951e8b5594/html5/thumbnails/72.jpg)
75
The Dirty Truth
• The Web is the most hostile software engineering environment imaginable.
– Douglas Crockford
![Page 73: ria_acessibility.ppt](https://reader035.vdocument.in/reader035/viewer/2022062705/556468b3d8b42a951e8b5594/html5/thumbnails/73.jpg)
76
Binary Browser Support
• Do I need to support ___ on this project?
![Page 74: ria_acessibility.ppt](https://reader035.vdocument.in/reader035/viewer/2022062705/556468b3d8b42a951e8b5594/html5/thumbnails/74.jpg)
77
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 75: ria_acessibility.ppt](https://reader035.vdocument.in/reader035/viewer/2022062705/556468b3d8b42a951e8b5594/html5/thumbnails/75.jpg)
78
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 76: ria_acessibility.ppt](https://reader035.vdocument.in/reader035/viewer/2022062705/556468b3d8b42a951e8b5594/html5/thumbnails/76.jpg)
79http://developer.yahoo.com/yui/articles/gbs/
![Page 77: ria_acessibility.ppt](https://reader035.vdocument.in/reader035/viewer/2022062705/556468b3d8b42a951e8b5594/html5/thumbnails/77.jpg)
80
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 78: ria_acessibility.ppt](https://reader035.vdocument.in/reader035/viewer/2022062705/556468b3d8b42a951e8b5594/html5/thumbnails/78.jpg)
81
http://developer.yahoo.com/yui/articles/gbs/
![Page 79: ria_acessibility.ppt](https://reader035.vdocument.in/reader035/viewer/2022062705/556468b3d8b42a951e8b5594/html5/thumbnails/79.jpg)
82
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 80: ria_acessibility.ppt](https://reader035.vdocument.in/reader035/viewer/2022062705/556468b3d8b42a951e8b5594/html5/thumbnails/80.jpg)
83
Thanks
• 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 81: ria_acessibility.ppt](https://reader035.vdocument.in/reader035/viewer/2022062705/556468b3d8b42a951e8b5594/html5/thumbnails/81.jpg)
84
We’re Hiring!
Josie Aguada: [email protected]
Usual suspects:
JavaScript, PHP, CSS, HTML, ActionScript…