Skip to content

Playing Chain without a mouse

Every key the board listens for, what a screen reader hears on each move, how the theme toggle behaves, and the three places the keyboard support stops.

By LeonidPublished 7 min read

This is what the board does, taken from the code that runs it rather than from what we would like it to do. Where something is missing, it says so — a shortcut you are told about that does not work is worse than one you were never promised. The rules are on their own page; this one is only about the controls.

Getting to the board

The first thing Tab reaches on every page is a "Skip to content" link. It is invisible until it takes focus, and it jumps past the header to the main region, which is where the board lives on the daily page. From there, Tab moves forward through the page in the order it reads.

The header holds the site name, the navigation, and the theme button. Below 640px wide the navigation collapses into an "Open menu" button that opens a dialog with the same links; the dialog traps focus, Escape closes it, and choosing a link closes it too. The current page is marked, so a screen reader says "current page" on the link you are already on.

The hand is one tab stop

The five or six tiles are a toolbar, and a toolbar takes one Tab stop, not five. Tab once from the top of the board and you are on a tile; Tab again and you have left the hand entirely and landed on Undo. This is the toolbar pattern from the ARIA authoring practices, and it exists so that a keyboard player is never made to press Tab six times to reach the last tile.

Inside the hand:

  • Right arrow and Down arrow move to the next tile. Left arrow and Up arrow move to the previous one. Both wrap: right from the last tile lands on the first.
  • Home goes to the first tile, End to the last.
  • Enter or Space plays the tile that has focus. The tiles are ordinary buttons, so this is the browser's own behaviour and not something the board reimplements.

The tab stop remembers where you were. If you leave the hand and come back, focus returns to the tile you last had, not to the first one.

The number keys

Each tile answers to its position: 1 plays the first tile, 2 the second, and so on up to 6 on hard days, which are the only days that deal six. Each tile also advertises its own number to assistive technology, so a screen reader can read the shortcut along with the tile's name. Once you can see the answer, a solved day is three to five keystrokes.

One thing to know, because it is easy to trip over: the number keys and Backspace are handled by the board itself, so they only work while focus is inside the board. If you have tabbed up to a header link, or clicked in the page background, or come back to the tab after switching away, pressing 3 does nothing at all. Tab until you are on a tile — or on Undo, Reset or Show result, which are also inside the board — and the keys work again. There is no global key handler, which is deliberate: it means Chain never swallows a key you meant for the browser.

Modifier combinations are left alone for the same reason. Ctrl+1, Alt+2 and ⌘1 pass straight through to the browser, so switching tabs still switches tabs.

Undo, reset and the try counter

Backspace takes back the last move, from anywhere inside the board. The Undo button announces Backspace as its shortcut, so you will hear it if you land on the button.

Reset, which returns the whole chain to the start number, has a button but no keyboard shortcut. You reach it with Tab. That is a real gap rather than a design decision, and it is worth knowing that Backspace pressed repeatedly does the same job one move at a time.

Neither undo nor reset costs anything. A try is counted only when a chain of the full length finishes on the wrong number, so backing out of a chain you can see is wrong is free. Both buttons report themselves as unavailable when there are no moves to take back, but they stay in the tab order rather than disappearing — nothing under your fingers moves around while you play.

What a screen reader hears

Every number on the board is labelled, so nothing is read as a bare digit:

  • The target reads as "Target: 160".
  • The running value reads as "Running value: 133".
  • The pips read as "2 of 3 moves" — the filled and hollow circles are decorative and hidden.
  • The clock reads as "Time: 1:52".

The tiles are named in words, not symbols. The glyph you see (+54, −28, ×5, ÷3, ) is hidden from the reader, and the accessible name is "Add 54", "Subtract 28", "Multiply by 5", "Divide by 3" and "Swap the digits". A tile you have already played is marked unavailable but stays focusable and stays in place, so the hand never reshuffles under you.

The chain itself is a live ordered list labelled "The chain so far". Each accepted move appends one item, so what you hear after a move is only the new step — "then 133" — rather than the whole chain read again from the start. If you want the whole chain, it is a list, so your screen reader's own list navigation will walk it.

Refusals and misses come through one status line under the value. It carries the numbers you are looking at:

  • ÷3 would leave 7.33 — Chain only allows whole numbers.
  • +84 would take you to 10,050 — the chain stays between 0 and 9,999.
  • Swapping 44 gives 44 — a swap has to change the number.
  • That tile is spent. Undo brings it back.
  • Not 160 — the chain ended on 170. Back to 79. Try 2.

A spent tile is worth pressing on purpose if you have lost track: because it is marked unavailable rather than switched off, it still takes the keypress, and the status line tells you it is spent instead of doing nothing.

One honest limitation here. The status line is a single region that is replaced, so two identical refusals in a row may only be announced once — press ÷3 twice on the same value and most screen readers will treat the unchanged text as nothing new. If a keypress seems to produce silence, that is usually what happened: the move was refused for the same reason as last time.

Finishing the day

The moment the last tile lands on the target, the result dialog opens and takes focus. It is a real dialog: focus is trapped inside it, Escape closes it, and closing returns focus to the "Show result" button that replaced Undo and Reset on the board — so you are never dropped back at the top of the page. Inside are your tries, your time, your streak and a "Copy result" button; the button's label changes to "Copied" and that change is announced, so you get confirmation without a toast appearing and stealing the next Escape.

Dark, light, and reduced motion

Dark is the default. The theme button sits in the header on every page, it is a real button of at least 44 by 44 pixels, and its name says what pressing it will do — "Switch to light mode" or "Switch to dark mode" — rather than naming the state it is in. Until you press it, the site follows your operating system's setting and changes with it; once you press it, your choice is remembered in this browser and the system setting is no longer consulted.

There is exactly one animation on the site: when a chain closes on the target, the trail ticks into place one step at a time. If your system asks for reduced motion, that animation and the value cell's colour fade are both switched off. Nothing else on the board moves, and nothing auto-scrolls or auto-advances at any point.

At 360 pixels

The board is built for a small phone held in one hand. At 360px the hand becomes a three-column grid instead of a row, every tile is at least 44 by 44 pixels, and so are the theme button and the menu button — the minimum target size WCAG 2.2 asks for. The two rows that could overflow are built to wrap instead: the chain trail wraps onto a second line as it grows, and the row holding the pips, the clock and the buttons wraps under itself rather than pushing the board wider. Nothing in the layout is a fixed grid, which is also why a long chain on a hard day does not squeeze the tiles.

What is not there yet

Three things, plainly:

  1. Reset has no key. Undo does (Backspace); reset is Tab-and-press only.
  2. The board's keys are local to the board. Number keys and Backspace do nothing while focus is elsewhere on the page. There is no on-screen list of the shortcuts either — this page and the rules are where they are written down.
  3. The running value is not announced on its own. You hear the new step from the chain list ("then 133"); the big value cell is not a live region, deliberately, so that a single move does not produce two announcements of the same number.

If something here is wrong on your setup, or a shortcut you expect is missing, the feedback button in the corner of every page reaches us directly, and telling us which screen reader and browser you are using saves a round trip. The FAQ covers the non-accessibility questions — when the day changes, what is stored, and how to report a puzzle that looks wrong.

Sources

  1. WAI-ARIA Authoring Practices Guide — Toolbar pattern (www.w3.org)
  2. Understanding WCAG 2.2 — Keyboard (2.1.1) (www.w3.org)
  3. Understanding WCAG 2.2 — Target Size (Minimum) (2.5.8) (www.w3.org)

Written and maintained by Softaleo. Found a mistake? Use the feedback button on this page — corrections are fixed and dated above.