Each and every piece of content on the web should be available to anyone, no matter whether their browser capabilities, preferences, platform or security customizations. That’s what progressive enhancement stands for.
Sounds like big stuff, but the main proposition is this: each and every piece of content on the web should be available to anyone, no matter their browser capabilities, preferences, platform or security customizations. Just to make sure that my convoluted phrasing doesn’t make the concept of progressive enhancement sound more complex than it already did, I’m gonna rewrite it as a list of tasks.
- Write understandable copy (goes without saying).
- Use understandable, semantically correct, standards based markup to display the content. So far, every browser on the planet, using its default styling, would able to render the content in a usable fashion.
- Style the markup as you wish with CSS, keeping in mind that less capable browsers will perform differently to the new ones. To put it another way: your basic styling should do the significant work, while the more advanced part (like, say, CSS3 transformations), which might not be rendered at all, should only enhance the visitor’s experience (progressively, of course).
From the top: Content > Structure > Basic styling > Advanced styling > Behavior. Progressive, get it?
A Real World Example
Now let’s rephrase the original question. I’m gonna pretend it was written like this: How do you make sure that everyone can use the form, no matter the browser capabilities or the visitor’s disabilities? If you’re not the reading type, go ahead and check out the code example.
I’m gonna go ahead and create my own “real world example”. Sticking with single option questions, let’s ask about the visitor’s income, and divide it into 3 segments. In case you were wondering, I’m also asking myself why would anyone do that. But stick with me, I’m going places.
So, the task is “Choose your income level: small, medium, large.” We’re using big dollar signs in order to really get our point across.
First of all, we’ll mark it up just like regular radio inputs (using actual words for the choices, like “small”, “big”, etc.). There’s only 2 things we need to do in order to make sure that our enhanced version will work. First, we need to wrap the form controls in a container in order to be able to style that with a background image (the progress indicator). Second, the textual content of the labels needs to be wrapped in containers, also for styling purposes. What we get for each control is:
<label class='s'> <input type='radio' value='s' name='income_level'> <span>Small</span> </label>
I’m not crazy about the
spans, but whatcha gonna do? We’re gonna have to hide just the text while leaving the inputs alone.
Let’s style the labels (not the inputs) to display a background image instead of the texts. Then we’ll also add the horizontal progress indicator (so inappropriate) as a background image of the option group. The classic radio buttons are by now over the little bulges in the decoration. To see the CSS rules, just look at the source of the example.
We also add a few more rules for the enhanced version. What we want is:
- to start with a background image that shows the preselected level;
- to visibly hide the input boxes;
- to have classes in place for various levels of income (different background position).
We’re gonna add the behavior now and a bit more styling for those of us blessed with a better browser and great vision.
- The other we’ll use an indicator of the selected level in order to easily switch the background image by changing the container’s class.
As soon as we add event listeners, we’re finished. Here’s what we’re trying to achieve: whenever someone clicks a certain point on the progress indicator or a label’s decoration, the background image of the inputs container is to be replaced by the appropriate one.
If you’ve somehow missed it, here’s the link for the code example again: ‘Progressive Enhancement: Radio Buttons’ Code Example.
Let’s wrap it up
Short revision: Content > Structure > Basic styling > Advanced styling > Behavior. The point of the article isn’t to be a tutorial on having custom radio buttons — although it serves that purpose too, to a degree — but to show how easy it actually is to make your content as accessible as it should be.
You just have to start from the lowest possible level of interactivity / features and build on that foundation, progressively adding features and/or levels of interaction.