辅助功能：;即使在选择菜单中具有相应的ID，表单标签错误

Question

在Shopify网站上出现与选择菜单标签有关的问题。尽管我在select标签中具有与该标签相关的标签ID，但是Lighthouse和ax都声称有关这些标签的错误。这是一个示例页面：https://boxiecat.com/collections/litter，其中所有类型和特色菜单均未生效。我应该提一下，除了具有屏幕阅读器的用户外，我不希望文本出现在标签中。因此，在我的CSS中设置为sr-only的样式显示为：none;。这是其中一个示例：

<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>

Answer 1

尽管我认为可见标签可以提高所有用户的可用性，但是如果设计坚持不使用可见标签，则可以通过两种主要方法来为辅助技术提供标签：包括标签元素并通过CSS可视地隐藏它们，或者添加[ C0]属性的形式控件。

对于CSS解决方案，根据我的经验，aria-label效果很好：

clip method detailed here

如果您确信用户使用

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

，则可以assistive technology that supports the aria-label property