NoCharge

Tab through a sample board

Focus order demo

A sample grid where every control is a real button, focus is visible, and the Tab order follows the reading order. Learn what keyboard users need and how to check it.

Category: Accessibility

Bottom line: This demo is a small grid of real buttons with visible focus and predictable Tab order. It explains three checks — visible focus, logical order, no traps — and links to NoCharge's automated and manual accessibility tests. It is a teaching tool, not an audit.

Tab and see

A sample game board

Press Tab repeatedly. Focus moves left to right, top to bottom, and every control shows a visible outline. The status line below the grid announces the last control you reached.

Tab through the grid to follow the focus order.

  1. Visible focus: an outline identifies the focused control; do not suppress it without a visible alternative.
  2. Logical order: reading order is the tab order; no element jumps.
  3. No traps: both Tab and Shift+Tab can leave this sample grid; dialogs need separate exit checks.

How it works

These nine native buttons are written into the HTML in row order. Without positive tabindex values or a scripted focus trap, the browser's Tab sequence follows that document order. The small script updates the status when a button receives focus; it does not choose the next button.

Worked example

Focus Cell A1 and press Tab three times: focus visits A2, then A3, then B1. Shift+Tab from B1 returns to A3. Pressing Enter or Space activates the focused button but does not move to a new square or create a game score.

Continue past C3 to check that focus can leave the grid. The outline identifies the active control. This demo uses ordinary Tab order; a game with roving tabindex may instead expose one grid stop and use arrow keys internally.

What it cannot do

  • The demo observes its own buttons, not the focus order of another website, embedded frame, or browser extension.
  • A logical Tab sequence does not certify an accessible name, sufficient contrast, suitable target size, or compatibility with every screen reader.
  • There is no modal dialog here. Real dialogs need separate checks for initial focus, an available close action, and focus restoration.
  • Visual CSS rearrangement can differ from document order; this fixed example does not detect that problem in other layouts. No focus history is saved.

FAQ

What is focus order?

The sequence in which keyboard Tab moves through interactive elements. A logical focus order follows the visual and reading order so keyboard users can predict where focus goes next.

Why does this demo exist?

It shows a sample grid of controls with visible focus and a Tab-walkable order, and explains why "visible focus" is a hard requirement — no focus trap, no invisible focus, no color-only states.

Is this a real accessibility audit?

No. The demo is educational. The accessibility page and its test matrix describe the automated and manual checks NoCharge runs on game boards and tools.

What makes a keyboard trap?

A keyboard trap prevents users from moving focus away using standard keys or a clearly documented exit. A dialog may contain Tab while open, but it must offer a usable way to close and restore focus. This demo has no dialog.

Embed this tool

<iframe src="https://nocharge.net/tools/focus-order-demo/" width="400" height="560" title="NoCharge focus order demo"></iframe>
<p>Source: <a href="https://nocharge.net/tools/focus-order-demo/">NoCharge tool</a></p>

Next action

Try it with a game