Choosing a Method

Both graceful degradation and progressive enhancement obviously assist in making a website accessible, yet providing additional usability for those who can take advantage of it. So which one should we choose?

Progressive enhancement is usually preferable to graceful degradation, for the same reason that structural design usually leads to better accessibility than visual design: it starts with the simple basics and adds embellishments on top of that. When designing something from scratch, we should definitely think in terms of progressive enhancement.

If we are maintaining an existing site, trying to improve accessibility and standards conformance, the situation is different. Unless we want to rewrite everything, our only choice is to provide graceful degradation as best we can.

Of course it is also possible to mix both methods on one site, or even on the same page. Progressive enhancement is what we should strive for, though, if we have a choice.

Testing

Testing the accessibility is much easier with progressive enhancement than with graceful degradation.

If we work from the point of view of progressive enhancement, we can simply create the basic version and verify that it works. Then we add the enhancements and verify that they work. Okay, this is somewhat simplified: when testing the enhancements we may need to verify that they don’t break the basic version.

If we use graceful degradation (or when we verify that added progressive enhancements don’t cause problems in less capable user agents) we need a different approach. Now the advanced features are already present and can be readily tested. To verify that they really do degrade gracefully, we must disable the support for those features. Sometimes that will require testing in a different browser, but some things — like text equivalents or JavaScript/plug-in support — can be checked using the accessibility features of Opera or with the Web Developer Toolbar in Firefox.

Besides…

Accessibility evangelists like myself are sometimes accused of being reactionary zealots, new Luddites who abhor anything that makes the Web more enjoyable and entertaining. Some of those who disagree with us claim that we do not allow JavaScript or Flash to be used on a website.

I hope this article will prove them wrong once and for all. Anything that improves usability or aesthetics is a good thing. What I (and many others) wish to point out is the danger of relying on non-standard, proprietary or platform-dependent technology. All that should be required for accessing information on the Web is a user agent that supports HTTP and HTML. Such a user agent should be able to access the vital information on any professional site.

If the user agent supports CSS, JavaScript, Flash, MathML, SVG, embedded video and so on, that is great! Those users will benefit by seeing a better-looking site which is also easier to use. There may even be non-critical content that won’t be accessible to that bare-bones browser, but which the more advanced users can enjoy.

Graceful degradation, to some extent, but especially progressive enhancement make this dichotomy possible. It is possible to eat your cake and have it, too. It requires a bit more work, sometimes, but it is often worth it.

Thanks, guys! The examples aren’t very realistic, but I wanted to keep them short and with as little distractions as possible. They exist in order to demonstrate principles, rather than as full-blown JavaScript tutorials.

I’d love to read the article, but I have a problem to do so. I like to print interessting articles and read them on the way home from work (train) to fil out the dead time. Problem is, the paging on this and some other sites I came across lately makes it hard to print articles. I’ve looked hard to find the “print the entire article” button… no success. Shouldn’t the article be available for people who cannot or don’t want to read it on screen (especially on this site)? Am I missing something here?

Never mind, I see the problem: the comments are printed with each page. As a service to you and our other readers, this should help. Get Graceful Degradation & Progressive Enhancement as text. Please let me know if that works for you, as in prints the characters properly and wraps the lines as it should.

Update: I also added a block to the comments in the print style sheet so maybe that’ll give you two options.

The text version worked like a charm. Thank you! I could have printed the 4 pages seperately. Next to beeing tedious the comments would have been in the way. So thanks for removing them for print. For me and anybody else who likes to print long article it’s easiest to if i’m able to print the whole article at once. — END off topic comment –

@Tommy: Very good and clear explanation of the two concepts. I’ve read about and used them before but had not yet found such a clear explanation. And I really liked the example with the dependent selects. Great article, thanks!

Removing the “Select” button in the double list AJAX example may not be the best idea. Blind users (or others who are required to navigate by keyboard only) hate lists that immediately accept a change when a new item is selected, because scrolling by keyboard changes the selected item. Causing the first list to immediately repopulate the second list when scrolling through it is okay, but the second list should not perform an action on selecting an item. The action should only be triggered by pressing the “Select” button, otherwise it is impossible to just look through the list using the arrow keys.

@Patrick: the second list should not be repopulated for each change in the first list when using the keyboard. Only when focus is transferred from the first list. Thus the “Select” button is superfluous if JavaScript is supported.

There is no event listener attached to the second list. The user has to activate the “Show Products” button to submit the form.

Your points are very relevant, but they are taken care of in this example (even though the code details are omitted for brevity).

Thank you very much!
Now, I use both graceful degradation and progressive enhancement to our web applications. I prefer progressive enhancement to graceful degradation. Because JavaScript can perfectly control every element in the document with DOM, you can do everything what you want to do. So I think that standard JavaScript and DOM is the foundation of progressive enhancement technique.

[…] This service also had a non-Flash method for reporting a repair which wasn’t as good. That’s what we call Graceful Degradation or Progressive Enhancement. And that’s fine. Great site, great piece of accessible Flash, with a non-Flash fallback. Perfect. […]