Progressive Enhancement: The Beauty of Alternatives

Progressive Enhancement: The Beauty of Alternatives

While many of us take the web for granted, a subset of Internet users exist who are unable to get the same level of content as we have come to expect. Whether through accessibility needs, the lack of enablement to certain technologies or for some other reason, the need to create consistent, usable and accessible alternatives for those who require it is of an increasing level of importance. This article examines the various methods available for alternative content, and why they matter.

Progressive Enhancement: The Beauty of Alternatives
Image credit: alexandros gavrilakis

Why Alternatives Matter

It’s important to understand that alternative information serves a very noble purpose. One of the first things we learn as web professionals is the concept of degrading gracefully through progressive enhancement. While on the surface this may seem like a bunch of buzzwords, it essentially means that anything you produce should have an alternative for if some technology or ability to use part of the site becomes non-functional. This is a lesson many sites unfortunately still need to learn.

Flash

Figure 1: Flash has been a controversial subject ever since Apple’s refusal to support it.

Justification for taking care is drawn from the accessibility and usability research that exists. As a matter of consideration for end-users, the more we attempt to reach their needs the better off our sites will be when it comes to visitors deciding whether to either visit again or purchase our services. No two browsers are created equally the same goes for browsing devices, and forming unhealthy relationships on technologies not everyone will have available (like Flash) can hurt the visitor.

Supplement Standards

So what are the options available and how exactly are we meant to cater for such crowds. Well the first area where alternative content can be of particular use is the ability to gracefully degrade upon existing standards. Languages such as CSS and JavaScript have become so ingrained in the browsing experience that we often forget that both can be turned off without a second thought, this presents a very real problem in that poorly structured markup or obtrusive scripting can cripple those users.

BBC

Figure 2: The BBC website has a special piece of text which deals with CSS unavailability!

At first the need for such a technology may not be immediately apparent as some of you may think that if it can be turned off, it can be turned back on again. While this may be true, the reasons for disabling such functionality can range from making text easier to read for low vision users in the case of CSS or to avoid potential vulnerabilities or intrusiveness in the case of scripting. As such it pays for you to turn off your CSS and JavaScript to ensure your site still works fine without them.

Awesome Attributes

Of course, alternative content extends well beyond the concept of providing some sort of backdrop mechanism for disabled standards. HTML itself provides a range of elements and attributes to give extended meaning or context to devices like screen readers which give a fairer situation for blind visitors who can’t make use of images in the same way that the rest of us can or individuals who suffer other disabilities that require some basic considerations to be made (as WCAG highlights).

Alt

Figure 3: Alt attributes are very useful for screen readers in explaining an images purpose.

Immediately what comes to mind when you think of HTML that gives alternative content? The most obvious HTML consideration would be the ALT attribute or perhaps LONGDESC. While these two do have their purpose it’s also worth considering how you can use the various other attributes that can aid your visitors such as TITLE (which can be used on most elements), SUMMARY (for tables), CITE (especially useful on INS and DEL elements for justifying removal or inclusion) and ABBR (for tables).

Pushing Proprietary

While we have covered code which affects the readability of on-screen content, it’s worth giving a nod to those components which have the biggest impact on accessibility and require alternative content more than ever. While proprietary plug-ins like Flash seem like a great thing as they provide much needed extensions to various existing technologies, there is a genuine chance that visitors (or web browsers) may not have them installed or available which will effectively cripple your content.

Unsupport

Figure 4: For users without access to Flash, entire segments of a site may be rendered useless.

While I certainly don’t want to cast a negative shadow on the use of Flash, depending upon it (or Silverlight or Java or ActiveX) alone will cause more restricted viewers (and search engines) to have a limited experience. Having an entirely Flash based site may seem cool, but if no HTML alternative is provided you can be sure that somewhere down the line, it may affect your visitors. As such, ensure that you offer a text or HTML based alternative to such non-standardised (but useful) components.

Maximizing Media

Something that goes hand in hand with non-standardised components is the use of visual mediums which have no text generically built into them. While audio provides a necessary alternative to video for blind visitors, it’s not much good for the deaf who will have a limited ability to hear sound. As such, to reinforce earlier points it’s important that we cater to such audiences. The issue extends far beyond visual media too. Technologies like SVG, VML or Canvas will also require text alternatives!

Transcripts

Figure 5: Transcripts are provided in podcasts as deaf viewers may find the information useful.

Providing such alternatives may initially puzzle readers but you just need to watch your television to see how issues are handled. Many TV stations have assistive aids like captions (both conversational and descriptive) to give live text renditions of the audio or signing to assist deaf viewers. In addition, you could consider audio only downloads to reduce bandwidth usage for the blind and transcripts for audio and video for screen readers and those without Flash – these assistive aids really do help.

Content Cultivation

The above should give your users the additional content they require, without being too intrusive on the page. However there is something to be said for content cultivation and the extension of what you provide in the form of citations and URL’s to explanatory resources, summaries which give the reader priority points to consider, footnotes which explain terminology or the justification behind a statement and tooltips which upon hovering over key pieces of information give extra details.

Tooltips

Figure 7: Tooltips are a great way to extend the meaning of key words or terms.

While I’m not going to lecture you about best implementations, it’s worth looking at the added value you can bring to your content to enrich the user-experience. Regarding on-page additional content, you could have blocks of content such as assistance with filling in a form hidden away until they are requested. With this in mind it’s worth considering the impact your data may have and when supplementary content may be useful, after all, the possibilities for on-demand content are endless!

Long-Term Solutions

While the future of web standards is unknown, and many elements of the web currently hang in the balance, it’s important to realise that with users needs being so diverse we need to account for an ever increasing array of possibilities, situations and issues. Therefore as we code our sites and add all of those wonderful flourishes onto the page, we must do so with caution and a realisation that we must gracefully accept that our users needs come first, and functionality should take a back seat.

As you examine your own website’s code, think of the potential ways you can enrich the experience with alternative content. Sometimes those small changes can make all the difference to the end-user and occasionally the lack of consideration to their needs can force them to look elsewhere. We are currently living in an age in which ubiquity and diversity is of the utmost importance, and therefore the beautiful alternative content we provide acts as a shining example of quality craftsmanship.

More Resources

Questions

Have you considered supplementing your content with “bonus” material? What measures do you take to ensure your website is accessible? What do you think the future of web standards will be, and how will alternative content factor into the landscape? Let us know your thoughts!

Deals

Iconfinder Coupon Code and Review

Iconfinder offers over 1.5 million beautiful icons for creative professionals to use in websites, apps, and printed publications. Whatever your project, you’re sure to find an icon or icon…

WP Engine Coupon

Considered by many to be the best managed hosting for WordPress out there, WP Engine offers superior technology and customer support in order to keep your WordPress sites secure…

InMotion Hosting Coupon Code

InMotion Hosting has been a top rated CNET hosting company for over 14 years so you know you’ll be getting good service and won’t be risking your hosting company…

SiteGround Coupon: 60% OFF

SiteGround offers a number of hosting solutions and services for including shared hosting, cloud hosting, dedicated servers, reseller hosting, enterprise hosting, and WordPress and Joomla specific hosting.