如何修复Sortsite检测出的WCAG错误“此表单控件标签或标题为空”

嘿，我懂你现在的困扰——明明加了隐藏label和title，Sortsite还是揪着这个WCAG错误不放对吧？别着急，咱们一步步来排查修复：

问题根源分析 #

你用display: none隐藏label的方式大概率是关键问题。很多无障碍检测工具（包括Sortsite）和部分屏幕阅读器会直接忽略display: none的元素，默认它们不属于页面可访问内容，所以即便你写了label内容，工具还是判定它“空白”。另外，title属性虽能提供描述，但WCAG更优先推荐通过<label>关联的方式，而且title本身在一些辅助技术里的支持并不稳定。

具体修复步骤 #

• 替换视觉隐藏的CSS方案：放弃display: none，改用专门为无障碍设计的“视觉隐藏但仍可被辅助技术识别”的样式。先创建一个CSS类：

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

  然后把你的label改成：

  <label class="sr-only" for="slide1">First slide</label>
  

  这个样式能让元素在视觉上完全消失，但依然会被屏幕阅读器和检测工具抓取到。

• 验证label与input的关联准确性：再仔细核对<label>的for属性值和<input>的id值，确保大小写、拼写完全一致——哪怕一个字母错了，关联就直接失效了。

• 优化title属性（可选）：如果要保留title，建议让它的描述和label内容保持一致，比如改成title="First slide"，避免信息冲突。不过核心还是确保label的关联有效，title只是辅助补充。

• 用辅助技术实际测试：修复后可以用NVDA（Windows）或VoiceOver（Mac）测试一下，看屏幕阅读器是否能正确读取这个单选按钮的标签内容，这比单纯依赖检测工具的结果更可靠。

最后再跑一遍检测 #

做完上面的步骤，重新用Sortsite扫描，应该就能解决这个“空白标签/标题”的错误了。

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