Jon Reid, Senior Developer at EffectiveUI, presented "From the Trenches: A Practical Approach to Building the Accessible Web" at Accessing Higher Ground 2010, an accessible media, web and technology conference hosted by the University of Colorado at Boulder.

2. From the Trenches
A PRACTICAL APPROACH TO BUILDING THE ACCESSIBLE WEB
Jon Reid | Senior Developer

3. From The Trenches | A practical approach to building the accessible web
A little about me:
Senior Developer at EffectiveUI
HTML, CSS, and Java Script Lead
• Agencies: EffectiveUI, Crispin Porter + Bogusky, Texturemedia
• Business: Core Business Solutions, Western Union
• Science: Genomica, Joint Institute of Laboratory Astrophysics

4. From The Trenches | A practical approach to building the accessible web
Web Project Dynamics
Traditional Dynamic
1 Stakeholders
3 Developers
2 Designers

5. From The Trenches | A practical approach to building the accessible web
How does accessibility fall by the wayside?
• Discussions become too abstract
• People start throwing up roadblocks

6. From The Trenches | A practical approach to building the accessible web
How does accessibility fall by the wayside?
STAKEHOLDER ROADBLOCKS
1 "It's too expensive"
2 "We don't need to be accessible"
3 "That's not our audience"

7. From The Trenches | A practical approach to building the accessible web
How does accessibility fall by the wayside?
DESIGNER ROADBLOCKS
1 "It’s too limiting"
2 "What about the least common denominator"
3 "It will be ugly"
4 "It will be boring"

8. From The Trenches | A practical approach to building the accessible web
How does accessibility fall by the wayside?
DEVELOPER ROADBLOCKS
1 "No technology support"
2 "Restricts our implementation"
3 "It’s too hard and takes too long"

9. From The Trenches | A practical approach to building the accessible web
Bull.
You CAN do it all.

10. From The Trenches | A practical approach to building the accessible web
Keep It Real
• Focus on requirements
• Create achievable goals
• Perfection is unnecessary

11. From The Trenches | A practical approach to building the accessible web
Keeping it real helps the stakeholder
ADVANTAGES
1 Defines the risks and returns
2 Informs decisions
3 Provides transparency

12. From The Trenches | A practical approach to building the accessible web
Keeping it real helps the designer
ADVANTAGES
1 Defines creative scope
2 Focuses the design process

13. From The Trenches | A practical approach to building the accessible web
Keeping it real helps the developer
ADVANTAGES
1 Guides technological decisions
2 Defines constraints
3 Creates tangible goals

14. From The Trenches | A practical approach to building the accessible web
Progressive Enhancement
A useful framework for implementing accessibility

15. From The Trenches | A practical approach to building the accessible web
Progressive Enhancement CSS3 example
Internet Explorer 8 | Microsoft Firefox | Mozilla Chrome | Google

16. Internet Explorer 8 | Detail Chrome | Detail

17. From The Trenches | A practical approach to building the accessible web
Progressive enhancement throughout a project
• Define requirements
• Create audit trail
• Focus on specifics

18. From The Trenches | A practical approach to building the accessible web
Progressive Enhancement during the definition phase
HERE’S HOW IT WOULD GO
1 Define accessibility requirements
2 Create audit trail
• Explains decisions
• Demonstrates efforts
3 Focus on technological requirements early in project

19. From The Trenches | A practical approach to building the accessible web
Progressive Enhancement during design
HERE’S HOW IT WOULD GO
1 Maintain audit trail for relevant requirements
2 Simple progressive enhancement notes
3 Don’t wireframe every progressive state

20. From The Trenches | A practical approach to building the accessible web
Progressive Enhancement during development
HERE’S HOW IT WOULD GO
1 Continue to maintain audit trail
2 Implement accessibility requirements
3 Use audit trail as base for Quality Assurance testing

21. From The Trenches | A practical approach to building the accessible web
Real Life Example
Project Pensacola: a new website for the Blue Angels

22. Blue Angels | Vision Demo

23. Blue Angels | Home Page Example

24. Accessibility Structure | Home Page Example Blue Angels | Home Page Example

25. Blue Angels | Team Example

26. Accessibility Structure | Team Example Blue Angels | Team Example

27. Blue Angels | Media Example

28. Accessibility Structure | Media Example Blue Angels | Media Example

29. Blue Angels | Aircraft Example

30. Accessibility Structure | Home Page Example Blue Angels | Home Page Example

31. Blue Angels | Informational Example

32. Accessibility Structure | Informational Example Blue Angels | Informational Example

33. Thank You and Questions