a11y：输入字段，包装在一个 div 中，将“按 id”附加到一个标签上答案

【问题标题】：a11y: Input fields, wrapped in a div, attached "by id" to a labela11y：输入字段，包装在一个 div 中，将“按 id”附加到一个标签上
【发布时间】：2017-10-18 14:41:53
【问题描述】：

我有一个时间选择器组件，由两个独立的 input 字段组成，它们共同作用以创造合一的错觉。

这就是骨架的样子

<div> {/* component container */}

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

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

对于“普通”用户来说一切都很好，但可访问性很差。

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

我正在考虑做以下事情，我希望社区能就这对屏幕阅读器是否真的有用提供意见（哈哈！）。

<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 附加标签。

这对屏幕阅读器有用吗？

【问题讨论】：

标签： html label accessibility screen-readers

【解决方案1】：

不，for attribute must point at a labelable element：

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

labelable elements 是：input、button、select、textarea、fieldset、output、object、meter、img、img、@987654336 @。

我会这样安排：

<label htmlFor="myUniqueId">Select time</label>
<fieldset id="myUniqueId"> {/* component container */}

    <div> {/* container for hours:minutes */}
        <input aria-label="hours" /> {/* hours */}
        <input aria-label="minutes" /> {/* minutes */}
    </div>

    <Select aria-label="AM or PM" /> {/* custom React component, for AM/PM */}
</fieldset>

【讨论】：