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)
