ARIA -LABEL不能使用复选框

我正在使用JAWS读取ARIA-LABEL复选框。该复选框的不透明度为0.基本上，我们显示的是另一个标签，而不是复选框，以获得复选框的自定义外观。我们捕获点击隐藏复选框并显示标签，将其显示为填充颜色的复选框，一个检查的符号。当我们点击复选框与它后面的比较标签一起ARIA -LABEL不能使用复选框

点击被捕获。（捕捉的跨度click事件，其中有复选框和标签两者）

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

来源

2017-03-08 namrata

我不知道你正在使用的语言，但显然，在input的id不匹配label标签的for属性，根据您的代码：

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

你可以很容易地围住input标签在你label：

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

来源

2017-03-08 11:50:15 Adam

我正在使用Angular 2 – namrata

@namrata我认为我的答案仍然可以，然后（纠正一个错字：咏叹调标签必须在控件上） – Adam

认沽ŧ他控制在aria-label本身，而不在<label>元素。

来源

2017-03-08 15:54:13 aardrian

ARIA -LABEL不能使用复选框

回答

相关问题