-
Notifications
You must be signed in to change notification settings - Fork 8.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[zh-cn]: update the translation of
aria-label (#20918)
Co-authored-by: Jason Ren <40999116+jasonren0403@users.noreply.github.com> Co-authored-by: A1lo <yin199909@aliyun.com>
- Loading branch information
3 people
authored
Jun 14, 2024
1 parent
3c1b758
commit 9cc322b
Showing
1 changed file
with
80 additions
and
22 deletions.
There are no files selected for viewing
102 changes: 80 additions & 22 deletions
102
files/zh-cn/web/accessibility/aria/attributes/aria-label/index.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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` 属性为 `<button>` 元素提供无障碍名称的示例。在这个示例中，按钮包含一个 SVG 图形并且缺乏文本内容，使得对于屏幕阅读器用户理解其功能（在本例中为“关闭”）而言，`aria-label` 是必不可少的。 | ||
|
|
||
| > **备注：** 由于辅助技术处理这一技术的差异导致选项信息可能不同。以上所提供的信息只是其中可能的一种，而非一般情况。 | ||
| ```html | ||
| <button aria-label="关闭" onclick="myDialog.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="#000" /> | ||
| </svg> | ||
| </button> | ||
| ``` | ||
|
|
||
| ## 示例 | ||
| > **备注：** `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 | ||
| <button aria-label="Close" onclick="myDialog.close()">X</button> | ||
| ``` | ||
| 如果这些选项都不可用，或者如果默认的无障碍名称不合适，则使用 `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 的 `<label>` 文本作为该元素的无障碍名称。 | ||
|
|
||
| ## 值 | ||
|
|
||
| - `<string>` | ||
| - : 一个文本字符串，将作为对象的无障碍名称。 | ||
|
|
||
| ### 说明 | ||
| ## 关联接口 | ||
|
|
||
| 最常见的对于标签的无障碍 API 就是可访问的 name 属性。 | ||
| - {{domxref("Element.ariaLabel")}} | ||
| - : [`ariaLabel`](/zh-CN/docs/Web/API/Element/ariaLabel) 属性是 {{domxref("Element")}} 接口的一部分，反映了 `aria-label` 属性的值。 | ||
| - {{domxref("ElementInternals.ariaLabel")}} | ||
| - : [`ariaLabel`](/zh-CN/docs/Web/API/Element/ariaLabel) 属性是 {{domxref("ElementInternals")}} 接口的一部分，反映了 `aria-label` 属性的值。 | ||
|
|
||
| ### ARIA roles 的使用 | ||
| ## 关联角色 | ||
|
|
||
| 基本标记中的全部元素。 | ||
| 几乎所有角色中都使用 `aria-label` 属性，**除了**不能由作者提供无障碍名称的角色。 | ||
|
|
||
| ### ARIA 相关技术 | ||
| aria-label 属性**不**受支持的角色有： | ||
|
|
||
| - [Using the aria-labelledby attribute](/zh-CN/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute) | ||
| - [`code`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/structural_roles) | ||
| - [`caption`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/structural_roles) | ||
| - [`definition`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/structural_roles) | ||
| - [`deletion`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/structural_roles) | ||
| - [`emphasis`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/structural_roles) | ||
| - [`generic`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/generic_role) | ||
| - [`insertion`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/structural_roles) | ||
| - [`mark`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/mark_role) | ||
| - [`paragraph`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/structural_roles) | ||
| - [`presentation`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/presentation_role) / [`none`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/none_role) | ||
| - [`strong`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/structural_roles) | ||
| - [`subscript`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/structural_roles) | ||
| - [`superscript`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/structural_roles) | ||
| - [`suggestion`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/suggestion_role) | ||
| - [`term`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/term_role) | ||
| - [`time`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/structural_roles) | ||
|
|
||
| ### 兼容性 | ||
| ## 规范 | ||
|
|
||
| 有待讨论：为通常的 UA 和 AT 产品组合提供支持信息。 | ||
| {{Specifications}} | ||
|
|
||
| ### 额外资源 | ||
| ## 参见 | ||
|
|
||
| - [WAI-ARIA specification for aria-label](http://www.w3.org/TR/wai-aria/states_and_properties#aria-label) | ||
| - {{HTMLElement('label')}} 元素 | ||
| - [`aria-description`](/zh-CN/docs/Web/Accessibility/ARIA/Attributes/aria-description) | ||
| - [`aria-labelledby`](/zh-CN/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby) | ||
| - MDN 博客中的[使用 HTML 地标角色来提高无障碍性](/en-US/blog/aria-accessibility-html-landmark-roles/)（2023） |