Rich UI Design: An Access Oriented Approach Sc For Ss.Key

2,586 views

Published on

Published in: Design
0 Comments
14 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,586
On SlideShare
0
From Embeds
0
Number of Embeds
34
Actions
Shares
0
Downloads
0
Comments
0
Likes
14
Embeds 0
No embeds

No notes for slide

Rich UI Design: An Access Oriented Approach Sc For Ss.Key

  1. 1. Rich UI Design: An Access-Oriented Scott Jehl, Designer / Developer
  2. 2. hello. Rich UI Design: An Access-Oriented Approach
  3. 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. 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. 5. Clean, semantic HTML Rich UI Design: An Access-Oriented Approach
  6. 6. Unobtrusive JS & CSS Rich UI Design: An Access-Oriented Approach
  7. 7. Avoid CSS hacks conditional comments (if necessary) Rich UI Design: An Access-Oriented Approach
  8. 8. Flexible Units Rich UI Design: An Access-Oriented Approach
  9. 9. test in all the popular browsers Rich UI Design: An Access-Oriented Approach
  10. 10. Accessible Hiding Rich UI Design: An Access-Oriented Approach
  11. 11. test on a screenreader Rich UI Design: An Access-Oriented Approach
  12. 12. NVDA: <h1>You sound like a drunk person in a karaoke bar!</h1> Rich UI Design: An Access-Oriented Approach
  13. 13. NVDA: <h1>You sound like a drunk person in a karaoke bar!</h1> Rich UI Design: An Access-Oriented Approach
  14. 14. the promise of PE: Rich UI Design: An Access-Oriented Approach
  15. 15. the promise of PE: Works OK for everyone! Rich UI Design: An Access-Oriented Approach
  16. 16. right? Rich UI Design: An Access-Oriented Approach
  17. 17. that’s the theory anyway. Rich UI Design: An Access-Oriented Approach
  18. 18. many browsers partially understand... Rich UI Design: An Access-Oriented Approach
  19. 19. more like... progressive mischancement! ...disenchantment? ...is this thing on? Rich UI Design: An Access-Oriented Approach
  20. 20. HTML works everywhere* * Pretty much Rich UI Design: An Access-Oriented Approach
  21. 21. Images, CSS, JS are extras will break (badly) somewhere Rich UI Design: An Access-Oriented Approach
  22. 22. for example Rich UI Design: An Access-Oriented Approach
  23. 23. Northface.com Rich UI Design: An Access-Oriented Approach
  24. 24. Northface.com IE 5 Rich UI Design: An Access-Oriented Approach
  25. 25. Cappuccino Framework Demo Rich UI Design: An Access-Oriented Approach
  26. 26. Cappuccino Framework Demo Without JavaScript Rich UI Design: An Access-Oriented Approach
  27. 27. eek. (fixed in dev) Rich UI Design: An Access-Oriented Approach
  28. 28. All or Nothing frankly, sucks. Rich UI Design: An Access-Oriented Approach
  29. 29. what’s a web designer to do? Rich UI Design: An Access-Oriented Approach
  30. 30. one way to approach the problem... Rich UI Design: An Access-Oriented Approach
  31. 31. Rich UI Design: An Access-Oriented Approach
  32. 32. nice if you have the resources support it... Rich UI Design: An Access-Oriented Approach
  33. 33. a more practical approach: Rich UI Design: An Access-Oriented Approach
  34. 34. One page, many experiences Rich UI Design: An Access-Oriented Approach
  35. 35. Slick here: Still works here: Rich UI Design: An Access-Oriented Approach
  36. 36. everyone gets a usable, functional experience: Rich UI Design: An Access-Oriented Approach
  37. 37. some get an even better one! Rich UI Design: An Access-Oriented Approach
  38. 38. integrating an Access-Oriented Rich UI Design: An Access-Oriented Approach
  39. 39. please God no. Rich UI Design: An Access-Oriented Approach
  40. 40. not that access. Rich UI Design: An Access-Oriented Approach
  41. 41. Access-Oriented Web Design Consider universal access Rich UI Design: An Access-Oriented Approach
  42. 42. Take an inclusive approach! “...To progress, we must change the way we approach this task.” Rich UI Design: An Access-Oriented Approach
  43. 43. how’s do we do it? Rich UI Design: An Access-Oriented Approach
  44. 44. here’s how... Capabilities So you think you can enhance? Rich UI Design: An Access-Oriented Approach
  45. 45. Test Capabilities Basic Experience Enhanced Experience Rich UI Design: An Access-Oriented Approach
  46. 46. AS SEEN ON ALA Rich UI Design: An Access-Oriented Approach
  47. 47. like interpretive dance, enhancements aren’t for everyone Rich UI Design: An Access-Oriented Approach
  48. 48. how do we know who? Rich UI Design: An Access-Oriented Approach
  49. 49. not like this! navigator.userAgent $_SERVER['HTTP_USER_AGENT'] Rich UI Design: An Access-Oriented Approach
  50. 50. more like this! if( youCanRenderThis ){ >> enhance me! } Rich UI Design: An Access-Oriented Approach
  51. 51. tests you say? what do we test? Rich UI Design: An Access-Oriented Approach
  52. 52. any capabilities required for the site to function properly Rich UI Design: An Access-Oriented Approach
  53. 53. JavaScript Support • Basic DOM traversal • Basic Element manipulation • AJAX Support • Canvas perhaps...? Rich UI Design: An Access-Oriented Approach
  54. 54. CSS Rendering • Box Model • Positioning • Floats • Clears • Overflow • And more... Rich UI Design: An Access-Oriented Approach
  55. 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. 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. 57. What if it fails? Basic Experience Rich UI Design: An Access-Oriented Approach
  58. 58. What if it passes? Basic Experience Enhanced Experience Rich UI Design: An Access-Oriented Approach
  59. 59. What if it passes? <html class=”enhanced”> Add Class for CSS scoping Rich UI Design: An Access-Oriented Approach
  60. 60. What if it passes? CSS JS Dynamically load CSS and JS Rich UI Design: An Access-Oriented Approach
  61. 61. What if it passes? Cookie the Results! Rich UI Design: An Access-Oriented Approach
  62. 62. what’s the fallback? View low-bandwidth version Rich UI Design: An Access-Oriented Approach
  63. 63. enhance.js Available at FilamentGroup.com/lab/ Rich UI Design: An Access-Oriented Approach
  64. 64. Let’s get to the demos Rich UI Design: An Access-Oriented Approach
  65. 65. introducing... Our Demo Page Rich UI Design: An Access-Oriented Approach
  66. 66. Rich UI Design: An Access-Oriented Approach
  67. 67. Rich UI Design: An Access-Oriented Approach
  68. 68. the foundation... Simple, Meaningful, ...and a little stylish too Rich UI Design: An Access-Oriented Approach
  69. 69. breaking down a design comp Rich UI Design: An Access-Oriented Approach
  70. 70. Rich UI Design: An Access-Oriented Approach
  71. 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. 72. date picker control HTML: <input type=“text” /> Rich UI Design: An Access-Oriented Approach
  73. 73. custom select menus HTML: <select> Rich UI Design: An Access-Oriented Approach
  74. 74. slider controls HTML: <select> Rich UI Design: An Access-Oriented Approach
  75. 75. custom radio HTML: <input type=“radio” /> Rich UI Design: An Access-Oriented Approach
  76. 76. custom checkbox HTML: <input type=“checkbox” /> Rich UI Design: An Access-Oriented Approach
  77. 77. custom submit button HTML: <input type=“submit” /> Rich UI Design: An Access-Oriented Approach
  78. 78. data charts HTML: <table> Rich UI Design: An Access-Oriented Approach
  79. 79. Rich UI Design: An Access-Oriented Approach
  80. 80. a little <style> is OK (where it’s safe) Rich UI Design: An Access-Oriented Approach
  81. 81. Unsafe Basic CSS floats reversed text background images positioning Rich UI Design: An Access-Oriented Approach
  82. 82. Rich UI Design: An Access-Oriented Approach
  83. 83. Rich UI Design: An Access-Oriented Approach
  84. 84. the upgrade... Enhancing the with UI transformations, keyboard support, ARIA Rich UI Design: An Access-Oriented Approach
  85. 85. first, let’s quickly set up the test Rich UI Design: An Access-Oriented Approach
  86. 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. 87. adding some components Rich UI Design: An Access-Oriented Approach
  88. 88. Rich UI Design: An Access-Oriented Approach
  89. 89. first, we add first, add to the enhanced.js file Rich UI Design: An Access-Oriented Approach
  90. 90. datepicker plugin JS: $(‘input’).datepicker(); Rich UI Design: An Access-Oriented Approach
  91. 91. jQuery dom ready $(document).ready(function(){ //our scripting goes here! }); Rich UI Design: An Access-Oriented Approach
  92. 92. selectmenu plugin JS: $(‘select’).selectmenu(); Rich UI Design: An Access-Oriented Approach
  93. 93. select-to-slider plugin JS: $(‘select’).selectToUISlider(); Rich UI Design: An Access-Oriented Approach
  94. 94. custom radio plugin JS: $(‘input’).customInput(); Rich UI Design: An Access-Oriented Approach
  95. 95. custom checkbox plugin JS: $(‘input’).customInput(); Rich UI Design: An Access-Oriented Approach
  96. 96. input-to-button plugin JS: $(‘input’).inputToButton(); Rich UI Design: An Access-Oriented Approach
  97. 97. visualize plugin JS: $(‘table’).visualize(); Rich UI Design: An Access-Oriented Approach
  98. 98. Rich UI Design: An Access-Oriented Approach
  99. 99. Rich UI Design: An Access-Oriented Approach
  100. 100. some tips for Rolling your Own Rich UI Design: An Access-Oriented Approach
  101. 101. replicate before you extend! Rich UI Design: An Access-Oriented Approach
  102. 102. scrape and repurpose Rich UI Design: An Access-Oriented Approach
  103. 103. proxy back to the native control Rich UI Design: An Access-Oriented Approach
  104. 104. follow native conventions and user expections Rich UI Design: An Access-Oriented Approach
  105. 105. consider the mouse optional Rich UI Design: An Access-Oriented Approach
  106. 106. keyboard basics Rich UI Design: An Access-Oriented Approach
  107. 107. tab between components Rich UI Design: An Access-Oriented Approach
  108. 108. arrow, space, enter, other within components Rich UI Design: An Access-Oriented Approach
  109. 109. tabindex 0 vs. -1 vs. N Rich UI Design: An Access-Oriented Approach
  110. 110. Keyboard Access Guidelines “DHTML STYLE GUIDE” http://dev.aol.com/dhtml_style_guide Rich UI Design: An Access-Oriented Approach
  111. 111. keyboard support alone won’t be enough. Window Eyes Rich UI Design: An Access-Oriented Approach
  112. 112. integrating WAI-ARIA support Rich UI Design: An Access-Oriented Approach
  113. 113. many controls are beyond HTML’s vocab Rich UI Design: An Access-Oriented Approach
  114. 114. landmarks banner, main, navigation roles tree, slider, tabs states aria-expanded, aria-checked Rich UI Design: An Access-Oriented Approach
  115. 115. Adding ARIA to the jQuery UI Slider Rich UI Design: An Access-Oriented Approach
  116. 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. 117. “number link” - Jaws Rich UI Design: An Access-Oriented Approach
  118. 118. “Number link” <div class="ui-slider"> <a href="#" class="ui-slider- Rich UI Design: An Access-Oriented Approach
  119. 119. Adding ARIA Rich UI Design: An Access-Oriented Approach
  120. 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. 121. “slider control: 38 percent. Use arrows to move handle” - Jaws Rich UI Design: An Access-Oriented Approach
  122. 122. the result... Putting it All Together Let’s see this thing in action! Rich UI Design: An Access-Oriented Approach
  123. 123. Rich UI Design: An Access-Oriented Approach
  124. 124. Rich UI Design: An Access-Oriented Approach
  125. 125. the end... Thanks for links and such, visit filamentgroup.com/lab Rich UI Design: An Access-Oriented Approach

×