Question

我正在使用JAWS来读取ARIA-LABEL的复选框。此复选框的不透明度为0.基本上我们显示另一个标签而不是复选框以获得复选框的自定义外观。我们捕获隐藏复选框上的单击并显示标签，将其显示为带有填充颜色的复选框和检查符号。

当我们单击复选框以及随后的比较标签时，

点击被捕获。（捕获跨度上的点击事件，其中包含复选框和标签）

JAWS无法读取ARIA-LABEL =＆＃34;选择将项目添加到比较列表＆＃34;

我不确定放置此标签的正确位置是什么，以便阅读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

我不知道您使用的是哪种语言，但显然id的{{1}}与input代码的for属性不符，你的代码：

label

您可以轻松地将<input type="checkbox" id="chkAddCompare" > <label aria-label="Select to add..." [...] attr.for="Compare{{i}}" > Compare</label>标记括在input：

中

label

Answer 2

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

Answer 3

尝试一下，为我制作了带有隐藏复选框的手风琴

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

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

ARIA -LABEL没有处理复选框

3 个答案: