Designing RIA Accessibility: A Yahoo UI (YUI) Menu Case Study · Flash, JavaScript, Java ......
Transcript of Designing RIA Accessibility: A Yahoo UI (YUI) Menu Case Study · Flash, JavaScript, Java ......
![Page 1: Designing RIA Accessibility: A Yahoo UI (YUI) Menu Case Study · Flash, JavaScript, Java ... •Allows ARIA on top of RIA. 46 Faithful and Predictable Ports: Benefits •More options](https://reader036.fdocuments.us/reader036/viewer/2022090604/60584a8c44cf16199a0e8cb3/html5/thumbnails/1.jpg)
1
Designing RIA Accessibility:A Yahoo UI (YUI) Menu Case Study
Doug Geoffray & Todd Kloots
Capacity Building InstituteSeattle, Washington
2006.11.30
![Page 2: Designing RIA Accessibility: A Yahoo UI (YUI) Menu Case Study · Flash, JavaScript, Java ... •Allows ARIA on top of RIA. 46 Faithful and Predictable Ports: Benefits •More options](https://reader036.fdocuments.us/reader036/viewer/2022090604/60584a8c44cf16199a0e8cb3/html5/thumbnails/2.jpg)
2
What’s Happening?
![Page 3: Designing RIA Accessibility: A Yahoo UI (YUI) Menu Case Study · Flash, JavaScript, Java ... •Allows ARIA on top of RIA. 46 Faithful and Predictable Ports: Benefits •More options](https://reader036.fdocuments.us/reader036/viewer/2022090604/60584a8c44cf16199a0e8cb3/html5/thumbnails/3.jpg)
3
Web 1.0 vs. Web 2.0
![Page 4: Designing RIA Accessibility: A Yahoo UI (YUI) Menu Case Study · Flash, JavaScript, Java ... •Allows ARIA on top of RIA. 46 Faithful and Predictable Ports: Benefits •More options](https://reader036.fdocuments.us/reader036/viewer/2022090604/60584a8c44cf16199a0e8cb3/html5/thumbnails/4.jpg)
4
Rich Internet Applications (RIAs)
• RIAs are:– Web apps with features and
functionality of traditional desktopapplications
– Can be created in various languages:Flash, JavaScript, Java• Today’s talk is focused on JavaScript RIAs
![Page 5: Designing RIA Accessibility: A Yahoo UI (YUI) Menu Case Study · Flash, JavaScript, Java ... •Allows ARIA on top of RIA. 46 Faithful and Predictable Ports: Benefits •More options](https://reader036.fdocuments.us/reader036/viewer/2022090604/60584a8c44cf16199a0e8cb3/html5/thumbnails/5.jpg)
5
Web 2.0 Design Philosophy
• “Getting It Right The Second Time” -Matt Sweeney
• http://yuiblog.com/blog/2006/10/03/video-sweeney-hackday06/
![Page 6: Designing RIA Accessibility: A Yahoo UI (YUI) Menu Case Study · Flash, JavaScript, Java ... •Allows ARIA on top of RIA. 46 Faithful and Predictable Ports: Benefits •More options](https://reader036.fdocuments.us/reader036/viewer/2022090604/60584a8c44cf16199a0e8cb3/html5/thumbnails/6.jpg)
6
Getting It Right the Second Time
• Use technology as designed– Example: HTML is a small vocabulary, so choose the
right tags to give the most meaning to your content.
• Do not corrupt layers of the stack– Examples of what not to do:
• class=“red-button”• href=“javascript:”
• Create platforms. Evolvability– Encapsulation, Flexibility, Mashups, Services,
Portability
• Preserve opportunity & availability
![Page 7: Designing RIA Accessibility: A Yahoo UI (YUI) Menu Case Study · Flash, JavaScript, Java ... •Allows ARIA on top of RIA. 46 Faithful and Predictable Ports: Benefits •More options](https://reader036.fdocuments.us/reader036/viewer/2022090604/60584a8c44cf16199a0e8cb3/html5/thumbnails/7.jpg)
7
Preserve opportunity &availability
![Page 8: Designing RIA Accessibility: A Yahoo UI (YUI) Menu Case Study · Flash, JavaScript, Java ... •Allows ARIA on top of RIA. 46 Faithful and Predictable Ports: Benefits •More options](https://reader036.fdocuments.us/reader036/viewer/2022090604/60584a8c44cf16199a0e8cb3/html5/thumbnails/8.jpg)
8
Accessibility Defined
• Accessibility is:– “A general term used to describe the
degree to which a system is usable byas many people as possible withoutmodification” (cite: Wikipedia)
• Often, our focus is on enabling screen-readers specifically– However, the resulting work is
generally more far-reaching
![Page 9: Designing RIA Accessibility: A Yahoo UI (YUI) Menu Case Study · Flash, JavaScript, Java ... •Allows ARIA on top of RIA. 46 Faithful and Predictable Ports: Benefits •More options](https://reader036.fdocuments.us/reader036/viewer/2022090604/60584a8c44cf16199a0e8cb3/html5/thumbnails/9.jpg)
9
So how can we move forward?
![Page 10: Designing RIA Accessibility: A Yahoo UI (YUI) Menu Case Study · Flash, JavaScript, Java ... •Allows ARIA on top of RIA. 46 Faithful and Predictable Ports: Benefits •More options](https://reader036.fdocuments.us/reader036/viewer/2022090604/60584a8c44cf16199a0e8cb3/html5/thumbnails/10.jpg)
10
Three Techniques (Use Them All)
1. Standards-based Development2. Redundant Interfaces3. Faithful and Predictable Ports
![Page 11: Designing RIA Accessibility: A Yahoo UI (YUI) Menu Case Study · Flash, JavaScript, Java ... •Allows ARIA on top of RIA. 46 Faithful and Predictable Ports: Benefits •More options](https://reader036.fdocuments.us/reader036/viewer/2022090604/60584a8c44cf16199a0e8cb3/html5/thumbnails/11.jpg)
11
Characteristics of Techniques
• Don’t make things worse• Provide alternatives• Learn from other technologies• Support improvement of a11y tech
![Page 12: Designing RIA Accessibility: A Yahoo UI (YUI) Menu Case Study · Flash, JavaScript, Java ... •Allows ARIA on top of RIA. 46 Faithful and Predictable Ports: Benefits •More options](https://reader036.fdocuments.us/reader036/viewer/2022090604/60584a8c44cf16199a0e8cb3/html5/thumbnails/12.jpg)
12
Standards-Based Development
Don’t miss the opportunity
![Page 13: Designing RIA Accessibility: A Yahoo UI (YUI) Menu Case Study · Flash, JavaScript, Java ... •Allows ARIA on top of RIA. 46 Faithful and Predictable Ports: Benefits •More options](https://reader036.fdocuments.us/reader036/viewer/2022090604/60584a8c44cf16199a0e8cb3/html5/thumbnails/13.jpg)
13
Approach 1:Standards-Based Development
• Overview and Definition• Create and stand upon a strong markup
foundation• Subsequent layers (CSS, JavaScript, etc.)
enhance meaningful and structured markup• Progressive and unobtrusive enhancement• Don’t contaminate the neighborhood• Be generous with markup to provide as
much meaning as possible
![Page 14: Designing RIA Accessibility: A Yahoo UI (YUI) Menu Case Study · Flash, JavaScript, Java ... •Allows ARIA on top of RIA. 46 Faithful and Predictable Ports: Benefits •More options](https://reader036.fdocuments.us/reader036/viewer/2022090604/60584a8c44cf16199a0e8cb3/html5/thumbnails/14.jpg)
14
Standards-Based Development
Example: Menu Structure
<div> <div>
<ul> <li> Cut </li> <li> Copy </li> <li> Paste </li> </ul> <ul> <li> Select All </li> </ul> <ul> <li> Find (on This Page)... </li> </ul>
</div></div>
![Page 15: Designing RIA Accessibility: A Yahoo UI (YUI) Menu Case Study · Flash, JavaScript, Java ... •Allows ARIA on top of RIA. 46 Faithful and Predictable Ports: Benefits •More options](https://reader036.fdocuments.us/reader036/viewer/2022090604/60584a8c44cf16199a0e8cb3/html5/thumbnails/15.jpg)
15
Standards-Based Development
Example: Menu Heirarchy<div> <div>
<ul> <li> Item One
<div> <div>
<ul> <li> Item One </li> <li> Item Two </li> <li> Item Three </li> </ul>
</div> </div>
</li> <li> Item Two </li> <li> Item Three </li> </ul>
</div></div>
![Page 16: Designing RIA Accessibility: A Yahoo UI (YUI) Menu Case Study · Flash, JavaScript, Java ... •Allows ARIA on top of RIA. 46 Faithful and Predictable Ports: Benefits •More options](https://reader036.fdocuments.us/reader036/viewer/2022090604/60584a8c44cf16199a0e8cb3/html5/thumbnails/16.jpg)
16
<div> <div>
<ul> <li> Cut </li> <li> Copy </li> <li> Paste </li> </ul> <ul> <li> Select All </li> </ul> <ul> <li> Find (on This Page)... </li> </ul>
</div></div>
Standards-Based Development
Example: Separators
![Page 17: Designing RIA Accessibility: A Yahoo UI (YUI) Menu Case Study · Flash, JavaScript, Java ... •Allows ARIA on top of RIA. 46 Faithful and Predictable Ports: Benefits •More options](https://reader036.fdocuments.us/reader036/viewer/2022090604/60584a8c44cf16199a0e8cb3/html5/thumbnails/17.jpg)
17
Standards-Based Development
Example: Help Text
<div> <div>
<ul> <li> Cut <em>Ctrl + X</em> </li> <li> Copy <em>Ctrl + C</em> </li> <li> Paste <em>Ctrl + V</em> </li> </ul> <ul> <li> Select All <em>Ctrl + A</em> </li> </ul> <ul> <li> Find (on This Page)... <em>Ctrl + F</em> </li> </ul>
</div></div>
![Page 18: Designing RIA Accessibility: A Yahoo UI (YUI) Menu Case Study · Flash, JavaScript, Java ... •Allows ARIA on top of RIA. 46 Faithful and Predictable Ports: Benefits •More options](https://reader036.fdocuments.us/reader036/viewer/2022090604/60584a8c44cf16199a0e8cb3/html5/thumbnails/18.jpg)
18
Standards-Based DevelopmentExample: Titles
<div> <div>
<h6> Applications </h6> <ul> <li> BBEdit </li> <li> Firefox 2.0 </li> <li> Grab </li>
<li> Microsoft PowerPoint </li> </ul>
<h6> Documents </h6> <ul> <li> Accessibility </li>
<li> file.txt </li> </ul>
</div></div>
![Page 19: Designing RIA Accessibility: A Yahoo UI (YUI) Menu Case Study · Flash, JavaScript, Java ... •Allows ARIA on top of RIA. 46 Faithful and Predictable Ports: Benefits •More options](https://reader036.fdocuments.us/reader036/viewer/2022090604/60584a8c44cf16199a0e8cb3/html5/thumbnails/19.jpg)
19
Standards-Based DevelopmentExample: Emphasis
<div> <div>
<ul> <li> <em>Open</em> </li> <li> Explore </li> <li> Search… </li> <li> Manage </li> </ul>
<ul> <li> Map Network Drive.. </li> <li> Disconnect Network Drive.. </li>
</ul>
...
</div></div>
![Page 20: Designing RIA Accessibility: A Yahoo UI (YUI) Menu Case Study · Flash, JavaScript, Java ... •Allows ARIA on top of RIA. 46 Faithful and Predictable Ports: Benefits •More options](https://reader036.fdocuments.us/reader036/viewer/2022090604/60584a8c44cf16199a0e8cb3/html5/thumbnails/20.jpg)
20
Standards-Based Development
Benefits
• “With the grain” of web technologies• Truly available to all• Provides strong foundation• A step toward a semantic web• Long shelf life
![Page 21: Designing RIA Accessibility: A Yahoo UI (YUI) Menu Case Study · Flash, JavaScript, Java ... •Allows ARIA on top of RIA. 46 Faithful and Predictable Ports: Benefits •More options](https://reader036.fdocuments.us/reader036/viewer/2022090604/60584a8c44cf16199a0e8cb3/html5/thumbnails/21.jpg)
21
Standards-Based Development
Drawbacks
• Doesn’t solve every problem• Perceived overhead
– Unobtrusive JavaScript, CSS-basedlayouts and Hijax are still less familiartechniques
![Page 22: Designing RIA Accessibility: A Yahoo UI (YUI) Menu Case Study · Flash, JavaScript, Java ... •Allows ARIA on top of RIA. 46 Faithful and Predictable Ports: Benefits •More options](https://reader036.fdocuments.us/reader036/viewer/2022090604/60584a8c44cf16199a0e8cb3/html5/thumbnails/22.jpg)
22
Standards-Based Development
Drawbacks Example
• “disabled” attribute can be applied to a limited number ofelements in HTML 4:• <button>• <input>• <optgroup>• <select>
• <textarea>
• This limitation makes it difficult to communicate that anelement in a DHTML widget is disabled
• Existing limitation solved by WAI-ARIA States and Properties• Example: <li role=“wairole:menuitem”
aaa:disabled="true">Copy</li>
![Page 23: Designing RIA Accessibility: A Yahoo UI (YUI) Menu Case Study · Flash, JavaScript, Java ... •Allows ARIA on top of RIA. 46 Faithful and Predictable Ports: Benefits •More options](https://reader036.fdocuments.us/reader036/viewer/2022090604/60584a8c44cf16199a0e8cb3/html5/thumbnails/23.jpg)
23
Redundant InterfacesOffer flexible interactions
![Page 24: Designing RIA Accessibility: A Yahoo UI (YUI) Menu Case Study · Flash, JavaScript, Java ... •Allows ARIA on top of RIA. 46 Faithful and Predictable Ports: Benefits •More options](https://reader036.fdocuments.us/reader036/viewer/2022090604/60584a8c44cf16199a0e8cb3/html5/thumbnails/24.jpg)
24
Approach 2:
Redundant Interfaces
• Overview and Definition• Desktop offers multiple means of input
• Choice of GUI input and command line• Direct movement of objects vs. configuration-based
movement• Text fields with option of auto complete• Support for Tab and arrow keys
• We must bring these redundancies to the web
![Page 25: Designing RIA Accessibility: A Yahoo UI (YUI) Menu Case Study · Flash, JavaScript, Java ... •Allows ARIA on top of RIA. 46 Faithful and Predictable Ports: Benefits •More options](https://reader036.fdocuments.us/reader036/viewer/2022090604/60584a8c44cf16199a0e8cb3/html5/thumbnails/25.jpg)
25
Approach 2:
Redundant Interfaces
• Overview and Definition• Desktop offers multiple means of
manipulation• Keyboard and mouse
– Example: Users can close a window by hitting“Esc” key or by using the close button
• Drag-drop and form-based
• We must bring these redundancies tothe web
![Page 26: Designing RIA Accessibility: A Yahoo UI (YUI) Menu Case Study · Flash, JavaScript, Java ... •Allows ARIA on top of RIA. 46 Faithful and Predictable Ports: Benefits •More options](https://reader036.fdocuments.us/reader036/viewer/2022090604/60584a8c44cf16199a0e8cb3/html5/thumbnails/26.jpg)
26
Redundant InterfacesExample: Progressive Enhancement
• Lynx: text-onlybrowser
• No JavaScriptsupport
• No CSS support• YUI Menu content
is still meaningfuland menuhierarchy is wellrepresentedbecause it isbased onsemantic markup
![Page 27: Designing RIA Accessibility: A Yahoo UI (YUI) Menu Case Study · Flash, JavaScript, Java ... •Allows ARIA on top of RIA. 46 Faithful and Predictable Ports: Benefits •More options](https://reader036.fdocuments.us/reader036/viewer/2022090604/60584a8c44cf16199a0e8cb3/html5/thumbnails/27.jpg)
27
Redundant InterfacesExample: Progressive Enhancement
• Netscape 4:graphical browserwith limitedsupport for CSSand JavaScript
• YUI Menu contentis still meaningfuland menuhierarchy is wellrepresentedbecause it isbased onsemantic markup.
![Page 28: Designing RIA Accessibility: A Yahoo UI (YUI) Menu Case Study · Flash, JavaScript, Java ... •Allows ARIA on top of RIA. 46 Faithful and Predictable Ports: Benefits •More options](https://reader036.fdocuments.us/reader036/viewer/2022090604/60584a8c44cf16199a0e8cb3/html5/thumbnails/28.jpg)
28
Redundant InterfacesExample: Progressive Enhancement
• Firefox hasexcellent supportfor CSS andJavaScript
• Paranoid usersmight disableJavaScript
• YUI Menu contentis still meaningfuland menuhierarchy is wellrepresentedbecause it isbased onsemantic markup
![Page 29: Designing RIA Accessibility: A Yahoo UI (YUI) Menu Case Study · Flash, JavaScript, Java ... •Allows ARIA on top of RIA. 46 Faithful and Predictable Ports: Benefits •More options](https://reader036.fdocuments.us/reader036/viewer/2022090604/60584a8c44cf16199a0e8cb3/html5/thumbnails/29.jpg)
29
Redundant InterfacesExample: Progressive Enhancement
• IE also hasexcellentsupport forCSS andJavaScript
• CSS andJavaScript canwork togetherto transformthe experiencewithoutsacrificing thecontent
![Page 30: Designing RIA Accessibility: A Yahoo UI (YUI) Menu Case Study · Flash, JavaScript, Java ... •Allows ARIA on top of RIA. 46 Faithful and Predictable Ports: Benefits •More options](https://reader036.fdocuments.us/reader036/viewer/2022090604/60584a8c44cf16199a0e8cb3/html5/thumbnails/30.jpg)
30
Progressive EnhancementSummary
• Semantic markup makes content portable• Progressive enhancement allow for the
development of redundant interfaces thatgive users a choice– Text only interface: Lynx and Netscape 4– Rich, DHTML interface: Firefox and IE
![Page 31: Designing RIA Accessibility: A Yahoo UI (YUI) Menu Case Study · Flash, JavaScript, Java ... •Allows ARIA on top of RIA. 46 Faithful and Predictable Ports: Benefits •More options](https://reader036.fdocuments.us/reader036/viewer/2022090604/60584a8c44cf16199a0e8cb3/html5/thumbnails/31.jpg)
31
Redundant InterfacesExample: Multiple Task Flows
Communication
PIM
• Site should be to be navigatedwithout DHTML
• Give users a choice• DHTML menus gives the user the
option of skipping steps
![Page 32: Designing RIA Accessibility: A Yahoo UI (YUI) Menu Case Study · Flash, JavaScript, Java ... •Allows ARIA on top of RIA. 46 Faithful and Predictable Ports: Benefits •More options](https://reader036.fdocuments.us/reader036/viewer/2022090604/60584a8c44cf16199a0e8cb3/html5/thumbnails/32.jpg)
32
Redundant InterfacesExample: Keyboard & Mouse Support
![Page 33: Designing RIA Accessibility: A Yahoo UI (YUI) Menu Case Study · Flash, JavaScript, Java ... •Allows ARIA on top of RIA. 46 Faithful and Predictable Ports: Benefits •More options](https://reader036.fdocuments.us/reader036/viewer/2022090604/60584a8c44cf16199a0e8cb3/html5/thumbnails/33.jpg)
33
Keyboard & Mouse SupportRoaming tabindex=“0” technique
• Start out with tabindex=“-1” on all child itemsexcept for first, which getstabindex=“0”
• As user arrows around, reset previouslyfocused item item to tabindex=“-1”
• Set newly focused item to tabindex=“0”• Works with Firefox and IE• More at:
http://developer.mozilla.org/en/docs/Key-navigable_custom_DHTML_widgets
![Page 34: Designing RIA Accessibility: A Yahoo UI (YUI) Menu Case Study · Flash, JavaScript, Java ... •Allows ARIA on top of RIA. 46 Faithful and Predictable Ports: Benefits •More options](https://reader036.fdocuments.us/reader036/viewer/2022090604/60584a8c44cf16199a0e8cb3/html5/thumbnails/34.jpg)
34
Redundant InterfacesExample: Screen Reader Support
• Inline images with alttext: “Collapsed. Clickto expand.”
• “click” event handlerhides and showssubmenu
• When submenu ismade visible, content isfocused and image alttext is updated:“Expanded. Click tocollapse.”
Focused
![Page 35: Designing RIA Accessibility: A Yahoo UI (YUI) Menu Case Study · Flash, JavaScript, Java ... •Allows ARIA on top of RIA. 46 Faithful and Predictable Ports: Benefits •More options](https://reader036.fdocuments.us/reader036/viewer/2022090604/60584a8c44cf16199a0e8cb3/html5/thumbnails/35.jpg)
35
Redundant InterfacesExample: Screen Reader Support
• Inline image with alttext: “Checked.”
• Appended after thetext node of the <li>element
• Positioned via CSSfor traditional lookand feel
<li> Status Bar <img alt=“Checked”> </li>
![Page 36: Designing RIA Accessibility: A Yahoo UI (YUI) Menu Case Study · Flash, JavaScript, Java ... •Allows ARIA on top of RIA. 46 Faithful and Predictable Ports: Benefits •More options](https://reader036.fdocuments.us/reader036/viewer/2022090604/60584a8c44cf16199a0e8cb3/html5/thumbnails/36.jpg)
36
Redundant InterfacesExample: Screen Reader Support
• Learnings:– Use inline images over background
images when appropriate– Screen readers respect CSS “visibility”
and “display” properties– Set focus to new content that is made
visible or appended to the page viaDOM methods
![Page 37: Designing RIA Accessibility: A Yahoo UI (YUI) Menu Case Study · Flash, JavaScript, Java ... •Allows ARIA on top of RIA. 46 Faithful and Predictable Ports: Benefits •More options](https://reader036.fdocuments.us/reader036/viewer/2022090604/60584a8c44cf16199a0e8cb3/html5/thumbnails/37.jpg)
37
Redundant Interfaces
Benefits
• Better for everybody– Keyboard is important just as important
as mouse– Let users choose from multiple task
flows
• Transfer the complete set ofexpectations from the desktop to thebrowser
![Page 38: Designing RIA Accessibility: A Yahoo UI (YUI) Menu Case Study · Flash, JavaScript, Java ... •Allows ARIA on top of RIA. 46 Faithful and Predictable Ports: Benefits •More options](https://reader036.fdocuments.us/reader036/viewer/2022090604/60584a8c44cf16199a0e8cb3/html5/thumbnails/38.jpg)
38
Redundant Interfaces
Drawbacks
• Insufficient communication with accessibilityAPIs on the desktop
• Dual experiences/interfaces may pressuregoals of parity
• Requires development of two experiences• But not 2x effort!
• Can actually benefit developmentprocess
![Page 39: Designing RIA Accessibility: A Yahoo UI (YUI) Menu Case Study · Flash, JavaScript, Java ... •Allows ARIA on top of RIA. 46 Faithful and Predictable Ports: Benefits •More options](https://reader036.fdocuments.us/reader036/viewer/2022090604/60584a8c44cf16199a0e8cb3/html5/thumbnails/39.jpg)
39
Faithful and Predictable Ports
Preserve the illusion
![Page 40: Designing RIA Accessibility: A Yahoo UI (YUI) Menu Case Study · Flash, JavaScript, Java ... •Allows ARIA on top of RIA. 46 Faithful and Predictable Ports: Benefits •More options](https://reader036.fdocuments.us/reader036/viewer/2022090604/60584a8c44cf16199a0e8cb3/html5/thumbnails/40.jpg)
40
Approach 3:Faithful and Predictable Ports
• Overview and Definition:• Mimic the desktop experience to
provide:• Learnability• Discoverability
• Completeness is critical• We must capture this moment in time
![Page 41: Designing RIA Accessibility: A Yahoo UI (YUI) Menu Case Study · Flash, JavaScript, Java ... •Allows ARIA on top of RIA. 46 Faithful and Predictable Ports: Benefits •More options](https://reader036.fdocuments.us/reader036/viewer/2022090604/60584a8c44cf16199a0e8cb3/html5/thumbnails/41.jpg)
41
Faithful and Predictable PortsExample: Keyboard Access
• Hitting Esc hides a menu• Arrow keys
– Up and Down will go over the top– Right to expand submenu OR to move
to the next item in the menu bar– Left to collapse a submenu OR to
move to the next item in a menu bar• Tabbing through items
![Page 42: Designing RIA Accessibility: A Yahoo UI (YUI) Menu Case Study · Flash, JavaScript, Java ... •Allows ARIA on top of RIA. 46 Faithful and Predictable Ports: Benefits •More options](https://reader036.fdocuments.us/reader036/viewer/2022090604/60584a8c44cf16199a0e8cb3/html5/thumbnails/42.jpg)
42
Faithful and Predictable PortsExample: Resizability
• Declare font size in relative units• Use <iframe> to allow DHTML
widgets to response to changes to thefont size• Create and insert into the page via
JavaScript• Height and width declared in EM units• Add a “resize” event listener
![Page 43: Designing RIA Accessibility: A Yahoo UI (YUI) Menu Case Study · Flash, JavaScript, Java ... •Allows ARIA on top of RIA. 46 Faithful and Predictable Ports: Benefits •More options](https://reader036.fdocuments.us/reader036/viewer/2022090604/60584a8c44cf16199a0e8cb3/html5/thumbnails/43.jpg)
43
Faithful and Predictable PortsExample: Viewport Positioning
Problem: Menus positioned outside the boundaries of thebrowser viewport require extra scrolling.
![Page 44: Designing RIA Accessibility: A Yahoo UI (YUI) Menu Case Study · Flash, JavaScript, Java ... •Allows ARIA on top of RIA. 46 Faithful and Predictable Ports: Benefits •More options](https://reader036.fdocuments.us/reader036/viewer/2022090604/60584a8c44cf16199a0e8cb3/html5/thumbnails/44.jpg)
44
Faithful and Predictable PortsExample: Viewport Positioning
Solution: Menus that automatically remain inside thebrowser viewport boundaries are more usable to all users.
![Page 45: Designing RIA Accessibility: A Yahoo UI (YUI) Menu Case Study · Flash, JavaScript, Java ... •Allows ARIA on top of RIA. 46 Faithful and Predictable Ports: Benefits •More options](https://reader036.fdocuments.us/reader036/viewer/2022090604/60584a8c44cf16199a0e8cb3/html5/thumbnails/45.jpg)
45
Faithful and Predictable PortsWAI-ARIA Roles & States
• Utilizes powerful and well-understooddesktop API
• Map controls, events, roles and statesdirectly to powerful and well-understood desktop accessibility APIs
• Standard and predictable enrichmentof markup
• Allows ARIA on top of RIA
![Page 46: Designing RIA Accessibility: A Yahoo UI (YUI) Menu Case Study · Flash, JavaScript, Java ... •Allows ARIA on top of RIA. 46 Faithful and Predictable Ports: Benefits •More options](https://reader036.fdocuments.us/reader036/viewer/2022090604/60584a8c44cf16199a0e8cb3/html5/thumbnails/46.jpg)
46
Faithful and Predictable Ports:Benefits
• More options for everybody• Better discoverability• Better usability• Supports many working styles• Establish the new platform
![Page 47: Designing RIA Accessibility: A Yahoo UI (YUI) Menu Case Study · Flash, JavaScript, Java ... •Allows ARIA on top of RIA. 46 Faithful and Predictable Ports: Benefits •More options](https://reader036.fdocuments.us/reader036/viewer/2022090604/60584a8c44cf16199a0e8cb3/html5/thumbnails/47.jpg)
47
Faithful and Predictable Ports:Drawbacks
• Isn’t always easy• Seems heavier and/or more complex• Not always the path of least resistance
![Page 48: Designing RIA Accessibility: A Yahoo UI (YUI) Menu Case Study · Flash, JavaScript, Java ... •Allows ARIA on top of RIA. 46 Faithful and Predictable Ports: Benefits •More options](https://reader036.fdocuments.us/reader036/viewer/2022090604/60584a8c44cf16199a0e8cb3/html5/thumbnails/48.jpg)
48
Questions