Checklist

Syndrome
Accessibility:
compliance
Lost in Translation
Quality Assurance

impersonal

An Event Apart, Chicago

August 27-28, 2007 Derek
Featherstone

patterns/techniques from real sites

Accessibility as interplay between XHTML/CSS/JS
Checklist overarching strategy
vs
User Experience

custom widgets custom widgets

• provide us with more intuitive

controls than what HTML allows

• requires code/design to emulate

native controls

• if we “fake it” so well that people

can’t tell the difference, is that good
or bad?

• what problems arise if we don’t

“fake it” well?
 inline editing
inline editing
live updates
• requires fewer page refreshes
• how do we indicate that the page is
being updated?
• how do we alert the user that
there is new content, if they can’t
see it?
• linearization is often an issue
• screen reader buffers are
problematic, but can be updated
inline editing
• requires fewer page refreshes
• changing on the fly means we
maintain context and
comprehensibility
• mechanism for activation can be
problematic: requires hovering
• what is the alternative?
live updates
error/advisory information
• each field has a label
• some fields have additional
information - we need to associate
that with the field or it can/will be
missed
• errors/advisory info needs to be
near the control to which it relates
 error/advisory information error/advisory information

<div>
! <label for="uname">
! ! Username
! ! <em>must not contain spaces</em>
! </label>

! <input id="uname" ... />

</div>

form linearization form linearization

• often we translate visual layout and

effects into our code
<div>
• reconsider code to take into ! <label for="searchtxt">
account intent and design ! ! Search Terms:
! </label>
! <input id="searchtxt".../>
! <input type="submit" value="Search" />
</div>

<div class="group">
! <div>...</div>!! ! ! ! ! !
</div>

form linearization

1 3
<div>
! <label for="searchtxt">
! ! Search Terms:
2 ! </label>
! <input id="searchtxt".../>

! ! <div class="group">
! ! ! <div>...</div>!! ! ! ! ! !
! ! </div>

! <input id=”submitbtn” value="Search" />

</div>
 search results
1
2
• results are often below the fold

• repetition of the form can confuse

people that have a limited view of 3
the page

• many different page elements

requires a mechanism to move
around the page

1
4
<form
method='post' 2
action='search-results-final.html#results'
...
>

translating visual language

• designers are smart

• they create rhythm, flow, balance,

contrast

• design communicates

• we need to translate the visual

language that the designer created
to something meaningful in code
What do colour and
position tell us?