Arrow Keys with Icons Kbd for React

An arrow says which way faster than the words Up or Left and needs no translation. Icons also keep a consistent stroke and size, where arrow characters vary from font to font.

Each icon has aria-hidden so screen readers skip it, and a visually hidden span with the key's name, like Left arrow, gives them the text instead. Sighted users see only the icon.

A row, as here, fits inline hints like Use the arrows to move. For a controls panel, the inverted T of the Arrow Keys Cross Pattern example reads more like the keyboard.

If your app supports them, yes, in a separate group so people don't think they're pressed together. The Vim Navigation Keys example shows them.

Use the inverted T layout and label what each direction does, like Jump for up. Show WASD as an alternative if the game accepts it.

Moving between items in menus, lists, tabs, radio groups and toolbars, moving a slider, scrolling, and moving between slides or images. The components already handle them where the pattern calls for it.