Question

我创建了一个jQuery插件，它可以像这样转换表单HTML

<form>
    <input type="checkbox" id="checkbox_01" value="1"/>
    <label for="chexkbox_01"></label>
</form>

进入类似的形式：

<form>
    <input type="checkbox" id="checkbox_01" value="1" aria-hidden="true" />
    <span role="checkbox" id="aria-checkbox_01" aria-checked="false" tabindex="0"></span>
    <label for="aria-chexkbox_01"></label>
<form>

更改for属性以链接自定义元素是否有效？

Answer 1

没有

如果指定了属性，则属性的值必须是与标签元素在同一Document中的可标记元素的ID。

- https://www.w3.org/TR/html5/forms.html#attr-label-for

某些元素（并非所有元素都与形式相关）被归类为可标记元素。这些元素可以与标签元素相关联。

按钮输入（如果type属性不处于隐藏状态）keygen meter输出进度选择textarea

- https://www.w3.org/TR/html5/forms.html#category-label

跨度不是一个可标记的元素。

Answer 2

您只需要测试代码。

正如您所看到的，for属性失去了他的功能，如果您单击标签，则不会选中该复选框。

因此，for

中必须具有相同的id和label/input属性

＆＃13;

<input type="checkbox" id="checkbox_01" value="1" aria-hidden="true" />
<span role="checkbox" id="aria-checkbox_01" aria-checked="false" tabindex="0"></span>
<label for="aria-chexkbox_01">Click on label must check the checkbox</label>

＆＃13;

Answer 3

您必须使用aria-labelledby来实现您的目标：

<form>
<span role="checkbox" aria-labelledby="aria-label" aria-checked="false" tabindex="0"></span>
<span id="aria-label">Label</label>
</form>

label元素保留给某些原生表单元素：

button input（如果type属性未处于隐藏状态）keygen meter output progress select textarea

使用属性'for'链接自定义元素

3 个答案: