ARIA -LABEL 在复选框上不起作用答案

【问题标题】：ARIA -LABEL not working on checkboxARIA -LABEL 在复选框上不起作用
【发布时间】：2017-03-08 07:52:57
【问题描述】：

我正在使用 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;
}

【问题讨论】：

标签： html accessibility wai-aria uiaccessibility

【解决方案1】：

将aria-label 放在控件本身上，而不是放在<label> 元素上。

【讨论】：

【解决方案2】：

我不知道您使用的是哪种语言，但显然，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>

【讨论】：

我正在使用 Angular 2
@namrata 我认为我的答案还可以（更正了一个错字：aria-label 必须在控件上）

【解决方案3】：

试试这个，在带有隐藏复选框的手风琴上为我工作

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

还要注意标签必须在控件之前。

【讨论】：