Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
A description of kbd tag in HTML and why WhatsApp Web should use them

The World Wide Web lets websites use semantic markup to tell exactly what they mean. This lets in both the computer and the user in on the secret.

For eg in HTML you can say:

Did the dog <em>really</em> eat your homework?

where the <em>really</em> part tells your browser that the “really” is emphasized. Your browser (Chrome/Firefox/..) will then showcase that emphasis as italics.

Did the dog really eat your homework?

If you were using a screen-reader, the screen-reader voiceover could change its intonation or inform you that the really was emphasized in the text.

Similarly, there is a way of telling the browser about Keyboard Shortcuts. Its called <kbd>. So if I were writing about common keyboard shortcuts, I could write:

Please press <kbd>Space</kbd> to jump

and the browser would understand that I am talking about pressing space the key, and not space the word. The browser can then provide this as hint to the user. You could use "Crouch" as a voice-command for the game, perhaps. This is important for accessibilty reasons, especially with screen-readers who could see this as a hint, and “learn” these keyboard shortcuts and provide them to the user on a voice-command for eg. You might be able to say: "Archive Chat", and the browser would press the approporiate shortcut.

WhatsApp Web instead puts these keyboard shortcuts in a HTML-soup (the screenshot in the tweet), which doesn't use <kbd> tags and makes it unreadable to the browser.

They both look kinda same to the user:

Space vs Space

but the latter is much more “meaningful”.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment