text类型input元素关联label相关可访问性报错修复咨询

报错原因 #

• 代码中使用了aria-labelledby="searchLabel"属性，但页面上不存在id="searchLabel"的元素，导致可访问性检测工具找不到对应的关联标签，触发「缺少关联label」报错
• 即使存在对应id的元素，如果该元素没有实际文本内容，也会触发「label中无文本」报错

修复方案 #

方案1：显式添加关联label（最推荐） #

直接添加带文本的label元素，通过for属性和input的id关联，同时匹配你之前写的aria-labelledby指向的id，兼容性最好，点击label还能自动聚焦输入框，提升普通用户的操作便利性：

<label for="s" id="searchLabel">搜索</label>
<input aria-labelledby="searchLabel" type="text" name="s" id="s" value="" placeholder="Search" />

方案2：视觉隐藏label（适合不想在页面展示label的场景） #

如果不需要label在页面可见，可以用屏幕阅读器专用的隐藏类隐藏label，不会影响辅助设备识别：
首先定义通用的屏幕阅读器隐藏样式：

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

然后在HTML中使用：

<label for="s" id="searchLabel" class="sr-only">搜索</label>
<input aria-labelledby="searchLabel" type="text" name="s" id="s" value="" placeholder="Search" />

方案3：使用aria-label直接声明标签（无需额外label元素） #

如果不想添加额外的DOM元素，可以直接去掉aria-labelledby，换成aria-label属性直接声明输入框的可访问名称：

<input aria-label="搜索" type="text" name="s" id="s" value="" placeholder="Search" />

注意：该方案兼容性略差于显式label方案，且不支持点击label聚焦输入框的交互效果

额外注意 #

不要依赖placeholder属性替代label，用户输入内容后placeholder会消失，且部分老旧辅助设备不会读取placeholder内容，容易导致上下文丢失。

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