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

Question

我正在学习 HTML 中的辅助功能，我遇到了 Select 下拉列表 HTML 元素的示例，该元素旁边没有任何文本标签, 只是页面上方标题的上下文给出了这个元素包含的内容的想法，例如例如关于国家的部分的国家列表。

当运行一个无障碍工具在它上面时，该工具抱怨没有可访问的名称，我想知道是否有办法给它一个屏幕名称 reader 而无需如果设计中不需要添加标签？

Answer 1

简答

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

使设计工作

更长的答案

我们可以通过多种方式添加不可见的标签，一种方式是 aria-label:

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

</select>

或者我们可以在 <label> 元素上使用 visually hidden class，这样辅助技术仍然可以访问它（屏幕 readers 等），但不会在视觉上显示：

.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) 的人 reader，但对其他人没有帮助。

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

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

设计不应受到可见标签的影响（如果受到影响，您的平面设计师/UI 团队需要提高他们的水平！）它是可能会有额外的好处，人们会觉得表格更容易填写，从而增加转化率（因为您减少了“摩擦”）。

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

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

请注意使用 for="IDofSelect" 的显式标签，而不是隐式标签 - 您将 <select> 包装在 <label> 中，如 implicit labels can cause problems with voice software such as Dragon Naturally Speaking

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

How to make a Select element accessible if it has no label?

html

javascript

accessibility

简答

更长的答案