Arrow Keys Cross Pattern Kbd for React

Most keyboards have placed the arrow keys this way since the 1980s, so people recognize the shape before reading the arrows. It also shows that up and down share a column.

Symbols: ↑ ↓ ← → are shorter than Up or Left and read in any language. Add the key's name as visually hidden text if screen readers need it, since the arrow characters aren't always read as key names.

A small gap, gap-1 here, keeps the four keys reading as one cluster while separating the caps. Larger gaps break the T apart.

grid grid-cols-3 makes three columns, and the six children fill them in order: an empty div, ↑, an empty div on the first row, then ←, ↓, → on the second. w-fit keeps the grid as narrow as the keys.

Arrow keys for navigating interfaces, lists, maps and slides; WASD for games where the other hand is on the mouse. Many games accept both, and the WASD Gaming Keys example uses the same layout.

They read the characters, which some screen readers say as arrow names and others skip. The empty cells are silent. For a help panel, add visually hidden names like Up arrow inside each Kbd.