Segmented control

A row of keys in a tray with one pressed down: pick a view, a range or a mode and it applies at once. It is the kit’s selector without the lamps, with sizes, a full-width row and icon segments.

Press a key, or Tab in and use the arrow keys: the pressed one is the choice. The readout follows.

• It is a radio group, so a screen reader hears its name, “Range, 2 of 4, Week, selected”, and the arrow keys, Tab and the wrap at each end are the browser’s.
• The tray carries role="radiogroup" and an aria-label, or is a fieldset with a legend; both name the group.
• The pressed key is shown by depth and a heavier ink, not colour; without the lamps there is no colour to lose in either finish.
• A segment with only an icon needs an aria-label on its input, and one that is unavailable stays in the row, disabled, so the choices do not shift.
• Focus is the kit’s 2px ring on the segment’s key, drawn from the hidden input.
• It changes something at once. A choice that needs a confirmation is a form with a key, not this.