能否用SVG的title标签作为输入标签？PageSpeed可访问性咨询

翻译后的问题 #

我们网站的PageSpeed Insights提示报错“表单元素未关联标签”，目前使用的相关代码如下：

<input id="input-1" type="checkbox">
<label for="input-1">
  <svg>
    <title>This is the label text</title>
    <!-- rest of svg -->
  </svg>
</label>

请问该写法是否具备足够的可访问性？（我了解无文本的SVG图标对视障用户并非最优方案，但这并非PageSpeed的报错原因）

核心结论 #

原写法的关联逻辑是正确的，但不算具备足够的可访问性，且会触发PageSpeed报错，原因如下：

• PageSpeed的检测逻辑会校验label内是否包含可被识别的文本节点，仅依赖SVG的<title>标签无法被其判定为有效的标签文本，因此抛出“表单元素未关联标签”的错误。
• 从可访问性角度，部分屏幕阅读器不会将SVG内部的<title>作为label的关联文本读取，导致视障用户无法获取该表单元素的用途说明。

修复方案 #

要同时解决PageSpeed报错和提升可访问性，推荐两种方式：

方式1：给input添加aria-label属性 #

直接在input上明确标注标签文本，无需修改label结构：

<input id="input-1" type="checkbox" aria-label="This is the label text">
<label for="input-1">
  <svg>
    <title>This is the label text</title>
    <!-- rest of svg -->
  </svg>
</label>

方式2：在label内添加视觉隐藏的文本节点 #

通过CSS将文本隐藏，但保留其可被辅助设备识别的属性：

<label for="input-1">
  <svg>
    <title>This is the label text</title>
    <!-- rest of svg -->
  </svg>
  <span class="visually-hidden">This is the label text</span>
</label>

对应的视觉隐藏CSS：

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

内容的提问来源于stack exchange，提问作者Peter