ARIA: aria-label 属性

描述

有时，元素的默认可访问名称缺失，或者可访问名称不能准确描述元素的内容，并且 DOM 中没有可见的内容可以与该对象关联以赋予其含义。这类元素的常见示例是包含 SVG 图标但没有文本的按钮。

在不属于禁止列表、没有可访问名称或可访问名称不准确，并且 DOM 中没有可以通过 aria-labelledby 属性引用的可见内容的情况下，可以使用 aria-label 属性来定义一个字符串，该字符串用于为设置了该属性的交互式元素提供标签。这为该元素提供了一个可访问名称。

下面的代码展示了如何使用 aria-label 属性为 <button> 元素提供可访问名称。本例中的按钮包含一个 SVG 图形并且缺少文本内容，这使得 aria-label 对于屏幕阅读器用户理解其功能（在本例中是“关闭”）至关重要。

html

<button aria-label="Close">
  <svg
    aria-hidden="true"
    focusable="false"
    width="17"
    height="17"
    xmlns="http://www.w3.org/2000/svg">
    <path
      d="m.967 14.217 5.8-5.906-5.765-5.89L3.094.26l5.783 5.888L14.66.26l2.092 2.162-5.766 5.889 5.801 5.906-2.092 2.162-5.818-5.924-5.818 5.924-2.092-2.162Z"
      fill="black" />
  </svg>
</button>

document.querySelector("button").addEventListener("click", () => {
  myDialog.close();
});

注意： aria-label 用于命名隐式或显式角色不允许命名的元素。如果存在可供元素引用并从中获取名称的可见标签，则强烈建议优先使用 aria-labelledby 而非 aria-label。

大多数内容的可访问名称由其直接包含元素文本内容生成。可访问名称也可以通过某些属性或关联元素创建。

默认情况下，按钮的可访问名称是开口和闭合的 <button> 标签之间的内容，图像的可访问名称是其 alt 属性的内容，表单输入的 <label> 元素的可访问名称是关联的 <label> 元素的内容。

如果以上选项均不可用，或者默认可访问名称不合适，请使用 aria-label 属性为元素定义可访问名称。

注意： 虽然 aria-label 可用于任何可以具有可访问名称的元素，但实际上它仅支持交互式元素、部件、地标、图像和 iframe。

使用 aria-label 时，您还需要考虑 aria-labelledby。

aria-label 可用于无法看到可用于标记元素的文本的情况。如果存在可见的文本来标记元素，请改用 aria-labelledby。
aria-label 的目的与 aria-labelledby 相同。两者都为元素提供可访问名称。如果您无法引用可见名称，可以使用 aria-label 为用户提供可识别的可访问名称。如果 DOM 中存在标签文本且有可能引用它以获得可接受的用户体验，请优先使用 aria-labelledby。不要在同一元素上同时使用两者，因为如果同时应用，aria-labelledby 将优先于 aria-label。

在使用 aria-label 时，请牢记以下附加准则：

aria-label 属性可与常规的、语义化的 HTML 元素一起使用；它不限于已分配 ARIA role 的元素。
不要“过度使用” aria-label。请记住，它主要用于辅助技术。要提供额外的说明或澄清 UI，请使用可见文本配合 aria-describedby 或 aria-description，而不是 aria-label。说明应该对所有用户可见，而不仅仅是对屏幕阅读器用户（或者最好是让您的 UI 更直观）。

注意： 由于 aria-label 的内容在辅助技术之外不显示，请考虑为所有用户提供可见的重要信息。
并非所有元素都可以提供可访问名称。aria-label 和 aria-labelledby 都不应与内联结构角色（如 code、term 和 emphasis）以及未映射到辅助功能 API 的角色（包括 none）一起使用。aria-label 属性适用于链接、视频、表单控件以及具有地标角色或部件角色的元素；当 DOM 中没有可见标签时，aria-label 提供可访问名称。
如果您为 <iframe> 分配了 title，为 <img> 定义了 alt 属性，或为 <input> 添加了 <label>，则不需要 aria-label。但是，如果存在 aria-label 属性，它将优先于 iframe 的 title、图像的 alt 或输入的 <label> 文本，作为该元素的可访问名称。