Help with accesskey syntax

[Alex Billerey]

Hi folks,

Not sure that syntax is the right term but anyway...

I'm currently working a a new section of a website and I want to make it
as accessible as possible - hence the accesskey. On each page there will
be around 15 links to other pages. Is there a standard way of marking up
the accesskey attribute.

Below is the code for the navbar section of the site, and as you can see
I have applied a span tag, and assigned it a class, to a differant
letter of each of the links.

Is this the correct/best way of doing it?. Thanks for reading

Alex

<snippet>
<table width="100%" border="0" cellspacing="5" cellpadding="0">
<tr>
<td class="urhere">Software <span class="acckey">H</span>ome</td>
</tr>
<tr>
<td><a href="alex/userarea.htm" tabindex="1" accesskey="u"><span
class="acckey">U</span>ser Area</a></td>
</tr>
<tr>
<td><a href="alex/prosystem.htm" tabindex="2" accesskey="p">CCH
<span class="acckey">P</span>roSystem</a></td>
</tr>
<tr>
<td><a href="alex/taxpoint.htm" tabindex="3" accesskey="t">CCH
<span class="acckey">T</span>axpoint</a></td>
</tr>
<tr>
<td><a href="alex/cchgains.htm" tabindex="4" accesskey="g">CCH
<span class="acckey">g</span>ains</a></td>
</tr>
<tr>
<td><a href="alex/corporate.htm" tabindex="5" accesskey="a">CCH
Corpor<span class="acckey">a</span>te</a></td>
</tr>
<tr>
<td><a href="alex/trusttax.htm" tabindex="6" accesskey="r">CCH
T<span class="acckey">r</span>ust</a></td>
</tr>
<tr>
<td><a href="alex/pension.htm" tabindex="7" accesskey="e">CCH
P<span class="acckey">e</span>nsion</a></td>
</tr>
<tr>
<td><a href="alex/proaudit.htm" tabindex="8" accesskey="d">CCH
PROau<span class="acckey">d</span>it</a></td>
</tr>
<tr>
<td><a href="alex/prosystem.htm" tabindex="9" accesskey="c">CCH
PRO<span class="acckey">C</span>ap</a></td>
</tr>
<tr>
<td><a href="alex/procost.htm" tabindex="10" accesskey="s">CCH
PROco<span class="acckey">s</span>t</a></td>
</tr>
<tr>
<td><a href="alex/profix.htm" tabindex="11" accesskey="f">CCH
PRO<span class="acckey">f</span>ix</a></td>
</tr>
<tr>
<td><a href="alex/taxmanger.htm" tabindex="12" accesskey="m">CCH
Tax<span class="acckey">M</span>anager</a></td>
</tr>
<tr>
<td><a href="alex/etax.htm" tabindex="13" accesskey="x">CCH
e-Ta<span class="acckey">x</span></a></td>
</tr>
<tr>
<td><a href="alex/client_relate.htm" tabindex="14"
accesskey="l">CCH CLIENT<em>re<span
class="acckey">l</span>ate</em></a></td>
</tr>
<tr>
<td><a href="alex/client_advisor.htm" tabindex="15"
accesskey="">CCH CLIENT<em>ad<span
class="acckey">v</span>isor</em></a></td>
</tr>
</table>

</snippet>

[Brian]

Alex Billerey wrote:

I'm currently working a a new section of a website and I want to make it
as accessible as possible - hence the accesskey.
That tends to have the opposite effect. Suppose you use H for website
help -- a logical choice -- and a Mozilla user tries to get help not for
you website but for his browser. He presses <alt-H>, but instead of
help, he goes to another page on your site. Since accesskeys are not
widespread, it is entirely likely that this behavior will confuse him,
instead of getting him to the help system of the browser.
Is there a standard way of marking up the accesskey attribute.
No, and that's just one of the problems. J. Korpela has a proposal you
might want to read:

http://www.cs.tut.fi/~jkorpela/forms/accesskey.html

One section suggests a possibility of a "standard" of a kind.
Below is the code
In the future, a url is usually better than pasting your code in a message.
for the navbar section of the site, and as you can see
I have applied a span tag, and assigned it a class, to a differant
letter of each of the links.

