0

I am using JAWS to read ARIA-LABEL for the checkbox. This checkbox has the opacity as 0. basically we are displaying another label instead of the checkbox to get a customized look for the checkbox.We capture the click on the hidden checkbox and display the label which displays it as a checkbox with filled color and a checked symbol.

Click is captured when we click the checkbox along with the Compare label following it.(trapping the click event on the span, which has the checkbox and the label both)

JAWS is not able to read the ARIA-LABEL ="Select to add the item to comparison list"

I am not sure what would be the correct location to place this label in order to be read 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;
}
namrata
  • 2,235
  • 5
  • 28
  • 35

3 Answers3

1

Put the aria-label on the control itself, not on the <label> element.

aardrian
  • 8,581
  • 30
  • 40
0

I don't know which language you are using, but apparently, the id of the input does not match the for attribute of the label tag, according to your code:

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

You can easily enclose the input tag in your label:

<label  [...]>&nbsp;Compare
     <input type="checkbox" aria-label="Select to add...">
</label>
Adam
  • 17,838
  • 32
  • 54
0

Try this, worked for me on an accordion with hidden checkbox

<label id="mylabel" aria-label="For check box"></label>
<input type="checkbox" id="chkAddCompare" aria-labelledby="mylabel" >

Also note the label must come BEFORE the control.

fkerrigan
  • 270
  • 2
  • 9