Individual radio button options are not programmatically associated to a group

What is the problem?

Radio buttons are unique controls because they are a container with a name, and children with both names and state. With focus on any part of a radio button control, all of its relevant information should be available, which is only possible if it is coded correctly.

While the same can apply to a checkbox group, checkboxes can also stand alone, in which case this isn’t required.

Radio button group is malformed

When the first radio button, from the code below, receives focus NVDA would read

Screen Reader Announces: radio button checked 1 of 2

This does not provide enough information to know what the question is being asked or what the current answer is.

See the Pen 1.3.1 radio groups - negative example by Thomas Logan (@EqualEntry) on CodePen.

Fix using HTML fieldset

Correct the above code by adding fieldset, legend, id, label and value tags appropriately.

See the Pen 1.3.1 radio groups - positive example by Thomas Logan (@EqualEntry) on CodePen.

Now NVDA correctly reads Screen Reader Announces: Do you like cookies? grouping
Yes radio button checked 1 of 2

H71: Providing a description for groups of form controls using fieldset and legend elements

Fix using grouping roles and aria-labelledby

Alternatively this could also be fixed using aria-labelledby.

See the Pen 1.3.1 radio groups - positive example - aria by Thomas Logan (@EqualEntry) on CodePen.

ARIA17: Using grouping roles to identify related form controls