ラジオボタンのコンプライアンス、IEとChromeの位置問題

Question

視覚障害のあるユーザーがラジオボタンにアクセスできるようにする必要があります。現在、スクリーンリーダーはラジオボタンのすべてのラベルと値を正しくピックアップしています。しかし、それはラジオボタンの位置を読み取っていません。例えば

：「二日は」クロームで選択されている場合は

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

（この1つはあるが、唯一のクロムに正しく位置を読み込む例を動作します）。スクリーンリーダーは「発送方法を選択：2日間のラジオボタンがチェックされました2/5」と表示されます。

しかし、IEスクリーンリーダーでは、「リストボックス2日間ラジオボタンがチェックされている」と表示されます。

ここで本当の問題があります。ラジオボタンのラベルと値を生成するディレクティブがあります。 ng-repeatディレクティブを使用してDOMにロードされます。 各反復でdivが入力要素の間に挿入されています。そのため、ジョーズはポジションを拾っていない。

以下はHTMLの一部です。

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

そしてここでは、レンダリングされたコンテンツです：

<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：正しく両方のIE 11とクロムの選択/アクティブボタンの位置を含むラジオボタンを読み取るためにJAWSスクリーン・リーダーを作る方法。

ありがとうございます。

UPDATE：role属性に「radio」値を追加すると、chromeでは問題が修正されますが、IEではラベルが表示されません。私がIEに集中すれば、スクリーンリーダーにラジオボタンの位置を読み取らせることは可能でしょうか？

Answer 1

これはブラウザによって異なります。あなたは気にしないでください。

ここで問題はあなたのコードでもJAWSでもありません。 Internet ExplorerがアクセシビリティAPIを実装する方法です。

IEは、アクセシビリティAPIに対して選択された要素の位置をアナウンスしません。これは単なる実装であり、コードを変更してもInternet Explorerがスクリーンリーダーと通信する方法には何の影響もありません。