User Experience Narrative 1: The National Public Radio Site
Let's look more closely at an example. Like the U.S. government's old disability information site, National Public Radio's site offers a text-only link in the
upper-left
corner of the page (Figure 8-3).
Listening to NPR's Home Page
Here's how the JAWS screen reader speaks the first 23 items on the main page of NPR's site.
NPR hahmapage
Visit our link text dash only page
Link graphic NPR
Combo box NPR programs A dash Z
Go button
Edit enter keywords
Find button
Link news
Link archives
Link your
turn
Link your
stations
Link shop
Link about NPR
Link contact NPR
Find your local member station
colon
Edit call letters left paren or enter ZIP code right paren
Find button
Graphic listen now
Hourly newscasts
Link RealAudio
Link Windows Media
Program stream
Link Apple QuickTime
Link RealAudio
Link Windows Media
Link Audio Players
Link Audio Help
Graphic our online
partners
Link graphic PBS slash sbanner [pbsbanner] underline enproam [nprhome]
Link audible dot com for downloadable NPR programming
Link Adaptive Path User Experience Consultants
Link graphic NPR shop
[And so on. . . .]
Visiting NPR's Text-Only Page
The text-only link leads to a menu of links that is indeed text-only (Figure 8-4).
This page doesn't qualify as an "equivalent alternative" to the primary NPR site. The text-only menu is organized quite differently from the menu on the main home page. By labeling groups of links (Main Navigation, Audio Help, Radio Programs), it provides some contextual information that isn't available on the page we listened to and
looked
at a moment ago, as suggested by WCAG 1.0 Checkpoint 13.8 ("Place distinguishing information at the beginning of headings, paragraphs, lists, etc."). But the text-only menu does not include the news items that are prominently displayed on what is clearly the
real
home page, nor does it include the links that run down the right side of the screen. Moreover, some of the links (the link to
All Things
Considered
,
for example) point back to graphically
intense
pages.
For comparison with the transcript of the main page presented earlier, here's how JAWS
reports
the first 23 items on the text-only page.
National Public Radio Online
Main navigation
Link news
Link program archives left paren good for searching right paren
Link your turn
Link your stations
Link shop
Link about NPR
Link contact NPR
Audio help
Link audio players
Link audio help
Radio programs
Here's a listing of NPR's produced and distributed programs period. Link all songs considered link listen to the latest show or link view the archives
Link all things considered registered
Link listen to the latest show or link view the archives
Link along for the ride
Link view the archives link American Radio Works At the Opera view the archives beyond 2000 Billy Taylor's Jazz view the archives Car Talk registered the changing face of America
Link view the archives The Connection the Diane Rehm Show Fresh Air registered with Terry Gross listen to the latest show or view the archives Jazz from Lincoln Center
Link Jazz Profiles view the archives Jazz Set with Branford Marsalis Justice Talking Latino USA Living on Earth Lost and Found Sound view the archives Marian
Link McPartland's Piano Jazz The Merrow Report Morning Edition registered listen to the latest show or view the archives National Press Club view the archives NPR Playhouse
NPR World of Opera On the Media registered Only a Game Performance Today registered Public Interest Radio Expeditions view the archives Rewind says you exclaim Selected Shorts Sunday
Link Baroque Symphony Cast Talk of the Nation view the archives [And so on. . . .]
Something has gone seriously wrong here. It isn't just that the information on this page
differs
from what's available on the main page or that it's in a different order. The page is "broken"—from the point immediately after the link to a show called
Along for the Ride,
links for multiple shows and their archives are run together in an incoherent way. It's
impossible
to tell where the links will go.
Problems at the Source
This is not a good thing, of course. But when we looked at the source code, we were amazed that the page worked at all. To begin with, the document doesn't start with the
obligatory
HTML tag (<html> )— though it does
end
with the end-HTML tag (</html>). It has just a tiny <head> section (it contains nothing but a <title> element) sitting atop a
distorted
<body> section consisting of a <table> element that has a beginning <table> tag and not one but
two
closing tags several lines apart (</table> . . . </table>). And on the table—chaos. The first line of code inside the <body> element looks like this:
<table width=650><td><tr>
It's common practice to use tables to lay out lists of links, and presumably that is the
intention
here. But the code is
backwards
: it puts the first table row (the <tr> element) inside the first data cell (the <td> element). There is no closing tag for either the data
cell
or the row, and there are no more rows or
cells
. Instead, links are presented as items in a list (using the <li> element), but the beginning and end of the list are not identified—a violation of WCAG 1.0 Checkpoint 3.6 ("Mark up lists and list items properly"). And only
some
of the links are organized into a list. Those arranged under Audio Help and Radio Programs are simply separated by line breaks with the <br> element. What appear on the screen to be section headings (Audio Help, Radio Programs, and so on) are actually just phrases formatted as bold text, whereas they would be more appropriately tagged as structural sections of the document (<h1>, <h2>, <h3>, and so on) in accordance with WCAG 1.0 Checkpoint 3.5 ("Use header elements to
convey
document structure and use them according to specification"). And then the whole thing breaks down, as shown in the source code below from the National Public Radio text-only page.
<a href="/programs/theride/index.html"> Along for the
Ride</a> <br><a
href="/ramfiles/theride/lfunderburg/aftr.lfunderburg.01.
rmm"><!-- Listen</a> to the latest show <img
src="bullet.gif">
--> <a href="http://www.npr.org/programs/
theride/archives.html">View</a> the
archives<br><br>
This is the point at which JAWS
began
running the
names
of radio programs together. In the code fragment shown above, the first two lines, from the initial <a href . . .> to the first occurrence of </a>, define a link to a radio program called
Along for the Ride
. Then comes trouble. Following a line break (<br>) comes the beginning of a new link. But where the link text should be (it's supposed to read "Listen to the latest show") there is instead a comment tag (<!-- . . . -->), which
tells
the browser to ignore what it encloses. That comment is clearly
meant
to enclose (and thus cause not to appear on the screen) an image called bullet.gif, which has evidently been caught red-handed trying to
sneak
onto this text-only page. Unfortunately, though, the comment tag starts a little early, and it
also
captures what was supposed to be the link text
and
the closing tag of the link. Then comes the beginning of a new link to the archives for this show—but the browser and JAWS are forced to try to treat this new link as the link
text
for the unclosed link to the audio files for the most recent edition of the show. Meltdown.
How did this happen? We can't say for sure, but we'll
hazard
a guess. The person to whom the job of making a text-only version was assigned did what so many HTML developers do: he or she
copied
the source from a version of the page that included some graphics and pasted it into a new document. Then he or she realized that there were images in there and went back in to comment them out of the code. This developer clearly was in a hurry and didn't have time to test the page—not even to eyeball it quickly, let alone put it through the W3C's online HTML Validation Service at http://validator.w3.org/, which would have caught the error even if no one else did. (So would an authoring tool conforming with the Authoring Tool Accessibility Guidelines 1.0, had there been any such tools.) And that was that.
(We are pleased to note that, as of June 2002, the broken links on this text-only menu have been mended: the source code still contains the <img> element, but the comment tag is correctly placed now so that only the link to the most recent show is commented out. The other errors described above
remain
, however.)
The text-only version is no doubt well intentioned. But the good intentions matter only if they're carried through to every level of the site, and in this case as in many others that doesn't happen. The links on NPR's text-only menu, for example, point back to the graphical version of the site. And selecting the link for the afternoon news show
All Things Considered
brings
up the screen shown in Figure 8-5. The page for
All Things Considered
is dense with text, but there are a number of images and graphical links as well—this is
not
a text-only page. This bouncing back and forth between text-only and graphical pages isn't
especially
problematic
in the case of
All Things Considered
. But in the
next
section of this chapter, we'll show you how confusing it can be when a user is "slammed" unpredictably from one version to another without warning.
|
