Tab وShift+Tab وEnter وSpace: المفاتيح الأساسية

Lots of people never touch a mouse. They drive the whole web with the keyboard, so every control you build must work with keys alone. ⌨️

The single most important key is Tab. Each press jumps focus to the next interactive thing: a link, button, or form field.

Pressed something too fast? Shift+Tab walks focus backward to the previous control, so users can always step back where they came from.

When focus lands on a link, Enter activates it. It is the keyboard's version of clicking that anchor to go somewhere new.

A real button is special: it fires on both Enter and Space. That dual support is something you get for free from the native element.

On a checkbox or radio, Space is the toggle key. Tab to it, press Space, and the checked state flips on or off.

Here is the gift: native links, buttons, and inputs respond to these keys automatically. You do not wire any of it up yourself.

Build a fake button from a div and Tab skips right past it. Plain divs and spans are invisible to keyboard users.

Open any page and press Tab a few times. Watch the highlight hop from control to control. That is exactly the path a keyboard user takes.

Within a set of radio buttons, the arrow keys move between options, while Tab jumps the whole group at once. Different keys, different jobs.

Users carry these habits everywhere, so honor them. A control that ignores Enter or Space simply feels broken to a keyboard user.

Think about how each key behaves on a native control.

You learned the keyboard basics: Tab and Shift+Tab to move, Enter to follow links, and Enter or Space to fire buttons. Native elements deliver it all for free. ✅