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)
2 Answers
The <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!
-
3I suppose that, as with other subjective style-related things, consistency is more important than the actual style choice you make. Commented Jun 21, 2018 at 21:56
-
2
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 <kbd> element
represents a span of inline text denoting textual user input from a keyboard, voice input, or any other text entry device
(emphasis mine)
according to MDN. If you prefer WHATWG, its page about the element is similar, if drier.
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> to
The
<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.
<kbd>. If the thin appearance of click is bothersome in the overall appearance of the post consider a bold click<mouse>left</mouse>and<mouse>right</mouse>(or similar) that inserts something like 🖰 or 🖱️ but with the left/right button being the only shaded part. When I have to write SOPs I often add this (taken from Windows' system tray when using mousekeys) to screenshots in order to show where to left-click. Edit: something like [this would work too.]