1. Rich UI Design:
An Access-Oriented
Scott Jehl, Designer / Developer

2. hello.
Rich UI Design: An Access-Oriented Approach

3. A Boston-based design firm specializing in
complex web application design &
development.
Official Sponsor and Design Team
Rich UI Design: An Access-Oriented Approach

4. The 90% Solution
How it’s done now
A recap of current best practices for web dev
Rich UI Design: An Access-Oriented Approach

5. Clean, semantic HTML
Rich UI Design: An Access-Oriented Approach

6. Unobtrusive JS & CSS
Rich UI Design: An Access-Oriented Approach

7. Avoid CSS hacks
conditional comments (if necessary)
Rich UI Design: An Access-Oriented Approach

8. Flexible Units
Rich UI Design: An Access-Oriented Approach

9. test in all the
popular browsers
Rich UI Design: An Access-Oriented Approach

10. Accessible Hiding
Rich UI Design: An Access-Oriented Approach

11. test on a
screenreader
Rich UI Design: An Access-Oriented Approach

12. NVDA:
<h1>You sound like a drunk person in a
karaoke bar!</h1>
Rich UI Design: An Access-Oriented Approach

13. NVDA:
<h1>You sound like a drunk person in a
karaoke bar!</h1>
Rich UI Design: An Access-Oriented Approach

14. the promise of PE:
Rich UI Design: An Access-Oriented Approach

15. the promise of PE:
Works OK for everyone!
Rich UI Design: An Access-Oriented Approach

16. right?
Rich UI Design: An Access-Oriented Approach

17. that’s the
theory
anyway.
Rich UI Design: An Access-Oriented Approach

18. many browsers
partially understand...
Rich UI Design: An Access-Oriented Approach

19. more like...
progressive
mischancement!
...disenchantment?
...is this thing on?
Rich UI Design: An Access-Oriented Approach

20. HTML works
everywhere*
* Pretty much
Rich UI Design: An Access-Oriented Approach

21. Images, CSS, JS are
extras
will break (badly) somewhere
Rich UI Design: An Access-Oriented Approach

22. for example
Rich UI Design: An Access-Oriented Approach

23. Northface.com
Rich UI Design: An Access-Oriented Approach

24. Northface.com
IE 5
Rich UI Design: An Access-Oriented Approach

25. Cappuccino Framework Demo
Rich UI Design: An Access-Oriented Approach

26. Cappuccino Framework Demo
Without JavaScript
Rich UI Design: An Access-Oriented Approach

27. eek. (fixed in dev)
Rich UI Design: An Access-Oriented Approach

28. All or Nothing
frankly, sucks.
Rich UI Design: An Access-Oriented Approach

29. what’s a
web designer
to do?
Rich UI Design: An Access-Oriented Approach

30. one way
to approach the problem...
Rich UI Design: An Access-Oriented Approach

31. Rich UI Design: An Access-Oriented Approach

32. nice
if you have the resources support it...
Rich UI Design: An Access-Oriented Approach

33. a more
practical
approach:
Rich UI Design: An Access-Oriented Approach

34. One page,
many experiences
Rich UI Design: An Access-Oriented Approach

35. Slick here:
Still works here:
Rich UI Design: An Access-Oriented Approach

36. everyone
gets a usable, functional experience:
Rich UI Design: An Access-Oriented Approach

37. some
get an even better one!
Rich UI Design: An Access-Oriented Approach

38. integrating an
Access-Oriented
Rich UI Design: An Access-Oriented Approach

39. please God no.
Rich UI Design: An Access-Oriented Approach

40. not that access.
Rich UI Design: An Access-Oriented Approach

41. Access-Oriented Web
Design
Consider universal access
Rich UI Design: An Access-Oriented Approach

42. Take an inclusive approach!
“...To progress, we must change
the way we approach this task.”
Rich UI Design: An Access-Oriented Approach

43. how’s do we do it?
Rich UI Design: An Access-Oriented Approach

44. here’s how...
Capabilities
So you think you can enhance?
Rich UI Design: An Access-Oriented Approach

45. Test Capabilities
Basic Experience Enhanced Experience
Rich UI Design: An Access-Oriented Approach

46. AS SEEN ON
ALA
Rich UI Design: An Access-Oriented Approach

47. like interpretive dance, enhancements
aren’t for everyone
Rich UI Design: An Access-Oriented Approach

