スクリーンリーダアナウンスのためのAngular2のアクセシビリティのためのaria-labelledbyの使い方

Question

Angular2アクセシビリティ問題： スクリーンリーダーNvdaツールのお知らせは以下の通りです。 従業員名ピーター要求する]チェックボックスが 従業員名ピーター要求する]チェックボックスをチェックしない、それは、第二の値のために期待される結果トムを公表すべきである

をチェックしない：チェックしない 従業員名トム要求]チェックボックスをオンにします。 これを修正するには？

employees array in component.ts file as below. 
employees= [ 
    { "id":1, "name": "Peter", "age":32}, 
    { "id":2, "name": "Tom", "age":28} 
    ]; 

component.html file as below: 
<div class="row"> 
     <div class="col-md-6"> 
      <label id="empName">Employee Name</label> 
     </div> 
     <div class="col-md-6"> 
      <label id="request">request</label> 
     </div> 
    </div> 

    <div *ngFor="let emp of employees; let i = index;" class="row"> 
     <div class="col-md-6"> 
      <span id="name">{{emp.name}}</span> 
     </div> 
     <div class="col-md-6"> 
      <input type="checkbox" aria-labelledby="empName name request" /> 
     </div> 
    </div> 

Answer 1

私はあなたの問題は、これが

<span id="name">{{emp.name}}</span> 

は、そのIDを覚えスパンラインが一つだけの要素ので、あなたが名前のidはそれが最初のものだけを参照することができます最初のスパンを割り当てること際属していると考えていますそれはピーターです。そのIDを再度使用すると、それは引き続きピーターを参照します。

これを修正するために、idをemp.name文字列にバインドするように範囲を変更しました。今度は、第1スパンのためのid = Peter、第2スパンのid = Tomがあります。

<span id="{{emp.name}}">{{emp.name}}</span> 

次に、チェックボックス入力を調整して、aria属性を文字列式にバインドする必要があります。連結はこれはあなたが捜しているアクセシビリティ効果が得られます

<input type="checkbox" [attr.aria-labelledby]="'empName ' + {{emp.name}} + ' request'"/> 

完了すると、文字列式にスペースを有するように、単一引用符の間にスペースを入れてください。 Nvdaツールでテストしました。

P.S これらの変更がid = nameのCSSに影響する場合は、名前をクラスとして維持することをお勧めします。そうすれば、各スパンは同じCSSにアクセスできます。

Answer 2

私は自分で解決策を見つけました。インデックスを使用して一意のIDを生成し、そのIDをaria-labelledbyに渡します。 このようなもの

{{}} emp.name [attr.aria-labelledbyの] = " '名 - ' + I"

おかげ