I have some HTML that creates a form enriched with access keys, combined with a stylesheet that adds the accesskey attribute value after it.
It works nicely for labels, but it does not work for radio buttons, check boxes and submit buttons. Alternatively I have tried some scripting that produces the same effect (without causing any exception).
Can someone explain why it is like that, and more importantly how to fix that (easily)? The solution does not have to be CSS (while actually being preferred); it could be JavaScript, too (e.g. like https://stackoverflow.com/a/7035862/6607497 or https://stackoverflow.com/a/32293101/6607497).
Sketch of my form code (the actual form has many more elements, but those follow the same pattern):
[accesskey]:after {
margin-left: 0.5em;
content: "[" attr(accesskey) "]";
font-family: monospace;
}<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de-DE" xml:lang="de-DE">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<form method="post" action="..." enctype="multipart/form-data" class="sf">
<fieldset class="sf-fset">
<legend class="sf-legend" accesskey="s">Suchkriterien</legend>
<table summary="Suchkriterien" class="sf">
<tbody>
<tr><td><label class="sf" for="srch-a-cn" accesskey="n">Name</label></td> <td><input type="text" name="srch-a-cn" size="30" maxlength="80" id="srch-a-cn" class="field" pattern=".*" /></td></tr>
<tr><td></td> <td><label class="sf" for="srch-match-cn" /><label><input type="radio" name="srch-match-cn" value="E" checked="checked" id="srch-match-cn-E" accesskey="1"/>genau</label> <label><input type="radio" name="srch-match-cn" value="M" id="srch-match-cn-M" accesskey="2"/>ähnlich</label></td></tr>
</tbody>
</table>
</fieldset>
<p />
<fieldset class="sf-fset"><legend class="sf-legend" accesskey="u">Suchmodus</legend>
<table class="sf" summary="Suchmodus">
<tbody>
<tr>
<td><label for="srch-mode" accesskey="m" class="sf-lab">Modus</label></td>
<td><label><input type="radio" name="srch-mode" value="telephoneNumber" checked="checked" id="srch-mode-telephoneNumber" accesskey="t" title="telephoneNumber"/>Telefon</label>
<label><input type="radio" name="srch-mode" value="pager" accesskey="f" title="pager" id="srch-mode-pager"/>Funk</label>
</td>
</tr>
</tbody>
</table>
</fieldset>
<p></p>
<input type="submit" name=".submit" value="Suchen" accesskey="c" />
</form>
</body>
</html>Here is a partial screenshot that shows how it looks (with some extra styling applied):
(Ignore the underlined character; that's from the script I tried to highlight the accesskey, too (and it fails in the same cases). The important thing is that the individual radio buttons don't show the accesskey)
This answer is not complete yet, but due to lack of anything better, I'm summarizing what I found out:
Radio Buttons (
<input type="radio">,CGI::radio_group())It seems to be a "feature" of
CGI.pmfrom perl 5.18.2 to create two nestedlabelelements for aradio_group:labelcovers the whole button group (all buttons in the group)labelcovers the actualinputelement and the text label, and it is repeated for every button in the group.Unfortunately any
accesskeyattribute as passed via-attributesis attached to theinputelement. Playing with Firefox' Inspector, I found out that accesskey is displayed properly if the attribute is attached to the innerlabelinstead.However I found no way to do that with
CGI.pm.Submit Button (
<input type="submit">)Also with experimenting I found out that I can wrap the submit button in a
label"for" the ID of the submit button, also moving theaccesskeyfrom theinputelement to thelabelelement. So theaccesskeyis being displayed and it still triggers the submit button.Solution
This is the HTML after JavaScript mangling (I copied the code from the browser as snippets won't allow DOM modifications it seems). Styling may be overly complicated, I know.
I deliberately chose digits for the upper radio group as I wanted to preserver some letters and the same label will repeat a few times. Also the form shown is reduced (other elements with an accesskey were omitted), so the choice of accesskeys may seem a bit odd without seeing the other elements.