4

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)

  • I would say that things that are not a key or keystroke shouldn't be marked with <kbd>. If the thin appearance of click is bothersome in the overall appearance of the post consider a bold click – rene Jun 21 '18 at 20:00
  • Perhaps there should be a <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.] – 3D1T0R Jun 21 '18 at 20:13
  • 3D1T0R - That seems like a great solution that shouldn't be difficult to implement, whereas manually adding a picture every time for readability can be a pain. I'll use your method until we get that on here! – SakoDaemon Jun 21 '18 at 20:15
  • 117 questions in the best-practices tag. Ew. Also, no close reason for opinion based. Ew. – Won't Jun 21 '18 at 20:16
  • Won't - Sorry... What? – SakoDaemon Jun 21 '18 at 20:18
  • related or perhaps even a dupe: meta.stackexchange.com/questions/215133/… – Kate Gregory Jun 22 '18 at 1:49
5

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!

  • 3
    I suppose that, as with other subjective style-related things, consistency is more important than the actual style choice you make. – SakoDaemon Jun 21 '18 at 21:56
  • 2
    On Arqade (Gaming SE), it's not uncommon for kbd to be used for controller buttons as well. Example – Robotnik Jun 22 '18 at 4:56
0

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.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .