ARIA-LABEL arbeitet nicht an Checkbox

Question

Ich benutze JAWS zum Lesen von ARIA-Label für das Kontrollkästchen. Dieses Kontrollkästchen hat die Deckkraft als 0. Grundsätzlich zeigen wir ein anderes Etikett anstelle des Kontrollkästchens an, um ein individuelles Aussehen für das Kontrollkästchen zu erhalten. Wir erfassen den Klick auf das ausgeblendete Kontrollkästchen und zeigen das Etikett an, das es als Kontrollkästchen mit gefüllter Farbe anzeigt ein geprüftes Symbol.

Click aufgenommen wird, wenn wir das Kontrollkästchen klicken zusammen mit dem Etikett vergleichen danach. (Auf der Spanne das Click-Ereignis Trapping, die das Kontrollkästchen und das Etikett sowohl hat)

JAWS nicht in der Lage ist, die ARIA zu lesen -LABEL = "Wählen Sie, um den Artikel zur Vergleichsliste hinzuzufügen"

Ich bin mir nicht sicher, was wäre der richtige Ort, um dieses Etikett zu platzieren, um JAWS gelesen zu werden.

<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

Ich weiß nicht, welche Sprache Sie verwenden, aber anscheinend hat der id des input nicht übereinstimmen das for Attribut des label Tag, nach Ihren Code:

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

Sie

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

Answer 2

Put t: kann leicht den input Tag in Ihrem label umschließen Er aria-label auf der Steuerung selbst, nicht auf dem <label> Element.