E-mail List Archives

Search E-mail List Archives for

Number of posts in this thread: 2 (In chronological order)

From: Sam
Date: Thu, Jul 20 2006 2:30PM
Subject: Aural readers and onClick JavaScript
No previous message | Next message →

We have always coded anchor tags for aural readers. Done this for years.
No complaints.

We're beginning to use JavaScript to render a "Table of Contents". Right
now, there are no anchor tags in the table. Instead, each row <tr> is
dynamically given an onClick event. In other words, it's not visible in the
HTML at all.

I'm guessing, but want to verify, that aural readers won't see the onClick
event at all, so in spite of the "title" in each <tr> tag instructing users
to click to visit the module, the aural reader won't get it. Am I right?

We will need to redesign the "Table of Contents" to explicityly show the
links as anchor tags in the HTML?

Do aural readers detect onClick events if they're explicitly coded?

Sam

Here's the format of the existing table...

<table id="toctable" align="center" border="0" cellpadding="0"
cellspacing="0" width="100%">
<tbody>
<tr id="tocwinheader">
<th class="" style="border-right: 0px none; padding: 1px;" colspan="3"
scope="col" align="center">Completed Pages</th>
<th class="" scope="col" align="left">Module Title</th>
</tr>
<tr id="tocMod-1" class="alt" title="Click to return to the last visited
page of this module."><!-- onClick is dynamicly assigned to the <tr> tag -->
<td style="border-right: 0px none;" class="" align="right">&nbsp;</td>
<td class="" style="border-right: 0px none; padding: 1px;"
align="center">1</td>
<td class="" style="padding-left: 1px; padding-right: 2px;"> of 2</td>
<td class="">Module A Title here</td>
</tr>
<tr id="tocMod-2" title="Click to return to the last visited page of
this module.">
<td style="border-right: 0px none;" class="" align="right">&nbsp;</td>
<td class="" style="border-right: 0px none; padding: 1px;"
align="center">0</td>
<td class="" style="padding-left: 1px; padding-right: 2px;"> of
10</td>
<td class="">Module B Title here</td>
</tr>
</tbody>
</table>

From: James Denholm-Price
Date: Thu, Aug 03 2006 5:50AM
Subject: Re: Aural readers and onClick JavaScript
← Previous message | No next message

Hi Sam & all @ WebAIM

On 20/07/06, Sam < = EMAIL ADDRESS REMOVED = > wrote:
> We're beginning to use JavaScript to render a "Table of Contents". Right
> now, there are no anchor tags in the table. Instead, each row <tr> is
> dynamically given an onClick event. In other words, it's not visible in the
> HTML at all.

Just my opinion: Using onclick on a <tr> with a title is a bad idea on
several counts:

1. onclick is software-dependent & device-specific.

2. <tr> do not have "click" behaviour (affordance) so no-one's
expecting a click to have an effect (if you do CSS cursor:pointer;
it's still visual; aural CSS is unsupported.)

3. the title may not be read automatically (who's expecting <tr> titles??)

If the bulk of the TOC is static HTML then it should be easy enough to
add an <a> element inside the cell which (1) can accept onfocus, (2)
has "click" affordance and (3) is more likely to be associated with an
action and/or a title attribute.

> I'm guessing, but want to verify, that aural readers won't see the onClick
> event at all, so in spite of the "title" in each <tr> tag instructing users
> to click to visit the module, the aural reader won't get it. Am I right?

>From your description it seems the event handler will trigger a page
change. The reader ought to spot that (it's dynamic changes within the
existing page that are difficult [1].)

> We will need to redesign the "Table of Contents" to explicityly show the
> links as anchor tags in the HTML?

I think that would be the best idea. After all, what about your users
who have disabled or can't use JavaScript? They'll see the title but
onclick will fail (go "unobtrusive"! [2])

HTH,
James

[1] http://domscripting.com/blog/display/64
[2] http://www.onlinetools.org/articles/unobtrusivejavascript/