ARIA -LABELがチェックボックスで機能していない

Question

JAWSを使用してチェックボックスのARIA-LABELを読み取っています。 このチェックボックスの不透明度は0です。基本的に、チェックボックスの代わりに別のラベルを表示して、チェックボックスのカスタマイズされた外観を取得しています。隠しチェックボックスをクリックして、チェックされたシンボル我々はそれ以下の比較ラベルとともにチェックボックスをクリックしたときに

クリックがキャプチャされる。

JAWSはARIAを読み取ることができません（チェックボックスとの両方のラベルを持っているスパン上のクリックイベントを、トラップ） -LABEL = "比較リストに項目を追加する場合に選択してください"

JAWSを読むためには、このラベルを配置するための正しい場所がわかりません。

<span class="newCheckbox" tabindex="0" (keyup)="OnPressCompareClick(productDetails?.Id,$event)"> 
       <input type="checkbox" [value]="compareListCount" [checked]="isAddedInCompare(productDetails?.Id)" (change)="OnChangeUpdateProductCompareList(productDetails?.Id, $event)" (click)="onCompareClick($event)" 
         style="display:block;margin-top:14px;position:absolute;" role="checkbox" 
         id="chkAddCompare" > 
       <label aria-label="Select to add the item to comparison list" class="compare-defaultFont" attr.for="Compare{{i}}" >&nbsp;Compare</label> 
      </span>&nbsp;&nbsp; 


.newCheckbox input[type=checkbox] { 
display: none; 
opacity: 0; 
} 

.newCheckbox label:before { 
content: ""; 
text-shadow: 0px 0px 0px #fff; 
color: #fff; 
width: 14px; 
height: 14px; 
border: 1px solid #0075d5; 
background-color: #fff; 
border-radius: 0px; 
font-weight: 400 !important; 
font-family: 'Segoe UI Light', Tahoma, Geneva, Verdana, sans-serif !important; 
color: #555; 
font-size: 14px !important; 
display: inline-block; 
vertical-align: -2px; 
} 

input[type=checkbox]:checked + label:before { 
content: "\2713"; 
text-shadow: 0px 0px 0px #fff; 
font-size: 14px; 
color: #fff; 
text-align: left; 
width: 14px; 
height: 14px; 
line-height: 15px; 
border: 1px solid #0075d5; 
background-color: #0075d5; 
vertical-align: -2px; 
} 

Answer 1

私はあなたが使用している言語を知らないが、どうやら、inputのidはlabelタグのfor属性と一致していない、あなたのコードによると：

<input type="checkbox" id="chkAddCompare" > 
      <label aria-label="Select to add..." [...] attr.for="Compare{{i}}" >&nbsp;Compare</label> 

あなたは

<label [...]>&nbsp;Compare 
    <input type="checkbox" aria-label="Select to add..."> 
</label> 

Answer 2

プットT：簡単labelでinputタグを囲むことができます彼は<label>要素ではなく、コントロール自体のaria-labelです。