无障碍扫描提示「标签无文本」：span内文本是否不被认可？如何修正？

关于「Grayscale」span是否为有效标签文本 #

带有「Grayscale」的span本身属于<label>的子内容，但无障碍扫描器判定无文本，大概率是两个原因：

• 你的accessibilityLabel类使用了会让内容脱离可访问树的样式（比如display: none、visibility: hidden），这类样式不仅隐藏视觉内容，还会让屏幕阅读器和扫描器忽略该文本；
• 部分扫描器对<label>内嵌套元素的文本识别不敏感，默认只识别<label>的直接文本节点。

修改方案 #

这里提供几种可靠的修改方式，任选其一即可：

方案1：移除嵌套span，直接保留文本 #

如果不需要用span单独控制文本样式，直接把文本作为<label>的直接子节点，扫描器和屏幕阅读器都能直接识别：

<label class="switch">
  Grayscale
  <input type="checkbox" id="AccessibilityToolsGrayscale" class="accessibilityToggles" data-cookieAndClass="accessibilityTools-grayscale">
  <span class="slider"></span>
</label>

方案2：保留span，同时给input添加aria-label #

如果必须保留span的样式，给复选框添加aria-label属性，直接为控件提供可访问文本，双重保障可访问性：

<label class="switch">
  <span class="accessibilityLabel">Grayscale</span>
  <input type="checkbox" id="AccessibilityToolsGrayscale" class="accessibilityToggles" data-cookieAndClass="accessibilityTools-grayscale" aria-label="Grayscale">
  <span class="slider"></span>
</label>

方案3：使用for属性显式关联label与input #

把label和input的关联关系显式化，即使嵌套结构存在，扫描器也能准确识别标签文本：

<label class="switch" for="AccessibilityToolsGrayscale">
  <span class="accessibilityLabel">Grayscale</span>
</label>
<input type="checkbox" id="AccessibilityToolsGrayscale" class="accessibilityToggles" data-cookieAndClass="accessibilityTools-grayscale">
<span class="slider"></span>

额外注意：如果需要视觉隐藏文本 #

如果你想让文本只对屏幕阅读器可见、视觉上隐藏，不要用display: none，改用专门的视觉隐藏类（样式如下），这类样式不会脱离可访问树：

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

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