Transcript A Practical Approach to Building the Accessible Web ()

From the Trenches
Practical Approaches to Building the Accessible Web
jon reid
senior developer
EffectiveUI
Practical Accessibility
Focus on implementation
Much of the web is built on spec
traditional project dynamics
implementation team and stakeholders/clients
Accessibility falls by the wayside
too abstract
too costly
design woes
“Accessibility is too restrictive”
“I'll have to design to the least common denominator”
“It will be ugly”
“It won't be interesting”
development woes
“This technology doesn't support accessibility”
“Accessibility will restrict our implementation”
“Testing will be hard”
“Maintenance will be expensive”
stakeholder woes
“This will be too expensive, we have a limited budget”
“We're not the government, we don't need to be accessible”
Bull.
You can create awesome designs with rich interactions using advanced
technologies and be accessible too.
Screenshots of Blue Angels site.
I'll need to take them and composite them.
Project Pensacola
Sponsored by Microsoft to showcase Silverlight
Gift to the US Navy Blue Angels Demonstration Team
Video, 3D rendering
HTML 5, CSS 3, JavaScript
Completely 508 compliant
Combating the Woes: Keep it Real
focused requirements
achievable goals
measurable results
Keeping it real prevents abstraction
everyone knows what they need to do and how accessibility will be verified
Keeping it real helps sell the stakeholder
defines the risks and returns upfront
provides transparency
supports decision making
How do you keep it real? Focus on requirements.
design
technical/technological
management
Progressive Enhancement
It's not just for programmers.
Progressive Enhancement
create a baseline implementation and then enhance based on capabilities
mostly mentioned in the context of development
Progressive Enhancement
breaks the “must look the same in all browsers” mold
experience is tailored to capability
Progressive Enhancement and Accessibility
designers and developers work closely together
create basic content and functionality
use technology to layer improved design and interaction
Progressive Enhancement Example
custom form fields (get screenshots from FedEx application)
Progressive Enhancement Example
CSS 3 layouts (get screenshots from Ryan)
Progressive Enhancement Example
Project Pensacola image gallery
basic list of images with captions
formatted using CSS and JavaScript to produce rich interaction
(get screenshots)
Questions