The following is republished from the Tech Times #159.
Previously, I mentioned that you should consider three main groups of people when adding JavaScript to your site—users without JavaScript capabilities, users without a mouse, and users of screen readers—and that supporting each of these three groups becomes progressively more difficult. In this post, we’ll focus on the first group, and discover how very easy it is to accommodate them with the right approach.
In the introductory JavaScript book I’m currently co-writing, one of the first big examples is an accordion control. This user interface element collapses a series of content blocks so that only their headings are visible, and then allows the user to expand the blocks one at a time by clicking on the headings.
This is a great example of how the right approach can accommodate users without JavaScript support (or with JavaScript disabled) with no extra work.
It can be tempting to write the CSS code of your page so as to collapse the blocks of the accordion control, and then write JavaScript code that will expand the blocks on cue. But disable the JavaScript, and users are left with the collapsed blocks and no way to read them!
In the past, conventional wisdom advocated an approach called graceful degradation, which would involve adding extra “fallback” code for users or browsers that were not able to handle the fancier bits of your page.
The graceful degradation approach to the accordion problem, for example, might be to put an expanded version of the accordion’s content between <noscript>...</noscript> tags, so that browsers without JavaScript enabled would display the expanded content. This is extra work, and is the sort of thing that really sours developers on accessibility.
Today, we understand that this is the wrong approach.
A much better way to solve accessibility issues is through progressive enhancement, where you start by building something that works in the simplest, most accessible environment (in this case, a browser with JavaScript disabled), and then progressively enhance it with features that will improve the user experience in browsers that support them, or silently fail in browsers that don’t.
What this means for our accordion is that we should write the CSS code of the page so that the contents of the accordion are completely visible.
The JavaScript code will then collapse the accordion as soon as it loads, but in browsers with JavaScript disabled the accordion will remain expanded, and the content may be read without difficulty. And there is no need to write any extra code or spend any extra time to achieve this—it’s simply a matter of approach.
Next time, we’ll look at how to make sure this accordion control can be used by people who are either unable to use a mouse, or who simply prefer to navigate by keyboard. This will prove a little more challenging, but is still quite practical in most projects.
If you’d like to read more about graceful degradation and progressive enhancement, I highly recommend SitePoint regular Tommy Olsson’s article on the subject at Accessites.org.
The Ultimate JavaScript Bundle: 2 books + 1 course
- SitePoint's latest ebook: Jump Start JavaScript
- Jump Start CoffeeScript ebook
- Backbone.js: A Practical Beginner's Guide online course
Buy now $39 Normally $117 - save 66%
Or get access to all SitePoint's Premium Content with a Learnable membership