Is this the correct/best way of doing it? <table width="100%" border="0" cellspacing="5" cellpadding="0">
<tr>
<td class="urhere">Software <span class="acckey">H</span>ome</td>
</tr>
<tr>
<td><a href="alex/userarea.htm" tabindex="1" accesskey="u"><span
class="acckey">U</span>ser Area</a></td>
</tr>

This does not look like tabular data to me, so why have you used tabular
markup? If there's only one item in each row, then perhaps it more of a
list.

<ul>
<li>menu item 1</li>
<!-- etc. -->
</ul>
Unless you add a column:

H Home
U User Area

etc.

Then a table would be appropriate. In fact, that seems like the best
choice. Make it a genuite table.

<table> <!-- get rid of presentation html; use css instead -->
<tr>
<td>H</td>
<td class="urhere">Software <span class="acckey">H</span>ome</td>
</tr>
<tr>
<td>U</td>
<td>
<a href="alex/userarea.htm" tabindex="1"
accesskey="u"><span class="acckey">U</span>ser
Area</a>
</td>
</tr>
<!-- etc. -->
--
Brian (remove "invalid" from my address to email me)
http://www.tsmchughs.com/

[Neal]

On Tue, 27 Apr 2004 23:51:59 +0100, Alex Billerey
<aa*************@clara.net> wrote:

<a href="alex/userarea.htm" tabindex="1" accesskey="u"><span
class="acckey">U</span>ser Area</a>

Just using this bit - and as Brian said, a list would be better unless
it's truly a table - the problem is that non-CSS browsers won't see the
letter. I'd use perhaps <strong>U</strong>ser instead, and use CSS to
style it something like this:

#accesskeys strong {
text-decoration: underline;
font-weight: normal;
}

This way, non CSS browsers will see some change to the letter, and CSS
browsers will likely see the style you suggest.

[Mark Tranchant]

Alex Billerey wrote:

I'm currently working a a new section of a website and I want to make it
as accessible as possible - hence the accesskey. On each page there will
be around 15 links to other pages. Is there a standard way of marking up
the accesskey attribute.

Below is the code for the navbar section of the site, and as you can see
I have applied a span tag, and assigned it a class, to a differant
letter of each of the links.

Similar to my effort, although I didn't use the unnecessary tabular layout:

http://billericaybaptist.net/

--
Mark.
http://tranchant.plus.com/

[DU]

Brian wrote:

Alex Billerey wrote:

I'm currently working a a new section of a website and I want to make it
as accessible as possible - hence the accesskey.

That tends to have the opposite effect. Suppose you use H for website
help -- a logical choice -- and a Mozilla user tries to get help not for
you website but for his browser. He presses <alt-H>, but instead of
help, he goes to another page on your site. Since accesskeys are not
widespread, it is entirely likely that this behavior will confuse him,
instead of getting him to the help system of the browser.

Is there a standard way of marking up the accesskey attribute.

No, and that's just one of the problems.

Well, Opera has adopted <Shift>+<Esc> to get into document access mode
and then you type the accesskey. There is a bugfile on bugzilla which
promotes the same feature too. At least, this is becoming a strong
possibility.

J. Korpela has a proposal you might want to read:

http://www.cs.tut.fi/~jkorpela/forms/accesskey.html

One section suggests a possibility of a "standard" of a kind.

Below is the code

In the future, a url is usually better than pasting your code in a message.

Agreed.

for the navbar section of the site, and as you can see
I have applied a span tag, and assigned it a class, to a differant
letter of each of the links.

Is this the correct/best way of doing it?

<table width="100%" border="0" cellspacing="5" cellpadding="0">
<tr>
<td class="urhere">Software <span class="acckey">H</span>ome</td>
</tr>
<tr>
<td><a href="alex/userarea.htm" tabindex="1" accesskey="u"><span
class="acckey">U</span>ser Area</a></td>
</tr>

This does not look like tabular data to me, so why have you used tabular
markup?

[snipped]

Exactly what I thought too: the use of table is not justified here.
That's the first issue with the given code.

DU

[Brian]

DU wrote:

Brian wrote:

Alex Billerey wrote:

I want to make it as accessible as possible - hence the
accesskey.
That tends to have the opposite effect. Suppose you use H for
website help -- a logical choice -- and a Mozilla user tries to get
help not for you website but for his browser. He presses <alt-H>,
but instead of help, he goes to another page on your site.

Opera has adopted <Shift>+<Esc> to get into document access mode and
then you type the accesskey.

