a11y：输入字段，包裹在 div 中，附加 "by id" 到标签

Question

我有一个时间选择器组件，由两个单独的 input 字段组成，它们一起工作以营造出合二为一的错觉。

骨架是这样的

<div> {/* component container */}

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

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

"regular" 用户一切正常，但可访问性很差。

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

我想做的是以下内容，我希望社区能就这是否对屏幕真正有用提出意见（哈！）reader。

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

这适用于 reader 屏幕吗？

Answer 1

没有，for attribute must point at a labelable element:

The for attribute may be specified to indicate a form control with which the caption is to be associated. If the attribute is specified, the attribute’s value must be the ID of a labelable element in the same Document as the label element.

labelable elements分别是：input、button、select、textarea、fieldset、output、object, meter, progress, label, img.

我会这样组织它：

<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>

a11y：输入字段，包裹在 div 中，附加 "by id" 到标签

a11y: Input fields, wrapped in a div, attached "by id" to a label

html

label

accessibility

screen-readers