From the TrenchesPractical Approaches to Building the Accessible Web

jon reidsenior developerEffectiveUI

Practical AccessibilityFocus on implementation

traditional project dynamicsimplementation team and stakeholders/clients

Much of the web is built on spec

too abstracttoo costly

Accessibility falls by the wayside

“Accessibility is too restrictive”“I'll have to design to the least common denominator”“It will be ugly”“It won't be interesting”

design woes

“This technology doesn't support accessibility”“Accessibility will restrict our implementation”“Testing will be hard”“Maintenance will be expensive”

development woes

“This will be too expensive, we have a limited budget”“We're not the government, we don't need to be accessible”

stakeholder woes

Bull.You can create awesome designs with rich interactions using advanced technologies and be accessible too.

I'll need to take them and composite them.Screenshots of Blue Angels site.

Sponsored by Microsoft to showcase SilverlightGift to the US Navy Blue Angels Demonstration TeamVideo, 3D renderingHTML 5, CSS 3, JavaScriptCompletely 508 compliant

Project Pensacola

Combating the Woes: Keep it Realfocused requirementsachievable goalsmeasurable results

everyone knows what they need to do and how accessibility will be verifiedKeeping it real prevents abstraction

defines the risks and returns upfrontprovides transparencysupports decision making

Keeping it real helps sell the stakeholder

designtechnical/technologicalmanagement

How do you keep it real? Focus on requirements.

Progressive EnhancementIt's not just for programmers.

create a baseline implementation and then enhance based on capabilitiesmostly mentioned in the context of development

Progressive Enhancement

breaks the “must look the same in all browsers” moldexperience is tailored to capability

Progressive Enhancement

designers and developers work closely togethercreate basic content and functionalityuse technology to layer improved design and interaction

Progressive Enhancement and Accessibility

custom form fields (get screenshots from FedEx application)Progressive Enhancement Example

CSS 3 layouts (get screenshots from Ryan)Progressive Enhancement Example

Project Pensacola image gallerybasic list of images with captionsformatted using CSS and JavaScript to produce rich interaction(get screenshots)

Progressive Enhancement Example

Questions