如何使一个选择元素可访问，如果它没有标签?

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>

注意，使用for="IDofSelect"时使用显式标签，而不是隐式标签——将<select>包装在<label>中，因为隐式标签可能会导致语音软件(如Dragon Naturally Speaking

)出现问题。