可访问性：将标签添加到 html 中的自定义输入元素答案

【问题标题】：accessibility: adding label to custom input element in html可访问性：将标签添加到 html 中的自定义输入元素
【发布时间】：2022-07-24 05:42:42
【问题描述】：

我们有一些可用于用户输入的自定义组件（CustomSelect、SegmentedControl、CustomCheckbox 等）。

在某些情况下，它们在内部使用语义 html 标记，如 radiogroup 或 select，但在某些情况下，标记完全使用 div 和 span 元素编写，并且使用 aria 属性提供可访问性。对于这样的实现，有没有办法将 label 元素与它们相关联，使它们的行为类似于原生表单输入 wrt 标签行为，或者更好的是，有没有办法让它们像原生表单输入一样对待？

想到的事情：

使用视觉隐藏的 html 表单元素，它以某种方式包装自定义，并以某种方式隐藏其语义。
字段集和图例在某些情况下可能有意义
使用 javascript 模仿标签功能

是否有任何现有的模式？

【问题讨论】：

您能解释一下为什么 aria-label、aria-labelledby 和 aria- describeby 不适合您的需求吗？谢谢。
因为它们不适合视觉用户。鼠标用户无法点击它们来关注自定义输入（或触发自定义输入的默认行为）
当您不使用语义 HTML 时，您总是需要 javascript。所以只需使用语义 HTML，这就是它存在的原因。
当然，我们在任何有意义的地方都使用语义 html，但单独的 html 并不能提供所有不同的输入类型或复杂的小部件。以 menubutton 模式为例。 HTML 没有符合此要求的本机菜单实现。 w3c.github.io/aria-practices/examples/menu-button/… 。在某些情况下，您绝对可以使用一些语义元素来解决这些限制，但这并不总是足够的

标签： javascript html reactjs forms accessibility

【解决方案1】：

你需要做三件事：

对其进行可视化编码，使标签看起来与您的自定义元素相关联，通常是因为标签在左侧，而元素在右侧（在 LTR 语言中）。
使用aria-labelledby 以编程方式将标签与元素相关联。
添加 javascript，以便鼠标单击标签将焦点移至元素。

请注意，您可以使用真正的<label> 元素，但它主要用于更易读的代码，因此很容易发现与元素关联的标签。您很可能 (*)不能使用 <label> 元素的 for 属性，因为指定的 ID 必须是“labelable element”，其定义为：

按钮
输入
米
输出
进展
选择
文本区域

(*) 如果您有一个具有form-associated 属性true 的自定义元素，您可以使用for 属性。 <label> 可用于“form-associated custom element”

见https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-face-example。

我之前没有创建过自定义表单元素，但文档听起来像真正的<label for="ID"> 可以与它一起使用，在这种情况下您不需要aria-labelledby 或javascript。

【讨论】：