When denoting a key combination, for example Ctrl+Shift+click, should click be shown as a button as well for better readability? (as such: Ctrl+Shift+click)
<kbd> indicator can be used for tons of things!
- not only keyboards:
Esc F1F2F3F4 F5F6F7F8 F9F10F11F12 Prnt Scrl Pse
` 1 2 3 4 5 6 7 8 9 0 - = Bks Ins HmePgUp
Tab Q W E R T Y U I O P [ ] Entr Del End PgDn
Caps A S D F G H J K L ; ' #
Shift \ Z X C V B N M , . / Shift ↑
Ctrl ❖ Alt Alt ❖ ≡ Ctrl ← ↓ →
- and individual keys like F1
- but also for buttons like OK, Retry, Cancel
- Key combinations like Ctrl+Alt
- menu items like System Settings (Yup, in Ubuntu that's a menu item!)
- so why not Ctrl+Alt+Left-Click?
Just ensure you're using a consistent UI methodology within the same Question or Answer!
tl;dr: I would avoid this unless you have a specific and strong reason for doing it.
The system suggested by Fabby in the accepted answer is commonly used in practice—even, admittedly, sometimes by me—but not strictly correct. It's based on the assumption that things wrapped in
<kbd> markup will look like buttons, together with an unwritten underlying rule that form trumps function.
To be technical, the
represents a span of inline text denoting textual user input from a keyboard, voice input, or any other text entry device
Now, I didn't learn this until I was in the middle of writing this answer, but in the HTML 5.2 spec, W3C actually does expand its definition of
<kbd>element represents user input (typically keyboard input, although it may also be used to represent other input, such as voice commands).
So, in fairness, representing a click this way may not be considered semantically wrong, depending on your spec, although it's still no good for menu items or pure decoration.
My main gripe here was originally about accessibility. People relying on markup to actually describe content are put at a disadvantage when semantically incorrect items are used. The W3C HTML5.2 spec diminishes that argument some, but it's still relying on users (and their assistive technologies) to be following the "right" spec.
Additionally, not all browsers/technologies may render a given element the same way. If someone is using a custom stylesheet (again, possibly an accessibility issue) or a text-based reader (uncommon, but not nonexistent), the intended message of a decorative
<kbd> use may not be communicated.