Summit 7 Team Blogs

Progressively Enhancing Mobile Accessibility

Once-upon-a-time, “graceful degradation” was the name of the game. Design something ridiculously new and shiny and large and jaw-droppingly beautiful on a 32 inch Apple… then maybe start figuring out a way for the intractably technophobic little-screened little people to get the gist of the brilliance, minus any of the bells and whistles. If the product was for a public entity, there might even be a legal requirement to do that degradational drudgery on behalf of the 99%.

Missing pluginI say once-upon-a-time, but the graceful degradation mindset still persists and in many ways has been given a new lease of life in the guise of mobile web optimization.

This is not a cause for celebration. This is the mindset that sees Flashy sites reduced to a static image; deep, useful, content-rich sites picked over for a few iconized screens of bullet pointed uselessness.

But simplifying content for mobile, stripping out the glitz, is A Good Thing, right? Well, I would argue that it is kind of the right thing, done in almost exactly the wrong way and for entirely the wrong reasons–and fortunately, a growing cacophony of advocates for progressive enhancement would agree.

If I had just coined the phrase progressive enhancement, and if I were to go on to explain that progressive enhancement is the principle of a layered web experience where the emphasis is on a good baseline experience that is then augmented by platform- or device-dependent enhancements, this would be a truly monumental blog post. But the concept has been around for at least eight years.

What I want to do is suggest why it works well as a model for ensuring that our mobile-optimized designs, like our “desktop” designs, are accessible to users with a wide range of (dis)abilities and technologies.

We’re talking less about a change in technology than a change in emphasis. The first thing to emphasize, is that content is king. The second thing to emphasize is that content is king. (Do you see what I did there?)

We should pay more than lip service to the principle of One Web. The same content should be available to all users irrespective of their or their device’s abilities. Note that availability is not the same thing as representation; available content and functionality may be represented in different ways dependent on the delivery context (see W3C on One Web). But we should be designing and authoring with variations in the delivery context in mind.

At the absolute bare minimum, all web content should be semantically correct with an appropriate hierarchy of labeled elements that make sense without recourse to multimedia. This is the baseline experience that ensures screen readers such as that built in to the iPhone and the numerous variants available for Android can make content intelligible to users. It is also the experience for users with images and script disabled.

Making all content available to, and presented appropriately for, all users also helps ensure that the first selection by our mobile users isn't the "full version" button (which of course is still necessary).

As a direct subversion of the graceful degradation model, the progressive enhancement model takes as its start point the baseline experience of all users. The experience primarily relates to content, but also the basic branding and information architecture components. Accessibility is not an afterthought or a chore – how do we make it compliant? – but integral to the design process.

As designers concerned with the accessibility of our creations, we know that the Web Content Accessibility Guidelines are essentially the holy grail for good and thus accessible web design. No single, authoritative resource exists specifically for mobile, although the W3C’s Mobile Web Best Practices guidelines and the Mobile Web Application Best Practices provide detailed and comprehensive ideas.

Although the delivery context for any particular web property can best be determined by examining analytics data (or conducting extensive consumer market research) the principle remains: get the basics – content, IA, markup – right. Then progressively enhance with beautiful CSS, HTML5 and jQuery elements.

The end result for our high-tech end users is a beautiful, custom-looking interface. And for all our users, it’s one that works.