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

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

hello.

Rich UI Design: An Access-Oriented Approach

A Boston-based design ﬁrm specializing in
complex web application design &
development.

Official Sponsor and Design Team


The 90% Solution

How it’s done now
A recap of current best practices for web dev


Clean, semantic HTML


Unobtrusive JS & CSS


Avoid CSS hacks
conditional comments (if necessary)


Flexible Units


test in all the
popular browsers


Accessible Hiding


test on a
screenreader


NVDA:
<h1>You sound like a drunk person in a
karaoke bar!</h1>


the promise of PE:


the promise of PE:
Works OK for everyone!


right?


that’s the
theory
anyway.


many browsers
partially understand...


more like...
progressive
mischancement!
...disenchantment?

...is this thing on?


HTML works
everywhere*

* Pretty much


Images, CSS, JS are
extras
will break (badly) somewhere


for example


Northface.com


Northface.com

IE 5


Cappuccino Framework Demo


Cappuccino Framework Demo

Without JavaScript


eek. (ﬁxed in dev)


All or Nothing
frankly, sucks.


what’s a
web designer
to do?


one way
to approach the problem...


nice
if you have the resources support it...


a more
practical
approach:


One page,
many experiences


Slick here:

Still works here:


everyone
gets a usable, functional experience:


some
get an even better one!


integrating an

Access-Oriented


please God no.


not that access.


Access-Oriented Web
Design

Consider universal access


Take an inclusive approach!

“...To progress, we must change
the way we approach this task.”


how’s do we do it?


here’s how...

Capabilities
So you think you can enhance?


Test Capabilities

Basic Experience Enhanced Experience


AS SEEN ON
ALA


like interpretive dance, enhancements
aren’t for everyone


how do we know
who?


not like this!

navigator.userAgent

$_SERVER['HTTP_USER_AGENT']


more like this!

if( youCanRenderThis ){
>> enhance me!
}


tests you say?
what do we test?


any capabilities required
for the site to function properly


JavaScript Support

• Basic DOM traversal
• Basic Element manipulation
• AJAX Support
• Canvas perhaps...?


CSS Rendering
• Box Model
• Positioning
• Floats
• Clears
• Overﬂow
• And more...


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


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! }


What if it fails?

Basic Experience


What if it passes?

Basic Experience Enhanced Experience


What if it passes?

<html class=”enhanced”>

Add Class for CSS scoping


What if it passes?

CSS JS

Dynamically load CSS and JS


What if it passes?

Cookie the Results!


what’s the fallback?

View low-bandwidth version


enhance.js

Available at FilamentGroup.com/lab/


Let’s get to the demos


introducing...

Our Demo Page


the foundation...

Simple, Meaningful,
...and a little stylish too


breaking down
a design comp


<option> <table>
<li>
<h2>
<dl> <legend>
<ol> This is your

<p>
database <ul>

<h1> <label>
<select>
<h3>
<textarea> <input>


date picker
control

HTML: <input type=“text” />


custom select
menus

HTML: <select>


slider controls

HTML: <select>


custom radio

HTML: <input type=“radio” />


custom checkbox

HTML: <input type=“checkbox” />


custom submit button

HTML: <input type=“submit” />


data charts

HTML: <table>


a little
<style> is OK
(where it’s safe)


Unsafe Basic CSS
ﬂoats
reversed text
background images
positioning


the upgrade...

Enhancing the
with UI transformations, keyboard support, ARIA


ﬁrst, let’s quickly set up
the test


adding some components


first, we add

first, add to the enhanced.js file


datepicker plugin

JS: $(‘input’).datepicker();


jQuery dom ready

$(document).ready(function(){

//our scripting goes here!

});


selectmenu
plugin

JS: $(‘select’).selectmenu();


select-to-slider
plugin

JS: $(‘select’).selectToUISlider();


custom radio plugin

JS: $(‘input’).customInput();


custom checkbox plugin

JS: $(‘input’).customInput();


input-to-button plugin

JS: $(‘input’).inputToButton();


visualize plugin

JS: $(‘table’).visualize();


some tips for

Rolling your Own


replicate
before you
extend!


scrape
and
repurpose


proxy back
to the
native control


follow

native
conventions
and
user expections


consider the mouse
optional


keyboard basics


tab
between components


arrow, space, enter, other
within components


tabindex
0 vs. -1 vs. N


Keyboard Access Guidelines

“DHTML STYLE GUIDE”

http://dev.aol.com/dhtml_style_guide


keyboard support alone
won’t be enough.

Window Eyes


integrating
WAI-ARIA support


many
controls
are beyond
HTML’s vocab


landmarks
banner, main, navigation

roles
tree, slider, tabs

states
aria-expanded, aria-checked


Adding ARIA
to the jQuery UI Slider


Existing Markup

<div class="ui-slider">

<a href="#" class="ui-slider-handle" style="left: 38%;"></a>

</div>


“number link” - Jaws


“Number link”

<div class="ui-slider">

<a href="#" class="ui-slider-


Adding ARIA


Modiﬁed 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>


“slider control: 38
percent. Use arrows to
move handle” - Jaws


the result...

Putting it All Together
Let’s see this thing in action!


the end...

Thanks
for links and such, visit ﬁlamentgroup.com/lab


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

More Related Content

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

Recently uploaded

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