Accessibility: Lost In Translation

Accessibility: Lost in Translation

Checklist Syndrome compliance Quality Assurance impersonal

An Event Apart, Chicago August 27-28, 2007

Derek Featherstone

Accessibility as Checklist vs User Experience

custom widgets

patterns/techniques from real sites interplay between XHTML/CSS/JS overarching strategy

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 being updated?

• some fields have additional information - we need to associate that with the field or it can/will be missed

• 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

• errors/advisory info needs to be near the control to which it relates

error/advisory information

error/advisory information



form linearization

form linearization

• often we translate visual layout and effects into our code



• reconsider code to take into account intent and design



form linearization 1 2

3



search results

1

2

• results are often below the fold • repetition of the form can confuse people that have a limited view of the page

3

• many different page elements requires a mechanism to move around the page

1

2

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

4

What do colour and position tell us?