The only one afaik.
There is a bugfile on bugzilla which promotes the same feature too.
At least, this is becoming a strong possibility.

Perhaps. But there's no new version of MSIE until the Windows os comes
out. And even with Mozilla, it is only proposed. Given how slow people
update their browsers, it will be some time yet before there's a 2nd
browser that does not counfound HTML accesskeys and browser keyboard
shortcuts.

--
Brian (remove "invalid" from my address to email me)
http://www.tsmchughs.com/

[Alex Billerey]

Thanks folks.

Tables will get replaced with list(s) - at the time a table seemed
easier. I think that on reflection they are more trouble than they are
worth from a 508/WAI perspective.

I did a quick refit and ditched the idea of advising visitors via use of
a boldened letter. I hadn't thought about css disabled/over-ridden
browsers - duh!!! I'm now thinking about using the title tag to convey
this info, along with tabindex number

http://billericaybaptist.net/

I liked the accesskey navbar.

Alex
"Alex Billerey" <aa*************@clara.net> wrote in message
news:10****************@lotis.uk.clara.net...

Hi folks,

Not sure that syntax is the right term but anyway...

I'm currently working a a new section of a website and I want to make it as accessible as possible - hence the accesskey. On each page there will be around 15 links to other pages. Is there a standard way of marking up the accesskey attribute.

Below is the code for the navbar section of the site, and as you can see I have applied a span tag, and assigned it a class, to a differant
letter of each of the links.

Is this the correct/best way of doing it?. Thanks for reading

Alex

<snippet>
<table width="100%" border="0" cellspacing="5" cellpadding="0">
<tr>
<td class="urhere">Software <span class="acckey">H</span>ome</td> </tr>
<tr>
<td><a href="alex/userarea.htm" tabindex="1" accesskey="u"><span
class="acckey">U</span>ser Area</a></td>
</tr>
<tr>
<td><a href="alex/prosystem.htm" tabindex="2" accesskey="p">CCH
<span class="acckey">P</span>roSystem</a></td>
</tr>
<tr>
<td><a href="alex/taxpoint.htm" tabindex="3" accesskey="t">CCH
<span class="acckey">T</span>axpoint</a></td>
</tr>
<tr>
<td><a href="alex/cchgains.htm" tabindex="4" accesskey="g">CCH
<span class="acckey">g</span>ains</a></td>
</tr>
<tr>
<td><a href="alex/corporate.htm" tabindex="5" accesskey="a">CCH
Corpor<span class="acckey">a</span>te</a></td>
</tr>
<tr>
<td><a href="alex/trusttax.htm" tabindex="6" accesskey="r">CCH
T<span class="acckey">r</span>ust</a></td>
</tr>
<tr>
<td><a href="alex/pension.htm" tabindex="7" accesskey="e">CCH
P<span class="acckey">e</span>nsion</a></td>
</tr>
<tr>
<td><a href="alex/proaudit.htm" tabindex="8" accesskey="d">CCH
PROau<span class="acckey">d</span>it</a></td>
</tr>
<tr>
<td><a href="alex/prosystem.htm" tabindex="9" accesskey="c">CCH
PRO<span class="acckey">C</span>ap</a></td>
</tr>
<tr>
<td><a href="alex/procost.htm" tabindex="10" accesskey="s">CCH
PROco<span class="acckey">s</span>t</a></td>
</tr>
<tr>
<td><a href="alex/profix.htm" tabindex="11" accesskey="f">CCH
PRO<span class="acckey">f</span>ix</a></td>
</tr>
<tr>
<td><a href="alex/taxmanger.htm" tabindex="12" accesskey="m">CCH
Tax<span class="acckey">M</span>anager</a></td>
</tr>
<tr>
<td><a href="alex/etax.htm" tabindex="13" accesskey="x">CCH
e-Ta<span class="acckey">x</span></a></td>
</tr>
<tr>
<td><a href="alex/client_relate.htm" tabindex="14"
accesskey="l">CCH CLIENT<em>re<span
class="acckey">l</span>ate</em></a></td>
</tr>
<tr>
<td><a href="alex/client_advisor.htm" tabindex="15"
accesskey="">CCH CLIENT<em>ad<span
class="acckey">v</span>isor</em></a></td>
</tr>
</table>

</snippet>