View
217
Download
1
Tags:
Embed Size (px)
Citation preview
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