508 Einhaltung von Radio-Buttons, Position Problem auf IE und Chrome

Question

Ich muss die Radio-Schaltflächen für blinde Benutzer zugänglich machen. Momentan nimmt der Bildschirmleser alle Beschriftungen und Werte für die Optionsfelder korrekt auf. Aber es liest nicht die Position des Radioknopfes.

Zum Beispiel: (Dies ist funktioniert Beispiel, das die Position richtig, aber nur auf Chrom liest)

<fieldset> 
<legend>Choose a shipping method:</legend> 
<div role="radiogroup"> 
    <input id="overnight" type="radio" role="radio" name="shipping" value="overnight"> 
    <label for="overnight">Overnight</label> 
    <input id="twoday" type="radio" name="shipping" role="radio" value="twoday"> 
    <label for="twoday">Two day</label> 
    <input id="ground" type="radio" name="shipping" role="radio" value="ground"> 
    <label for="ground">Ground</label> 
    <input id="sky" type="radio" name="shipping" role="radio" value="sky"> 
    <label for="sky">sky</label> 
    <input id="never" type="radio" name="shipping" role="radio" value="never"> 
    <label for="never">Never hahahaha</label> 
</div> 
</fieldset> 

Wenn die „Zwei Tage“ auf Chrom ausgewählt ist. Bildschirmleser liest es als "Wählen Sie eine Versandart: Zwei-Tage-Radio-Button aktiviert. 2 von 5".

Aber auf IE Bildschirmleser liest es als "Listenfeld Zwei-Tage-Optionsfeld aktiviert".

Jetzt ist das eigentliche Problem hier. Ich habe eine Direktive, die die Beschriftungen und den Wert für die Optionsfelder generiert. Es wird mit der ng-repeat-Anweisung in das DOM geladen. Und mit jeder Iteration wird ein div zwischen den Eingabeelementen eingefügt. Aus diesem Grund nimmt Jaws die Position nicht an.

Unten ist die HTML teilweise.

<fieldset> 
       <legend class="sr-only">Source Types</legend> 
        <div class="form-inline" role="radiogroup"      > 
        <!--div for source identifiers radios--> 
         <div ng-repeat="sourceType in sourceTypes" class="form-group" role="radio"> 
           <input type="radio" 
             name="sourceType" 
             id='{{sourceType.typeId}}' 
             ng-value='sourceType.typeValue' 
             ng-model='formModel.sourceType' 
             ng-disabled="disableInputFields" 
             ng-change="changeSourceType(sourceType)"/> 
          <label for="{{sourceType.typeId}}"> 
           {{sourceType.typeLabel}} 
          </label> 
         </div> 
        </div> 
      </fieldset> 

Und hier ist der wiedergegebenen Inhalt:

<fieldset> 
       <legend class="sr-only">Source Types</legend> 
        <div class="form-inline" role="radiogroup"> 
        <!--div for source identifiers radios--> 
         <!-- ngRepeat: sourceType in sourceTypes --><div ng-repeat="sourceType in sourceTypes" class="form-group ng-scope" role="radio"> 
           <input type="radio" name="sourceType" id="secbtn" ng-value="sourceType.typeValue" ng-model="formModel.sourceType" ng-disabled="disableInputFields" ng-change="changeSourceType(sourceType)" class="ng-pristine ng-untouched ng-valid" value="sec"> 
          <label for="secbtn" class="ng-binding"> 
           Source Type 1 
          </label> 
         </div><!-- end ngRepeat: sourceType in sourceTypes --><div ng-repeat="sourceType in sourceTypes" class="form-group ng-scope" role="radio"> 
           <input type="radio" name="sourceType" id="generatedbtn" ng-value="sourceType.typeValue" ng-model="formModel.sourceType" ng-disabled="disableInputFields" ng-change="changeSourceType(sourceType)" class="ng-pristine ng-valid ng-touched" value="gen"> 
          <label for="generatedbtn" class="ng-binding"> 
           Source Type 2 
          </label> 
         </div><!-- end ngRepeat: sourceType in sourceTypes --> 
        </div> 
      </fieldset> 

TLDR: Wie Jaws Screen-Reader machen die Radio-Buttons richtig, einschließlich der Position der ausgewählten/aktiv-Taste auf beiden IE 11 und Chrom zu lesen .

Vielen Dank im Voraus.

UPDATE: Hinzufügen von Rollenattribut mit "Radio" Wert behebt das Problem auf Chrom, aber auf IE nicht die Etiketten abholen. Wenn ich mich nur auf IE konzentriere, ist es dann möglich, dass der Bildschirmleser die Position des Optionsfelds liest?

Answer 1

Dies ist Browser abhängig. Du solltest dich nicht kümmern.

Hier ist das Problem nicht Ihr Code, noch JAWS. So implementiert Internet Explorer die Accessibility-API.

IE gibt die Position des ausgewählten Elements für die Accessibility-API nicht bekannt. Es ist nur eine andere Implementierung, und die Änderung des Codes hat keine Auswirkungen auf die Art und Weise, wie Internet Explorer mit Screenreadern kommuniziert.