如果 Select 元素没有标签，如何使其可访问？

Question

我正在学习 HTML 中的可访问性，我遇到了一个选择下拉 HTML 元素的示例，该元素旁边没有任何文本标签，仅页面上方标题的上下文可以让您了解该元素的含义元素包含例如关于国家的部分中的国家列表。

在其上运行辅助工具时，该工具抱怨没有可访问的名称，我想知道是否有一种方法可以为屏幕阅读器指定名称，而无需添加标签（如果不希望将其作为屏幕阅读器的一部分）设计？

Answer 1

简答

这不是关于你想要什么作为设计的一部分，而是关于如何使页面可供尽可能多的人使用。您应该使设计与可见且正确关联的标签一起工作。

更长的答案

我们可以通过多种方法添加不可见的标签，其中一种方法是aria-label：

<select aria-label="label for the select">

</select>

或者我们可以在元素上使用视觉隐藏类<label>，以便辅助技术（屏幕阅读器等）仍然可以访问它，但不会在视觉上显示：

.visually-hidden { 
    border: 0;
    padding: 0;
    margin: 0;
    position: absolute !important;
    height: 1px; 
    width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */
    clip: rect(1px, 1px, 1px, 1px); /*maybe deprecated but we need to support legacy browsers */
    clip-path: inset(50%); /*modern browsers, clip-path works inwards from each corner*/
    white-space: nowrap; /* added line to stop words getting smushed together (as they go onto seperate lines and some screen readers do not understand line feeds as a space */
}

<label for="select1" class="visually-hidden">Label Text</label>
<select id="select1">
  <option>Option 1</option>
  <option>Option 2</option>
</select>

尽管这对使用屏幕阅读器等辅助技术 (AT) 的人有所帮助，但并不能帮助其他所有人。

• 如果有人有学习困难并且无法将您选择的选项与进一步的标题联系起来怎么办？
• 如果有人正在使用屏幕放大镜并且需要靠近控件的标签来了解它的用途怎么办？
• 如果有人使用自定义样式表来更改您的布局并且基于布局的关联不再起作用怎么办？

因此，答案是添加一个<label>可见且正确关联的内容，以便每个人都可以访问并更好地使用它。

设计不应该受到可见标签的影响（如果是这样，你的图形设计师/UI 团队需要改进他们的游戏！）并且它可能还有额外的好处，人们会觉得表格更容易填写，增加转化（当您减少“摩擦”时）。

所以最好的办法是添加一个可见的标签：

<label for="select1">The label</label>
<select id="select1">
  <option>Option 1</option>
  <option>Option 2</option>
</select>

请注意使用显式标签 using for="IDofSelect"，而不是隐式标签 - 将 包裹<select>在 a 中<label>，因为隐式标签可能会导致语音软件（例如 Dragon Naturally Talking）出现问题