It seems people are not using <kbd>
correctly, and its keyboard-like rendering is wrong too.
For HTML5 (as used on these sites and its mobile theme) the editor's draft at w3.org currently states:
The
kbd
element represents user input (typically keyboard input, although it may also be used to represent other input, such as voice commands).When the
kbd
element is nested inside asamp
element, it represents the input as it was echoed by the system.When the
kbd
element contains asamp
element, it represents input based on system output, for example invoking a menu item.When the
kbd
element is nested inside anotherkbd
element, it represents an actual key or other single unit of input as appropriate for the input mechanism.
So note the nested <kbd><kbd>...</kbd></kbd>
in their HTML5 examples:
Here the
kbd
element is used to indicate keys to press:<p>To make George eat an apple, press <kbd><kbd>Shift</kbd>+<kbd>F3</kbd></kbd> </p>
In this second example, the user is told to pick a particular menu item. The outer
kbd
element marks up a block of input, with the innerkbd
elements representing each individual step of the input, and thesamp
elements inside them indicating that the steps are input based on something being displayed by the system, in this case menu labels:<p>To make George eat an apple, select <kbd><kbd><samp>File</samp></kbd>|<kbd><samp>Eat Apple...</samp></kbd></kbd> </p>
Such precision isn't necessary; the following is equally fine:
<p>To make George eat an apple, select <kbd>File | Eat Apple...</kbd> </p>
When people adhere to the above on these sites, this is what we see:
To make George eat an apple, press Shift+F3
To make George eat an apple, select File|Eat Apple...
To make George eat an apple, select File | Eat Apple...
(Screen captures of the regular site for MSO, Ask Different, mobile.)
I know someone could fix the CSS for that. But that would still not make people use <kbd>
in the recommended way. So, I'd say:
If screen readers somehow benefit from using
<kbd>
(even if used in the wrong way) then at least use a different rendering for regular and mobile browsers. Even monospace would be better, I feel:To make George eat an apple, press
Shift
+F3
To make George eat an apple, select
File | Eat Apple...
If screen readers don't benefit at all, then just ban
<kbd>
.
Let the downvoting commence! ;-)
<img alt=...>
attributes, and try not to abuse<sup>
for footnotes too often. (No, I am not saying I am a Saint myself!) To me, not using<kbd>
the wrong way (unless that truly helps some users), falls into that same category. That's all!