Question

我有一个时间选择器组件，由两个独立的input字段组成，这些字段协同工作以创建一个人的幻想。

这就是骨架的样子

<div> {/* component container */}

    <div> {/* container for hours:minutes */}
        <input /> {/* hours */}
        <input /> {/* minutes */}
    </div>

    <Select /> {/* custom React component, for AM/PM */}
</div>

一切都适用于“常规”用户，但可访问性很差。

由于代码库中已存在的限制，我很难简单地将所有内容包装在label中，这样可以解决我的问题。

我正在考虑做的是以下内容，我希望社群输入（ha！）来判断这对于屏幕阅读器是否真的有用。

<label htmlFor="myUniqueId">Here goes my label</label>
<div id="myUniqueId"> {/* component container */}

    <div> {/* container for hours:minutes */}
        <input /> {/* hours */}
        <input /> {/* minutes */}
    </div>

    <Select /> {/* custom React component, for AM/PM */}
</div>

所以基本上，在容器上设置ID而不是输入，然后使用htmlFor附加标签。

这适用于屏幕阅读器吗？

Answer 1

不，for attribute must point at a labelable element：

可以指定for属性以指示表单控件哪个标题是关联的。如果指定了属性，属性的值必须是。中可标记元素的ID 与标签元素相同的文档。

labelable elements包括：input，button，select，textarea，fieldset，output，{{1} }，object，meter，progress，label。

我会用这种方式构建它：

img

a11y：包含在div中的输入字段，“by id”附加到标签

1 个答案: