diff --git a/files/zh-cn/web/accessibility/aria/attributes/aria-label/index.md b/files/zh-cn/web/accessibility/aria/attributes/aria-label/index.md index 028ac65a4f12c7..7cab9ce5f7083d 100644 --- a/files/zh-cn/web/accessibility/aria/attributes/aria-label/index.md +++ b/files/zh-cn/web/accessibility/aria/attributes/aria-label/index.md @@ -1,48 +1,106 @@ --- title: aria-label slug: Web/Accessibility/ARIA/Attributes/aria-label +l10n: + sourceCommit: 019ca5c9ce641bfa02825e1ba0444f35dfb646cc --- {{AccessibilitySidebar}} -aria-label 属性用来给当前元素加上的标签描述，接受字符串作为参数。是用不可视的方式给元素加 label（如果被描述元素存在真实的描述元素，可使用 [aria-labelledby](/zh-CN/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute) 属性作为来绑定描述元素和被描述元素来代替）。 +`aria-label` 属性定义了一个字符串值，用于为交互元素提供标签。 -aria-label 属性可以用在任何典型的 HTML 元素中，并不需要配合特定的 ARIA role 才能使用。 +## 描述 -### Value +有时，元素的默认{{Glossary("accessible_name", "无障碍名称")}}缺失，或者无障碍名称并不准确描述元素的内容，且在 DOM 中没有可见内容可以与对象相关联以赋予其含义。一个常见的示例是包含 SVG 或没有任何文本的图标字体的按钮。（查看这个关于[为什么不应该使用图标字体的视频](https://www.youtube.com/watch?v=9xXBYcWgCHA)。） -string +在交互元素没有无障碍名称或无障碍名称不准确，且在 DOM 中没有可见内容可以通过 [`aria-labelledby`](/zh-CN/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby) 属性引用时，可以使用 `aria-label` 属性定义一个字符串，为设置了该属性的交互元素提供标签。这样做为交互元素提供了无障碍名称。 -### 对于用户代理和辅助技术的可能影响 +以下代码示例演示了如何使用 `aria-label` 属性为 ` +``` -## 示例 +> **备注：** `aria-label` 用于交互元素，或当 DOM 中没有可见文本可以作为标签时，通过其他 ARIA 声明使元素变为交互元素的情况。 -#### 示例 1：多标签（Multiple Labels） +大多数内容都有一个从其直接包装元素的文本内容生成的无障碍名称。无障碍名称也可以通过某些属性或相关元素创建。 -在下面的示例中，按钮（button）元素被定义为一个关闭（close）按钮，按钮中间有一个“X”字符。辅助软件并不能知道 X 是什么意思，所以需要 aria-label 标签来为辅助设备提供相应的标识来告诉它这个 button 是 close 的作用。 +默认情况下，按钮的无障碍名称是在 {{HTMLElement('button')}} 标签之间的内容，图像的无障碍名称是其 [`alt`](/zh-CN/docs/Web/HTML/Element/img#alt) 属性的内容，表单输入的无障碍名称是相关的 {{HTMLElement('label')}} 元素的内容。 -```html - -``` +如果这些选项都不可用，或者如果默认的无障碍名称不合适，则使用 `aria-label` 属性定义元素的无障碍名称。 + +> **备注：** 虽然 `aria-label` 可以用于任何可以具有无障碍名称的元素，但在实践中，它仅支持交互元素、[小部件](/zh-CN/docs/Web/Accessibility/ARIA/Roles#2._小部件角色)、[地标](/zh-CN/docs/Web/Accessibility/ARIA/Roles#3._地标角色)、图像和 iframe。 + +在使用 `aria-label` 时，还需要考虑 [`aria-labelledby`](/zh-CN/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby)： + +- 在用于标注元素的文本*不*可见的情况下，可以使用 `aria-label`。如果存在可见文本用于标记元素，请改用 `aria-labelledby`。 +- `aria-label` 和 `aria-labelledby` 的目的相同。两者都为元素提供无障碍名称。如果元素没有可见名称可以引用，则使用 `aria-label` 为用户提供可识别的无障碍名称。如果 DOM 中存在标签文本，并且可以引用它以获得良好的用户体验，则最好使用 `aria-labelledby`。不要在同一元素上同时使用 `aria-labelledby` 和 `aria-label`，因为如果两者都应用，则 `aria-labelledby` 会优先于 `aria-label`。 + +在使用 `aria-label` 时，还需要考虑以下额外的准则： + +- `aria-label` 属性可以与常规的语义 HTML 元素一起使用；不限于指定了 [ARIA `role`](/zh-CN/docs/Web/Accessibility/ARIA/Roles) 的元素。 + +- 不要“滥用” `aria-label`。记住它主要是为辅助技术设计的。为了提供额外的指示或澄清 UI，请使用可见文本和 `aria-describedby` 或 [`aria-description`](/zh-CN/docs/Web/Accessibility/ARIA/Attributes/aria-description)，而不是 `aria-label`。说明应该对所有用户都无障碍，而不仅仅是屏幕阅读器用户（或者最好使你的 UI 更直观）。 + + > **备注：** 由于 `aria-label` 内容在辅助技术之外不显示，请考虑让所有用户看到重要信息。 + +- 并非所有元素都可以获得无障碍名称。`aria-label` 和 `aria-labelledby` 均不应该与 `code`、`term` 和 `emphasis` 这样的行内结构角色以及未映射到辅助技术 API 的角色（包括 `none`）一起使用。`aria-label` 属性适用于链接、视频、表单控件以及具有[地标角色](/zh-CN/docs/Web/Accessibility/ARIA/Roles#3._地标角色)或[小部件角色](/zh-CN/docs/Web/Accessibility/ARIA/Roles#2._小部件角色)的元素；当 DOM 中不存在可见标签时，`aria-label` 提供了无障碍名称。 + +- 如果为 {{HTMLElement('iframe')}} 分配了 `title`，为 {{HTMLElement('img')}} 定义了 `alt` 属性，或为 {{HTMLElement('input')}} 添加了 {{HTMLElement('label')}}，则不需要 `aria-label`。但是，如果存在 `aria-label` 属性，则它将优先于 iframe 的 `title`，图像的 `alt` 或 input 的 `