如何让 VoiceOver 屏幕阅读器使用单选按钮，说出正确数量的选择

Question

当使用Apple的iPad屏幕阅读器VoiceOver时，在以下单选按钮组中，它会将它们读为"名义，单选按钮，未选中的1 of 1"。我希望它读作"名义，单选按钮，未选中的 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 识别单选组中选项数量的能力。

• 关于是什么原因导致 VoiceOver 从"1/1"变为"1/3"的任何想法？
• 对于奖励积分，你能想到一种方法让旁白开心并保持缩进吗？

Answer 1

问题似乎是"显示：块"。当 VoiceOver 点击此按钮时，它会将其视为一堵"墙"，并且不会越过它来检测组中还有其他单选按钮。但是，将其更改为"display：inline-block"可以解决此问题，并且仍然允许您在描述的左侧应用填充/边距。