如何让 VoiceOver 屏幕 reader 与单选按钮一起工作,说出正确数量的选择

How to get VoiceOver screen reader to work with radio buttons, to say proper number of choices

当使用 VoiceOver 时,Apple 的屏幕 reader 对应 iPad,在下面的单选按钮组中,它们显示为 "Nominal, radio button, unchecked 1 of 1" .我希望它读作 "Nominal, radio button, unchecked 1 of 3",以反映正确的选择数量。

.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>

问题是,我尝试保持 <span class="radio-float"> 缩进的所有内容似乎都破坏了 VoiceOver 识别单选组中选项数量的能力。

问题似乎出在 "display: block"。当 VoiceOver 命中此按钮时,它实际上将其视为 "wall",并且不会越过它来检测组中是否还有其他单选按钮。然而,将其更改为 "display: inline-block" 可以解决此问题,并且仍然允许您将 padding/margin 应用到描述的左侧。