无障碍标签简介

最初发布于a11ywithlindsey.com。如果您想观看屏幕阅读器如何解读这些内容的视频示例，它们就在源头！

上周，不少人觉得我那篇关于aria states 的博文很有帮助。这周我想继续探讨一下，一个我花了很长时间才理解的问题：标签。如何给事物贴标签？什么需要贴标签？各种标签方法之间有什么区别？

读完这篇文章后，您应该对所有标签有更深入的了解。

表单标签

缺少表单标签是我见过的最常见的可访问性错误之一。大多数人会这样做：

<form>
  <input type="search" placeholder="Search" />
</form>

我要为后面的人重复一遍：

占位符属性不足以为屏幕阅读器标记字段。

为了正确标记此元素，我们需要确保存在一个与输入关联的<label>元素。关联的方法是赋予元素一个，并将该值与标签上的某个属性匹配。<input>idfor

<form>
  <label for="search">Search</label>
  <input type="search" placeholder="Search" id="search" />
</form>

请注意，属性中的字符串与输入中的for字符串匹配。匹配这些字符串就是关联它们的方法！id

如果设计师给你一个模型，而你完全没有办法告诉他们在设计中添加标签，那么你很幸运。你可以添加一个visually-hidden或sr-only（仅限屏幕阅读器）类。我一直使用a11y 项目中的这个 CSS ：

.visually-hidden {
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px);
}

上述代码将变成这样：

<form>
  <label class="visually-hidden" for="search">Search</label>
  <input type="search" placeholder="Search" id="search" />
</form>

<select>非常简单，这也适用于元素。

在标签中嵌套输入

我也见过有人嵌套输入。嵌套输入不是我的首选方法，但如果我这样做：

<form>
  <label>
    Search:
    <input type="search" />
  </label>
</form>

此 HTML 代码有效，使用 Wave 工具时不会产生任何错误。但是，如果您需要隐藏标签，此代码会使视觉效果更加难以实现。因此，请根据您的需求选择合适的方法！

使用aria-label

声明一下，这是我最不喜欢的为屏幕阅读器添加标签的方式。我更喜欢用标记中已有的元素来标记。不过，有时这样做是必要的。有几次我发现这样做是必要的：

1. 我无法控制标记，只能用 JavaScript 修改 DOM。这比setAttribute()创建整个元素并附加到元素上要简单得多。
2. 我之前在 SVG 中工作，但无法添加<text>元素

使用方法aria-label是将字符串放在属性中。例如，我在 MDN 网站上找到了这个：

<svg
  class="icon icon-github"
  xmlns="http://www.w3.org/2000/svg"
  width="24"
  height="28"
  viewBox="0 0 24 28"
  aria-label="GitHub"
  role="img"
  focusable="false"
>
  <!-- all the children -->
</svg>

aria-label 属性值不需要与id其他元素的匹配。

aria-describedby和aria-labelledby

aria-describedbyaria-labelledby这两个属性听起来很像，所以花了一段时间才弄清楚。所以，让我们从字面意义上来分析一下。

标签就像标题一样，它们告诉你某个东西是什么。我们什么时候声明标题或标签：在元素之前。

让我们从MDN 文档中举出第三个例子。

<div id="radio_label">My radio label</div>
<ul role="radiogroup" aria-labelledby="radio_label">
  <li role="radio">Item #1</li>
  <li role="radio">Item #2</li>
  <li role="radio">Item #3</li>
</ul>

当我们使用 VoiceOver 导航到广播组时，它会读出“我的广播标签，广播组？”广播标签在告诉我们广播组之前就已经播报了。

让我们采用上面相同的标记并添加一个aria-describedby带有 div 的属性。

<div id="radio_label">My radio label</div>
<ul
  role="radiogroup"
  aria-labelledby="radio_label"
  aria-describedby="radio_desc"
>
  <li role="radio">Item #1</li>
  <li role="radio">Item #2</li>
  <li role="radio">Item #3</li>
</ul>
<div id="radio_desc">
  A bit more about this radio group. Here are some words.
</div>

在单选按钮组播报完毕后，VoiceOver 会显示“关于此单选按钮组的更多信息。这里有一些文字”。这是一个非常微妙的差别，在大多数情况下，它并不重要。

我们在这些属性中输入的字符串类似于上面的表单标签。我们希望aria-describedby或属性与我们希望屏幕阅读器读取的元素的aria-labelledby匹配。id

结论

希望我的文章能帮助你更好地理解无障碍标签这个令人困惑的世界！如果你有其他疑问，请在Twitter上或在下方评论区留言，告诉我你的想法。

另外，我有一个Patreon！如果你喜欢我的作品，可以考虑每月捐赠 1 美元。如果你捐赠 5 美元或更高，就可以为以后的博客文章投票！干杯！祝你一周愉快！