So erhalten Sie den VoiceOver-Bildschirmleser für die Arbeit mit Optionsfeldern, um die richtige Anzahl von Auswahlmöglichkeiten anzugeben

Question

Wenn Sie VoiceOver, den Bildschirmleser von Apple für iPad, in der folgenden Optionsfeldgruppe verwenden, lautet er: "Nominal, Optionsfeld, unkontrolliert 1 von 1 ". Ich möchte, dass es als "Nominal, Radio-Button, unchecked 1 von 3" zu lesen, um die richtige Anzahl von Auswahlmöglichkeiten zu reflektieren.

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

Das Problem ist, dass alles, was ich versuche, die <span class="radio-float"> eingekerbt zu halten scheinen Voiceover-Fähigkeit zu brechen, die Anzahl der Optionen in der Radiogruppe zu identifizieren.

• Irgendwelche Ideen auf, was bewirkt, dass Voiceover von "1 von 1"-"1 von 3" gehen?
• Können Sie für Bonuspunkte eine Möglichkeit finden, VoiceOver glücklich zu machen und die Einrückung beizubehalten?

Answer 1

Das Problem scheint die "Anzeige: Block" zu sein. Wenn VoiceOver dies trifft, sieht es im Wesentlichen als eine "Wand", und schaut nicht darüber hinaus, um zu erkennen, dass es andere Optionsfelder in der Gruppe gibt. Wenn Sie dies auf "display: inline-block" ändern, wird dies jedoch behoben und Sie können weiterhin Ihren Padding/Rand links neben der Beschreibung anwenden.