No interval selected
Button groups are switches that let the user toggle between multiple options. Semantically they are radio buttons, and in this example, we use radio buttons and simply provide CSS to make them look like buttons. No JavaScript is used to implement the button group. This pattern is usually used when the number of options is limited. For a larger set of options, a select list or an auto-complete input is more common.
Though the <fieldset> element is generally semantically correct for a group of form controls
like this one, it also has other benefits as well. For instance, it is possible to disable the group by
disabling the fieldset rather than the individual controls.
In terms of accessibility, grouped controls are expected to represent a single tab stop, and arrow keys are used to navigate between the members of the group. When using radio buttons, we do not need to do anything specifically to meet this requirement as radio groups work that way out of the box.
We style the legend as a form control label, even though it is not clickable and does not focus the control. This information sets the context for the radio buttons and influences the interpretation of the "y" letter. If the group can be understood to mean a time interval without this extra information and there is a need to save extra UI space, we would hide the legend visually.