acclerator key with input element

[Haines Brown]

I use form and input elements just to create an (ugly) navigation
button. Now, for accessibility, I provide an accelerator key for it so
that the first letter of the value attribute is a link. For example,
This works:

<form">
<input id="button" type="button"
value=" Foo homepage "
accesskey="f"
onClick="parent.location='../index.html'">
</form>

However, the "F" in Foo is not underlined. How can I decorate the "F"
so that the user knows it is an accelerator?

A more general question: anchor elements by default have underlined
content. Given that, how can one distinguish the first letter of the
text to signal the user that it is an accelerator?

--

Haines Brown
KB1GRM
ET1(SS) U.S.S. Irex 482

[David Dorward]

Haines Brown wrote:

I use form and input elements just to create an (ugly) navigation
button. Now, for accessibility, I provide an accelerator key for it so
that the first letter of the value attribute is a link. For example,
This works:

<form">
<input id="button" type="button"
value=" Foo homepage "
accesskey="f"
onClick="parent.location='../index.html'">
</form>
That is ugly. <form action="../index.html" target="_parent"><input
type="submit" ... ></form> wouldn't depend on JavaScript. Using a
regular link would be even better - links go places, forms send stuff
places. Breaking UI conventions doesn't make for a good experience.
However, the "F" in Foo is not underlined. How can I decorate the "F"
so that the user knows it is an accelerator?
Also, by default, in English language browsers, F is often the
accelerator key for the file menu. Breaking access to it isn't a great
idea.
A more general question: anchor elements by default have underlined
content. Given that, how can one distinguish the first letter of the
text to signal the user that it is an accelerator?

There aren't any good ways, and in my experience, accesskeys do more
harm than good.

[Chris Morris]

Haines Brown <br****@teufel.hartford-hwp.com> writes:

I use form and input elements just to create an (ugly) navigation
button. Now, for accessibility, I provide an accelerator key for it so
that the first letter of the value attribute is a link. For example,
This works:

<form">
<input id="button" type="button"
value=" Foo homepage "
accesskey="f"
onClick="parent.location='../index.html'">
</form>

However, the "F" in Foo is not underlined. How can I decorate the "F"
so that the user knows it is an accelerator?
Firstly, what's wrong with
<a href="../index.html" accesskey="f">Foo homepage</a>
If you really want it to look like an ugly button it's possible to
style it as one.

Secondly, the implementation of accesskey in Internet Explorer and the
Mozilla-based browsers is very bad - accesskey="f" will generally be
activated with 'Alt-F'. 'Alt-F' in normal circumstances [1] opens the
browser's "File" menu. To make it even more confusing, in one of IE
and Mozilla, Alt+F simultaneously will activate the accesskey, but
Alt,F will activate the menu.

Use of numeric accesskey values mostly gets around the conflict
problem (though on my machine Alt-number is intercepted by the window
system and never even reaches the browser) but replaces it by the
accesskeys being entirely unintuitive.v

[1] And English language settings. In other languages it might open a
different menu.
A more general question: anchor elements by default have underlined
content. Given that, how can one distinguish the first letter of the
text to signal the user that it is an accelerator?

Use bold, italics, or some other styling instead?

Better still, lobby the browser developers to make the browser display
accesskey definitions in an appropriate and standard way (e.g. an
extra bar at the side or top of the browser, or something that pops up
when the access key prefix is pressed) and also to use an activation
key for them that doesn't conflict with other browser functions.

--
Chris

[casinoman]

try
<button accesskey="F" onclick="alert('foo')"><span
style="text-decoration:underline">F</span>oo</buttoN

[Haines Brown]

I wish to thank those who so kindly offered advice on button design. I
decided to avoid improver use of form elements, and the accelerator
key issue just ended up too complicated. So instead I just created a
CSS button and left it at that. Anything wrong with this? (I have
utilitarian pages and so don't mind a utilitarian ugly button).

#bttn {
padding:0;
margin:3px 0;
text-align: center;
background:#cacaca;
width: 120px; /* define width */
font-size: smaller;
font-family: sans-serif;
}
#bttn span { border:1px solid #000; }
#bttn #c {padding:1px 0;}
#bttn span {display:block;}
#bttn a, #bttn a:visited { /* visited not distinguished */
display:block;
width:100%;
border:1px solid #000;
color: blue;
text-decoration:none;
}
#bttn #a {border-color:#dddddd #696969 #696969 #dddddd;}
#bttn #b {border-color:#d7d7d7 #898989 #898989 #d7d7d7;}
#bttn #c {border-color:#d0d0d0 #aaaaaa #aaaaaa #d0d0d0;}
#bttn a:hover {
background:#bababa;
color:#000;}
#bttn a:hover #a {
display:block;
border-color:#696969 #dddddd #dddddd #696969;
}
#bttn a:hover #b {
display: block;
border-color: #898989 #d6d6d6 #d7d7d7 #898989;
}
#bttn a:hover #c {
display: block;
border-color: #aaaaaa #d0d0d0 #d0d0d0 #aaaaaa;
padding:2px 0 0 0;
}
</style>
</head>
<body>

<div id="bttn">
<a href="target-test.html" title="">
<span id="a">
<span id="b">
<span id="c">
Target page
</span>
</span>
</span>
</a>
</div>

--

Haines Brown
KB1GRM
ET1(SS) U.S.S. Irex 482

[Toby Inkster]

Chris Morris wrote:

Use of numeric accesskey values mostly gets around the conflict
problem (though on my machine Alt-number is intercepted by the window
system and never even reaches the browser) but replaces it by the
accesskeys being entirely unintuitive.

I dunno. Is Alt+1 => home that unintuitive?

(OK, so maybe the other numbers can be, but there are fairly
well-established conventions on numeric access keys that can help.)

--
Toby A Inkster BSc (Hons) ARCS
Contact Me ~ http://tobyinkster.co.uk/contact

[Chris Morris]

Toby Inkster <us**********@tobyinkster.co.uk> writes:

Chris Morris wrote:

Use of numeric accesskey values mostly gets around the conflict
problem (though on my machine Alt-number is intercepted by the window
system and never even reaches the browser) but replaces it by the
accesskeys being entirely unintuitive.
I dunno. Is Alt+1 => home that unintuitive?

It's "Switch to Heading browsing mode" in IBM Home Page Reader.
(OK, so maybe the other numbers can be, but there are fairly
well-established conventions on numeric access keys that can help.)

The problem with these conventions is that they aren't all that
generally applicable [1]. There's also several separate ones, and Home=1
is the only universal one. (List accesskeys => 0 seems common, though)

[1] UK gov convention has '7' as complaints procedure. Outside of
government is it really necessary to take an access key for that
*separate* to the contact form, the FAQ page, and the help page?

--
Chris