From the Trenches: Building the Accessible Web

From the TrenchesA PRACTICAL APPROACH TO BUILDING THE ACCESSIBLE WEBJon Reid | Senior Developer

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

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

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

From The Trenches | A practical approach to building the accessible web How does accessibility fall by the wayside? STAKEHOLDER ROADBLOCKS 1 "Its too expensive" 2 "We dont need to be accessible" 3 "Thats not our audience"

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"

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"

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

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

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

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

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

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

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

Internet Explorer 8 | Detail Chrome | Detail

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

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

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

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

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

Blue Angels | Vision Demo

Blue Angels | Home Page Example

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

Blue Angels | Team Example

Accessibility Structure | Team Example Blue Angels | Team Example

Blue Angels | Media Example

Accessibility Structure | Media Example Blue Angels | Media Example

Blue Angels | Aircraft Example

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

Blue Angels | Informational Example

Accessibility Structure | Informational Example Blue Angels | Informational Example

Thank You and Questions

From the Trenches: Building the Accessible Web

by EffectiveUI

Accessibility

Categories

Upload Details

Usage Rights

Statistics

From the Trenches: Building the Accessible Web Presentation Transcript