Joe Clark: Media access

You are here: joeclark.org → Captioning and media access →
Web accessibility →
The “Break this page!” experiment

Updated 2001.07.15

The “Break this page!” experiment

Aaron Doust and I have been working on an experiment in access to photographs contained in Web pages.

Background

There are three issues at stake:

  1. Not all browsers can display graphics. Lynx and WannaBe are text-only browsers, for example.
  2. Some nondisabled netters surf the Web with graphics loading turned off because it’s faster.
  3. Blind and visually-impaired people can’t see the graphics or can’t see them well, and/or may also be using a text-only browser or have graphics loading turned off.

Experimental pages

Four Web pages at Aaron’s site have been developed to show how, in the real world, this problem can be solved. We are bringing accessibility out of the realm of the theoretical here.

First of all, every image on Aaron’s site (not just the test pages in question) now has an alt text, which is required in HTML 4.0 and has always been recommended in previous versions of HTML. A great many Web authors fail to include the dead-simple feature of alt texts, which by themselves make a site easier to use for people in the three categories above.

There is, however, a new technique for making visually-complex pages accessible to anyone who can’t see the graphics: Writing descriptions of the images where alt texts are insufficient. Typically the descriptions are linked via a small but noticeable D. tag alongside the image or in a navigation bar. The downside of this technique is the visibility of the D. links – and, of course, the difficulty of persuading Web-jockeys that the 30 seconds it takes to write the description is even worth it in the first place.

The photos contained in these four subpages now have written descriptions. (They’re Aaron’s photos and he wrote the HTML; I wrote the descriptions.) The photos depict various biketrials riders in Perth, Australia. Bicycle trials is a discipline of cycling in which the aim is to ride over, across, and through obstacles without putting your foot down. If the topic isn’t of much interest to you, well, make allowances. The point here is that even a hobbyist page can be accessible, and if hobbyist pages can be, corporate Web sites easily can be accessible, too.

There are four pages with four different approaches.

  1. Case 1 (Margaret River): These photos use a novel approach of linking a text description to the actual caption of the photo. You thus have three ways to interpret the photo without graphics: From the alt text, from the written caption, and from the long description that caption links to. This approach works in, say, journalism sites where photos are given captions, as was the convention in the print newspapers they often emulate. It solves the problem of cluttering up pages with D. links to descriptions. It introduces its own problem of cluttering pages with two visible descriptions and one invisible description all of the same thing.
  2. Case 2 (East Perth): Here, we adhere to the HTML 4.0 standard for the longdesc tag for long descriptions.
  3. Case 3 (King’s Park): In this page, all photos have descriptions, links to which are given by (D). But all the descriptions are in one single file with different <#anchor> links.
  4. Case 4 (Subiaco): All photos have descriptions, links to which are given by (D). All descriptions occupy their own separate files.

Further options

Other techniques we could have used, but did not, include setting up a neighbouring single-pixel GIF the same height as the image that is itself a link to the long description. This is an unsatisfactory solution for various reasons. If you’re using a graphical browser with graphics turned off, your font size is quite unlikely to be small enough to display the (D) or D. so that you can actually click the thing. If you have graphics loading turned on, you never see the link, and might notice it only if you catch the status line changing as you happen to move the mouse over it. This technique tends to render you more blind than you already are. Solely in text-only browsers does this approach provide accessibility and elegance.

Further, we could have written nifty little lines of Javascript that tell you to click the image for a full description when your cursor hovers over the image. That wouldn’t work here (a) because there’s no Javascript and (b) because selecting the image brings up a full-size version of the photo. Still, it works in two other sites, vallartabooks.com and tropicasa.com, which actually do a number of good things for accessibility and are themselves models.

We did not write descriptions of the entire pages as a visual whole, and all the images are presented within tables, which are certainly not universally accessible.

The crunch

We sent out word of our experiment to relevant mailing lists. The instructions:

What we want you to do is to break our pages. Load the four subpages in every conceivable combination of platform, browser, graphics mode, and assistive technology. The more unlikely, the better. We especially want to hear from PDA users (like Newtons or PalmPilots) and people using speech output. Tell us how the pages look and how easy or difficult they are for you to navigate and interpret. Every aspect is up for discussion, from coding to appearance to writing. All suggestions articulated in a reasonably good-natured tone will be considered, and we may update the pages over time to try new things.

Selected responses:

Browser issues

Browser support for longdesc is poor but improving.

So just at the level of browser readiness, we have a problem. longdesc may not be ready for prime time.

Conclusions

We don’t think the four approaches can be vastly improved. They all have pluses and minuses. In the future, we may use this information to lobby the World Wide Web Consortium for updated HTML specifications.