HTML for multiple radio groups with the same name - html

Question

What is the most accessible way to split a single radio form (same name) into groups? For example, choosing a time with the groups Today or Tomorrow?
Perhaps split them into two fieldsets?
<h3>Select a time and we'll give you a call</h3>
<form>
<fieldset>
<legend>Today</legend>
<input type="radio" name="phone" id="a" value="a"/>
<label for="a">9am</label>
<input type="radio" name="phone" id="b" value="b"/>
<label for="b">12pm</label>
<input type="radio" name="phone" id="c" value="c"/>
<label for="c">5pm</label>
</fieldset>
<fieldset>
<legend>Tomorrow</legend>
<input type="radio" name="phone" id="d" value="d"/>
<label for="d">9am</label>
<input type="radio" name="phone" id="e" value="e"/>
<label for="e">12pm</label>
<input type="radio" name="phone" id="f" value="f"/>
<label for="f">5pm</label>
</fieldset>
</form>

Answer 1

The best approach seems to be using multiple fieldsets and in this particular example we want to clarify the legends as Graham Ritchie suggested. VoiceOver repeats the legend on each radio so it was redundant to add it to the label as well.
<h3>Select a time and we'll give you a call</h3>
<form>
<fieldset>
<legend><span class="visually-hidden">Call me</span> Today</legend>
<input type="radio" name="phone" id="a" value="a"/>
<label for="a">9am</label>
<input type="radio" name="phone" id="b" value="b"/>
<label for="b">12pm</label>
</fieldset>
<fieldset>
<legend><span class="visually-hidden">Call me</span> Tomorrow</legend>
<input type="radio" name="phone" id="d" value="d"/>
<label for="d">9am</label>
<input type="radio" name="phone" id="e" value="e"/>
<label for="e">12pm</label>
</fieldset>
</form>

Answer 2

I updated the answer. Not sure you can do this with radio buttons but checkboxes and some javascript should do the trick.
function group1(e){
var id = e.target.id;
var boxes = document.getElementsByTagName('input');
for(let i=0;i<3;i++){
if (boxes[i].id != id)boxes[i].checked=false;
}
}
function group2(e){
var id = e.target.id;
var boxes = document.getElementsByTagName('input');
for(let i=3;i<6;i++){
if (boxes[i].id != id)boxes[i].checked=false;
}
}
<h3>Select a time and we'll give you a call</h3>
<form>
<fieldset>
<legend>Today</legend>
<input type="checkbox" name="phone[]" onClick='group1(event)' id="a" value="a"/>
<label for="a">9am</label>
<input type="checkbox" name="phone[]" onClick='group1(event)' id="b" value="b"/>
<label for="b">12pm</label>
<input type="checkbox" name="phone[]" onClick='group1(event)' id="c" value="c"/>
<label for="c">5pm</label>
</fieldset>
<fieldset>
<legend>Tomorrow</legend>
<input type="checkbox" name="phone[]" onClick='group2(event)' id="d" value="d"/>
<label for="d">9am</label>
<input type="checkbox" name="phone[]" onClick='group2(event)' id="e" value="e"/>
<label for="e">12pm</label>
<input type="checkbox" name="phone[]" onClick='group2(event)' id="f" value="f"/>
<label for="f">5pm</label>
</fieldset>
</form>