Access keys not working properly on button elements

[apanthonypowell]

I am styling an html form so that all focusable elements are accesible using access keys.
As long as I am using input or select elements everything works fine but button elements are causing me problems.
The button elements work as far as moving focus to the desired elements but I can’t highlight the letter which is the access key.
A snippet of the code is shown below:

<input type="button" value="<b>C</b>alculate" name="Calculate" accesskey="C" onclick="calculatePay()">
                </fieldset>

The above is the best I can manage.
As an alterntaive to <b> I have also tried <u> and <strong>

[PaulOB]

@apanthonypowell

<input type="button" value="<b>C</b>alculate" name="Calculate" accesskey="C" onclick="calculatePay()">
                </fieldset>

You can’t use html in attributes.

You could use the button element which allows inlne tags and will do the same job.

<button type="button" name="Calculate" accesskey="C" onclick="calculatePay()">
  <b>C</b>alculate
</button>

Access keys are generally considered to make things worse according to MDN.

[apanthonypowell]

@PaulOB

<button type="button" name="Calculate" accesskey="C" onclick="calculatePay()">
  <b>C</b>alculate
</button>

Thanks Paul, that worked. Thank you