48. how do we know
who?
Rich UI Design: An Access-Oriented Approach

49. not like this!
navigator.userAgent
$_SERVER['HTTP_USER_AGENT']
Rich UI Design: An Access-Oriented Approach

50. more like this!
if( youCanRenderThis ){
>> enhance me!
}
Rich UI Design: An Access-Oriented Approach

51. tests you say?
what do we test?
Rich UI Design: An Access-Oriented Approach

52. any capabilities required
for the site to function properly
Rich UI Design: An Access-Oriented Approach

53. JavaScript Support
• Basic DOM traversal
• Basic Element manipulation
• AJAX Support
• Canvas perhaps...?
Rich UI Design: An Access-Oriented Approach

54. CSS Rendering
• Box Model
• Positioning
• Floats
• Clears
• Overflow
• And more...
Rich UI Design: An Access-Oriented Approach

55. How we test CSS
Once the <body> is ready, our test script:
inserts elements into the body
1
manipulates their style
2
checks if they rendered properly
3
Rich UI Design: An Access-Oriented Approach

56. How we test CSS
function boxmodel(){
var newDiv = document.createElement('div');
document.body.appendChild(newDiv);
newDiv.style.width = '20px';
newDiv.style.padding = '10px';
var divWidth = newDiv.offsetWidth;
document.body.removeChild(newDiv);
return divWidth == 40;
}
if( boxmodel() ){ >> PASS! }
Rich UI Design: An Access-Oriented Approach

57. What if it fails?
Basic Experience
Rich UI Design: An Access-Oriented Approach

58. What if it passes?
Basic Experience Enhanced Experience
Rich UI Design: An Access-Oriented Approach

59. What if it passes?
<html class=”enhanced”>
Add Class for CSS scoping
Rich UI Design: An Access-Oriented Approach

60. What if it passes?
CSS JS
Dynamically load CSS and JS
Rich UI Design: An Access-Oriented Approach

61. What if it passes?
Cookie the Results!
Rich UI Design: An Access-Oriented Approach

62. what’s the fallback?
View low-bandwidth version
Rich UI Design: An Access-Oriented Approach

63. enhance.js
Available at FilamentGroup.com/lab/
Rich UI Design: An Access-Oriented Approach

64. Let’s get to the demos
Rich UI Design: An Access-Oriented Approach

65. introducing...
Our Demo Page
Rich UI Design: An Access-Oriented Approach

66. Rich UI Design: An Access-Oriented Approach

67. Rich UI Design: An Access-Oriented Approach

68. the foundation...
Simple, Meaningful,
...and a little stylish too
Rich UI Design: An Access-Oriented Approach

69. breaking down
a design comp
Rich UI Design: An Access-Oriented Approach

70. Rich UI Design: An Access-Oriented Approach

71. <option> <table>
<li>
<h2>
<dl> <legend>
<ol> This is your
<p>
database <ul>
<h1> <label>
<select>
<h3>
<textarea> <input>
Rich UI Design: An Access-Oriented Approach

72. date picker
control
HTML: <input type=“text” />
Rich UI Design: An Access-Oriented Approach

73. custom select
menus
HTML: <select>
Rich UI Design: An Access-Oriented Approach

74. slider controls
HTML: <select>
Rich UI Design: An Access-Oriented Approach

75. custom radio
HTML: <input type=“radio” />
Rich UI Design: An Access-Oriented Approach

76. custom checkbox
HTML: <input type=“checkbox” />
Rich UI Design: An Access-Oriented Approach

77. custom submit button
HTML: <input type=“submit” />
Rich UI Design: An Access-Oriented Approach

78. data charts
HTML: <table>
Rich UI Design: An Access-Oriented Approach

79. Rich UI Design: An Access-Oriented Approach

80. a little
<style> is OK
(where it’s safe)
Rich UI Design: An Access-Oriented Approach

81. Unsafe Basic CSS
floats
reversed text
background images
positioning
Rich UI Design: An Access-Oriented Approach

82. Rich UI Design: An Access-Oriented Approach

83. Rich UI Design: An Access-Oriented Approach

84. the upgrade...
Enhancing the
with UI transformations, keyboard support, ARIA
Rich UI Design: An Access-Oriented Approach

85. first, let’s quickly set up
the test
Rich UI Design: An Access-Oriented Approach

