• Save
Rich UI Design: An Access Oriented Approach Sc For Ss.Key
Upcoming SlideShare
Loading in...5
×
 

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

on

  • 3,666 views

 

Statistics

Views

Total Views
3,666
Views on SlideShare
3,643
Embed Views
23

Actions

Likes
15
Downloads
0
Comments
0

3 Embeds 23

http://192.168.10.3 11
http://www.slideshare.net 11
http://www.techgig.com 1

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

    • Rich UI Design: An Access-Oriented Scott Jehl, Designer / Developer
    • hello. Rich UI Design: An Access-Oriented Approach
    • A Boston-based design firm specializing in complex web application design & development. Official Sponsor and Design Team Rich UI Design: An Access-Oriented Approach
    • The 90% Solution How it’s done now A recap of current best practices for web dev Rich UI Design: An Access-Oriented Approach
    • Clean, semantic HTML Rich UI Design: An Access-Oriented Approach
    • Unobtrusive JS & CSS Rich UI Design: An Access-Oriented Approach
    • Avoid CSS hacks conditional comments (if necessary) Rich UI Design: An Access-Oriented Approach
    • Flexible Units Rich UI Design: An Access-Oriented Approach
    • test in all the popular browsers Rich UI Design: An Access-Oriented Approach
    • Accessible Hiding Rich UI Design: An Access-Oriented Approach
    • test on a screenreader Rich UI Design: An Access-Oriented Approach
    • NVDA: <h1>You sound like a drunk person in a karaoke bar!</h1> Rich UI Design: An Access-Oriented Approach
    • NVDA: <h1>You sound like a drunk person in a karaoke bar!</h1> Rich UI Design: An Access-Oriented Approach
    • the promise of PE: Rich UI Design: An Access-Oriented Approach
    • the promise of PE: Works OK for everyone! Rich UI Design: An Access-Oriented Approach
    • right? Rich UI Design: An Access-Oriented Approach
    • that’s the theory anyway. Rich UI Design: An Access-Oriented Approach
    • many browsers partially understand... Rich UI Design: An Access-Oriented Approach
    • more like... progressive mischancement! ...disenchantment? ...is this thing on? Rich UI Design: An Access-Oriented Approach
    • HTML works everywhere* * Pretty much Rich UI Design: An Access-Oriented Approach
    • Images, CSS, JS are extras will break (badly) somewhere Rich UI Design: An Access-Oriented Approach
    • for example Rich UI Design: An Access-Oriented Approach
    • Northface.com Rich UI Design: An Access-Oriented Approach
    • Northface.com IE 5 Rich UI Design: An Access-Oriented Approach
    • Cappuccino Framework Demo Rich UI Design: An Access-Oriented Approach
    • Cappuccino Framework Demo Without JavaScript Rich UI Design: An Access-Oriented Approach
    • eek. (fixed in dev) Rich UI Design: An Access-Oriented Approach
    • All or Nothing frankly, sucks. Rich UI Design: An Access-Oriented Approach
    • what’s a web designer to do? Rich UI Design: An Access-Oriented Approach
    • one way to approach the problem... Rich UI Design: An Access-Oriented Approach
    • Rich UI Design: An Access-Oriented Approach
    • nice if you have the resources support it... Rich UI Design: An Access-Oriented Approach
    • a more practical approach: Rich UI Design: An Access-Oriented Approach
    • One page, many experiences Rich UI Design: An Access-Oriented Approach
    • Slick here: Still works here: Rich UI Design: An Access-Oriented Approach
    • everyone gets a usable, functional experience: Rich UI Design: An Access-Oriented Approach
    • some get an even better one! Rich UI Design: An Access-Oriented Approach
    • integrating an Access-Oriented Rich UI Design: An Access-Oriented Approach
    • please God no. Rich UI Design: An Access-Oriented Approach
    • not that access. Rich UI Design: An Access-Oriented Approach
    • Access-Oriented Web Design Consider universal access Rich UI Design: An Access-Oriented Approach
    • Take an inclusive approach! “...To progress, we must change the way we approach this task.” Rich UI Design: An Access-Oriented Approach
    • how’s do we do it? Rich UI Design: An Access-Oriented Approach
    • here’s how... Capabilities So you think you can enhance? Rich UI Design: An Access-Oriented Approach
    • Test Capabilities Basic Experience Enhanced Experience Rich UI Design: An Access-Oriented Approach
    • AS SEEN ON ALA Rich UI Design: An Access-Oriented Approach
    • like interpretive dance, enhancements aren’t for everyone Rich UI Design: An Access-Oriented Approach
    • how do we know who? Rich UI Design: An Access-Oriented Approach
    • not like this! navigator.userAgent $_SERVER['HTTP_USER_AGENT'] Rich UI Design: An Access-Oriented Approach
    • more like this! if( youCanRenderThis ){ >> enhance me! } Rich UI Design: An Access-Oriented Approach
    • tests you say? what do we test? Rich UI Design: An Access-Oriented Approach
    • any capabilities required for the site to function properly Rich UI Design: An Access-Oriented Approach
    • JavaScript Support • Basic DOM traversal • Basic Element manipulation • AJAX Support • Canvas perhaps...? Rich UI Design: An Access-Oriented Approach
    • CSS Rendering • Box Model • Positioning • Floats • Clears • Overflow • And more... Rich UI Design: An Access-Oriented Approach
    • 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
    • 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
    • What if it fails? Basic Experience Rich UI Design: An Access-Oriented Approach
    • What if it passes? Basic Experience Enhanced Experience Rich UI Design: An Access-Oriented Approach
    • What if it passes? <html class=”enhanced”> Add Class for CSS scoping Rich UI Design: An Access-Oriented Approach
    • What if it passes? CSS JS Dynamically load CSS and JS Rich UI Design: An Access-Oriented Approach
    • What if it passes? Cookie the Results! Rich UI Design: An Access-Oriented Approach
    • what’s the fallback? View low-bandwidth version Rich UI Design: An Access-Oriented Approach
    • enhance.js Available at FilamentGroup.com/lab/ Rich UI Design: An Access-Oriented Approach
    • Let’s get to the demos Rich UI Design: An Access-Oriented Approach
    • introducing... Our Demo Page Rich UI Design: An Access-Oriented Approach
    • Rich UI Design: An Access-Oriented Approach
    • Rich UI Design: An Access-Oriented Approach
    • the foundation... Simple, Meaningful, ...and a little stylish too Rich UI Design: An Access-Oriented Approach
    • breaking down a design comp Rich UI Design: An Access-Oriented Approach
    • Rich UI Design: An Access-Oriented Approach
    • <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
    • date picker control HTML: <input type=“text” /> Rich UI Design: An Access-Oriented Approach
    • custom select menus HTML: <select> Rich UI Design: An Access-Oriented Approach
    • slider controls HTML: <select> Rich UI Design: An Access-Oriented Approach
    • custom radio HTML: <input type=“radio” /> Rich UI Design: An Access-Oriented Approach
    • custom checkbox HTML: <input type=“checkbox” /> Rich UI Design: An Access-Oriented Approach
    • custom submit button HTML: <input type=“submit” /> Rich UI Design: An Access-Oriented Approach
    • data charts HTML: <table> Rich UI Design: An Access-Oriented Approach
    • Rich UI Design: An Access-Oriented Approach
    • a little <style> is OK (where it’s safe) Rich UI Design: An Access-Oriented Approach
    • Unsafe Basic CSS floats reversed text background images positioning Rich UI Design: An Access-Oriented Approach
    • Rich UI Design: An Access-Oriented Approach
    • Rich UI Design: An Access-Oriented Approach
    • the upgrade... Enhancing the with UI transformations, keyboard support, ARIA Rich UI Design: An Access-Oriented Approach
    • first, let’s quickly set up the test Rich UI Design: An Access-Oriented Approach
    • <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
    • adding some components Rich UI Design: An Access-Oriented Approach
    • Rich UI Design: An Access-Oriented Approach
    • first, we add first, add to the enhanced.js file Rich UI Design: An Access-Oriented Approach
    • datepicker plugin JS: $(‘input’).datepicker(); Rich UI Design: An Access-Oriented Approach
    • jQuery dom ready $(document).ready(function(){ //our scripting goes here! }); Rich UI Design: An Access-Oriented Approach
    • selectmenu plugin JS: $(‘select’).selectmenu(); Rich UI Design: An Access-Oriented Approach
    • select-to-slider plugin JS: $(‘select’).selectToUISlider(); Rich UI Design: An Access-Oriented Approach
    • custom radio plugin JS: $(‘input’).customInput(); Rich UI Design: An Access-Oriented Approach
    • custom checkbox plugin JS: $(‘input’).customInput(); Rich UI Design: An Access-Oriented Approach
    • input-to-button plugin JS: $(‘input’).inputToButton(); Rich UI Design: An Access-Oriented Approach
    • visualize plugin JS: $(‘table’).visualize(); Rich UI Design: An Access-Oriented Approach
    • Rich UI Design: An Access-Oriented Approach
    • Rich UI Design: An Access-Oriented Approach
    • some tips for Rolling your Own Rich UI Design: An Access-Oriented Approach
    • replicate before you extend! Rich UI Design: An Access-Oriented Approach
    • scrape and repurpose Rich UI Design: An Access-Oriented Approach
    • proxy back to the native control Rich UI Design: An Access-Oriented Approach
    • follow native conventions and user expections Rich UI Design: An Access-Oriented Approach
    • consider the mouse optional Rich UI Design: An Access-Oriented Approach
    • keyboard basics Rich UI Design: An Access-Oriented Approach
    • tab between components Rich UI Design: An Access-Oriented Approach
    • arrow, space, enter, other within components Rich UI Design: An Access-Oriented Approach
    • tabindex 0 vs. -1 vs. N Rich UI Design: An Access-Oriented Approach
    • Keyboard Access Guidelines “DHTML STYLE GUIDE” http://dev.aol.com/dhtml_style_guide Rich UI Design: An Access-Oriented Approach
    • keyboard support alone won’t be enough. Window Eyes Rich UI Design: An Access-Oriented Approach
    • integrating WAI-ARIA support Rich UI Design: An Access-Oriented Approach
    • many controls are beyond HTML’s vocab Rich UI Design: An Access-Oriented Approach
    • landmarks banner, main, navigation roles tree, slider, tabs states aria-expanded, aria-checked Rich UI Design: An Access-Oriented Approach
    • Adding ARIA to the jQuery UI Slider Rich UI Design: An Access-Oriented Approach
    • Existing Markup <div class="ui-slider"> <a href="#" class="ui-slider-handle" style="left: 38%;"></a> </div> Rich UI Design: An Access-Oriented Approach
    • “number link” - Jaws Rich UI Design: An Access-Oriented Approach
    • “Number link” <div class="ui-slider"> <a href="#" class="ui-slider- Rich UI Design: An Access-Oriented Approach
    • Adding ARIA Rich UI Design: An Access-Oriented Approach
    • 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
    • “slider control: 38 percent. Use arrows to move handle” - Jaws Rich UI Design: An Access-Oriented Approach
    • the result... Putting it All Together Let’s see this thing in action! Rich UI Design: An Access-Oriented Approach
    • Rich UI Design: An Access-Oriented Approach
    • Rich UI Design: An Access-Oriented Approach
    • the end... Thanks for links and such, visit filamentgroup.com/lab Rich UI Design: An Access-Oriented Approach