You are on page 1of 5

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

• 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?

inline editing live updates

live updates error/advisory information

• requires fewer page refreshes • each field has a label

• how do we indicate that the page is • some fields have additional
being updated? information - we need to associate
that with the field or it can/will be
• how do we alert the user that missed
there is new content, if they can’t
see it? • errors/advisory info needs to be
near the control to which it relates
• linearization is often an issue

• screen reader buffers are
problematic, but can be updated
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'
...
>

3

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?