Access keys not working properly on button elements

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()">

Screenshot 2024-01-31 at 6.10.02 PM
The above is the best I can manage.
As an alterntaive to <b> I have also tried <u> and <strong>

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()">

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

1 Like

Thanks Paul, that worked. Thank you

1 Like