When using VoiceOver, Apple's screen reader for iPad, on the following radio button group, it reads them as, "Nominal, radio button, unchecked 1 of 1". I want it to read it as, "Nominal, radio button, unchecked 1 of 3", to reflect the proper number of choices.
.col-md-12 {
background-color: white;
padding: 1em;
margin: 1em;
}
input.radio-float {
float: left;
padding-right: 1em;
}
label.radio-float {
max-width: 24em;
padding-left: 1em;
color: maroon;
}
span.radio-float {
max-width: 24em;
padding-left: 2em;
color: gray;
display: block;
}
<div class="col-md-12 form-inline">
<fieldset id="FilterLevel">
<legend>Please choose a filter level</legend>
<input class="radio-float" id="FilterLow" name="FilterLevel" required="required" type="radio" value="LOW">
<label for="FilterLow" class="radio-float">Nominal:</label>
<br>
<span class="radio-float">This level will catch most, but not all incoming spam. It is the safest selection if you are concerned about legitimate mail being inadvertently intercepted.</span>
<br>
<input checked="checked" class="radio-float" id="FilterMedium" name="FilterLevel" type="radio" value="MEDIUM">
<label for="FilterMedium" class="radio-float">Aggressive:</label>
<br>
<span class="radio-float">More spam will be caught. There is a slight chance that legitimate mail may be blocked.</span>
<br>
<input class="radio-float" id="FilterHigh" name="FilterLevel" type="radio" value="HIGH">
<label for="FilterHigh" class="radio-float">Very Aggressive:</label>
<br>
<span class="radio-float">This level should catch almost all spam. However, there is an increased risk that legitimate mail may be blocked. Use with care.</span>
</fieldset>
</div>
The problem is that everything I try to keep the <span class="radio-float">
indented seem to break VoiceOver's ability to identify the number of options in the radio group.
The problem seems to be the "display: block". When VoiceOver hits this, it's seeing it as essentially a "wall", and doesn't look past it to detect that there are other radio buttons in the group. Changing this to "display: inline-block" however remedies this, and still allows you to apply your padding/margin to the left of the description.