<p>The World Wide Web lets websites use semantic markup to tell <em>exactly</em> what they mean. This lets in both the computer and the user in</p>
<p>For eg in HTML you can say:</p>
<pre><code class="language-html">Did the dog &lt;em&gt;really&lt;/em&gt; eat your homework?
</code></pre>
<p>where the <code>&lt;em&gt;really&lt;/em&gt;</code> part basically tells the computer that the “really” is emphasized. Your browser (Chrome/Firefox/..) will then showcase that emphasis as italics.</p>
<p>Did the dog <em>really</em> eat your homework?</p>
<p>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.</p>
<p>Similarly, there is a way of telling the browser about Keyboard Shortcuts. Its called <code>&lt;kbd&gt;</code>. So if I were writing about common keyboard shortcuts, I could write:</p>
<pre><code class="language-html">Please press &lt;kbd&gt;Space&lt;/kbd&gt; to jump
</code></pre>
<p>and the browser would understand that I am talking about the spacebar here. 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.</p>
<p>WhatsApp Web instead puts these keyboard shortcuts in a HTML-soup (the screenshot in the tweet), which doesn't use <code>&lt;kbd&gt;</code> tags and makes it unreadable to the browser.</p>
<p>They both look the same to the user:</p>
<p><code>Space</code> vs <kbd>Space</kbd></p>
<p>but the latter is much more “meaningful”.</p>