86. <link rel="stylesheet" type="text/css" href="css/basic.css" />
<script src="js/enhance.js" type="text/javascript"></script>
<script type="text/javascript">
enhance({
loadStyles: ['enhanced.css'],
loadScripts: ['enhanced.js']
});
</script>
Rich UI Design: An Access-Oriented Approach

87. adding some components
Rich UI Design: An Access-Oriented Approach

88. Rich UI Design: An Access-Oriented Approach

89. first, we add
first, add to the enhanced.js file
Rich UI Design: An Access-Oriented Approach

90. datepicker plugin
JS: $(‘input’).datepicker();
Rich UI Design: An Access-Oriented Approach

91. jQuery dom ready
$(document).ready(function(){
//our scripting goes here!
});
Rich UI Design: An Access-Oriented Approach

92. selectmenu
plugin
JS: $(‘select’).selectmenu();
Rich UI Design: An Access-Oriented Approach

93. select-to-slider
plugin
JS: $(‘select’).selectToUISlider();
Rich UI Design: An Access-Oriented Approach

94. custom radio plugin
JS: $(‘input’).customInput();
Rich UI Design: An Access-Oriented Approach

95. custom checkbox plugin
JS: $(‘input’).customInput();
Rich UI Design: An Access-Oriented Approach

96. input-to-button plugin
JS: $(‘input’).inputToButton();
Rich UI Design: An Access-Oriented Approach

97. visualize plugin
JS: $(‘table’).visualize();
Rich UI Design: An Access-Oriented Approach

98. Rich UI Design: An Access-Oriented Approach

99. Rich UI Design: An Access-Oriented Approach

100. some tips for
Rolling your Own
Rich UI Design: An Access-Oriented Approach

101. replicate
before you
extend!
Rich UI Design: An Access-Oriented Approach

102. scrape
and
repurpose
Rich UI Design: An Access-Oriented Approach

103. proxy back
to the
native control
Rich UI Design: An Access-Oriented Approach

104. follow
native
conventions
and
user expections
Rich UI Design: An Access-Oriented Approach

105. consider the mouse
optional
Rich UI Design: An Access-Oriented Approach

106. keyboard basics
Rich UI Design: An Access-Oriented Approach

107. tab
between components
Rich UI Design: An Access-Oriented Approach

108. arrow, space, enter, other
within components
Rich UI Design: An Access-Oriented Approach

109. tabindex
0 vs. -1 vs. N
Rich UI Design: An Access-Oriented Approach

110. Keyboard Access Guidelines
“DHTML STYLE GUIDE”
http://dev.aol.com/dhtml_style_guide
Rich UI Design: An Access-Oriented Approach

111. keyboard support alone
won’t be enough.
Window Eyes
Rich UI Design: An Access-Oriented Approach

112. integrating
WAI-ARIA support
Rich UI Design: An Access-Oriented Approach

113. many
controls
are beyond
HTML’s vocab
Rich UI Design: An Access-Oriented Approach

114. landmarks
banner, main, navigation
roles
tree, slider, tabs
states
aria-expanded, aria-checked
Rich UI Design: An Access-Oriented Approach

115. Adding ARIA
to the jQuery UI Slider
Rich UI Design: An Access-Oriented Approach

116. Existing Markup
<div class="ui-slider">
<a href="#" class="ui-slider-handle" style="left: 38%;"></a>
</div>
Rich UI Design: An Access-Oriented Approach

117. “number link” - Jaws
Rich UI Design: An Access-Oriented Approach

118. “Number link”
<div class="ui-slider">
<a href="#" class="ui-slider-
Rich UI Design: An Access-Oriented Approach

119. Adding ARIA
Rich UI Design: An Access-Oriented Approach

120. Modified Markup
<div role=”application” class="ui-slider">
<a href="#" class="ui-slider-handle" style="left: 38%;"
role=”slider”
aria-valuemin=”0”
aria-valuemax”100”
aria-valuenow=”38”
aria-valuetext=”38%”>
</a>
</div>
Rich UI Design: An Access-Oriented Approach

121. “slider control: 38
percent. Use arrows to
move handle” - Jaws
Rich UI Design: An Access-Oriented Approach

122. the result...
Putting it All Together
Let’s see this thing in action!
Rich UI Design: An Access-Oriented Approach

123. Rich UI Design: An Access-Oriented Approach

124. Rich UI Design: An Access-Oriented Approach

125. the end...
Thanks
for links and such, visit filamentgroup.com/lab
Rich UI Design: An Access-Oriented Approach