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

Question

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

在其上运行可访问性工具时，该工具提示没有可访问的名称，我想知道是否有一种方法可以为屏幕阅读器命名，而无需添加标签，如果不需要的话设计的一部分？

Answer 1

简答

这不是关于您想要作为设计的一部分的内容，而是关于使页面可供尽可能多的人使用的原因。您应该使用可见且正确关联的标签进行设计。

更长的答案

有一些方法可以添加不可见的标签，其中一种方法是 aria-label :

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

</select>

或者我们可以使用 visually hidden class在 <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> ，如 implicit labels can cause problems with voice software such as Dragon Naturally Speaking