Cloth selector

A mode switch made of cloth. A row of tiles covered in stretched fabric stands in a machined tray, each with an icon and a word pressed into it. The chosen tile sits a touch lower and a lamp behind it lights its icon and word through the weave. Choose another and the first lamp fades down as the next comes up. Underneath it is a group of native radios, so it posts one value without any script.

Click a tile, or tab in and use the arrow keys, Home and End. The lamp fades from one tile to the next. Try the other lamps and the speaker cloth, then Save.

• It is native radios in a fieldset with role="radiogroup", named by its legend. Only the chosen radio is in the tab order, the arrow keys move and choose, a form posts one value and nothing needs a script.
• Each radio is named by its word, which is real text in the label. The icon and the two lit copies of the word are hidden from assistive technology, so the word is read once.
• Chosen is said three ways: the radio is checked, the tile sits lower, and it is lit. The light is never the only sign.
• Unlit words are more than 5:1 against the cloth in both finishes; the lit word has a shade under it so it reads over its own light.
• Focus is the kit’s 2px ring round the tile. Compact tiles are 44px square, and their word shows as a tooltip on hover and on keyboard focus.
• With reduced motion the light moves from one tile to the next at once, with no fade, and the tile drops without easing.