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

Question

当使用 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 识别单选组中选项数量的能力。

关于导致 VoiceOver 从 “1 of 1” 到 “1 of 3” 的任何想法？
加分的话，能不能想个办法既让VoiceOver开心又能保持缩进？

Answer 1

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

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

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

radio-button

voiceover

screen-readers