VoiceOverスクリーンリーダーが適切な数のラジオボタンで動作するようにする方法

Question

次のラジオボタングループ上のAppleのiPhone用スクリーンリーダーVoiceOverを使用するときは、"Nominal、ラジオボタン、チェックしない1/1 "。適切な数の選択肢を反映させるために、「公称、ラジオボタン、チェックしない1/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の"から行くために原因を上の任意のアイデア？
• ボーナスポイントの場合、VoiceOverを幸せにしてインデントを維持する方法について考えていただけますか？

Answer 1

問題は「表示：ブロック」のようです。 VoiceOverがこれに当たると、それは本質的に「壁」であるとみなされており、グループ内に他のラジオボタンがあることを検出するために、VoiceOverがそれを見ない。これを "display：inline-block"に変更してもこれを是正しながら、説明の左側にパディング/マージンを適用することができます。