Forms 可达性：；表单标签错误，即使选择菜单中有相应的id

在Shopify网站上遇到与选择菜单相关的标签问题。Lighthouse和axe都声称这些标签存在错误，尽管我的标签id与select标记中的标签id相关。下面是一个示例页面：其中所有类型和功能菜单均未验证。我应该提到的是，除了有屏幕阅读器的人之外，我不希望文本出现在标签中。因此，在我的CSS中设置为display:none；的sr-only样式；。下面是其中一个例子：

<label for="c"><span class="sr-only">Select collection</span></label>
<select id="c">
  <option value="/collections/all" selected="selected">All types</option>
    <option value="/collections/types?q=" ></option>
    <option value="/collections/types?q=Litter" >Litter</option>
</select>

选择集合
所有类型
垃圾

虽然我认为可见标签提高了所有用户的可用性，但如果设计坚持不使用可见标签，那么为辅助技术提供标签的主要方法有两种：包括标签元素并通过CSS将其可见隐藏，或者将

aria label

属性添加到表单控件中

就CSS解决方案而言，根据我的经验，该解决方案运行良好：

{
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
}

---

如果您确信您的用户使用了，您可以

显示：无

将对辅助技术隐藏标签。您可能希望在视觉上隐藏该链接。@steveax感谢您提供该链接。那么你通常做什么？似乎否定文本缩进法是一种可行的方法，但我愿意听听你（或任何人）的方法。+1作为答案-尽管“如果设计坚持没有可见标签”-您应该补充一点，如果是这种情况，则设计需要改变，设计师需要意识到标签对于患有认知障碍（如焦虑症）的人至关重要。