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

Question

我正在学习 HTML 中的可访问性，我遇到了一个 Select 下拉 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>

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

Answer 2

您可以使用aria-label属性。 还有更多信息在这里