Progressive Enhancement: Where Do I Begin?
A presentation at MITRE Accessibility Technical Exchange Meeting by Aaron Gustafson
Where do I begin?
‘‘
‘‘
‘‘
one arm permanent arm injury new parent situational
f o % 7 n . o i 4 t a 4 l u p o p . S . U t he
versus Graceful Degradation Progressive Enhancement
‘‘
‘‘
How does this photo make you feel? ◎ Embarrassing ◎ Upsetting ◎ Saddening ◎ Bad Photo ◎ Other
How does this photo make you feel? ◎ Embarrassing ◎ Upsetting ◎ Saddening ◎ Bad Photo • ◎ Other it’s embarrassing
Please describe the photo ◎ It’s embarrassing ◎ It’s a bad photo of me ◎ It makes me sad
Sign In
Sign In
Sign In
Sign In
Sign In
Sign In
Sign In
Sign In
Sign In
S S C &
‘‘
Save-Data: on
save_data = navigator.connection.saveData;
if ( save_data ) { return respondWithFallbackImage( url ); }
Confirm Cancel Confirm Cancel
✓ Confirm × Cancel ✓ Confirm × Cancel
Start n o i s i c e D nt poi Experience 1 Chan ge Experience 2
DOMReady JS? No image
DOMReady JS? No image Image
data-image-src=”/i/sample.jpg”
data-image-src=”/i/sample.jpg” data-has-image=”true” <img alt=”” src=”/i/sample.jpg”>
DOMReady JS? No image Image
DOMReady JS? No image LIVE Image
DOMReady JS? No image LIVE Image
DOMReady JS? No image LIVE Image
data-image-src=”/i/sample.jpg”
data-image-src=”/i/sample.jpg” data-has-image=”true” /i/sample /i/sample
“Progressive enhancement” is a philosophical approach to web design and development that centers users, with the goal of enabling everyone to access the content and complete core tasks, regardless of circumstances influencing how they access the web. In this session, I set the stage for why progressive enhancement is the gold standard for developing web projects before diving into a host of practical examples of how you can apply this practice to a range of interfaces. Along the way, I also show you how your entire team can (and should) get involved in the ideation, development, testing, and evolution of your interfaces and components.
