mdn · yin1999 · Jul 23, 2024 · May 28, 2024 · Jul 23, 2024 · Jul 23, 2024
@@ -1,157 +1,114 @@
 ---
 title: aria-labelledby
 slug: Web/Accessibility/ARIA/Attributes/aria-labelledby
+l10n:
+  sourceCommit: 019ca5c9ce641bfa02825e1ba0444f35dfb646cc
 ---
 
 {{AccessibilitySidebar}}
 
-### 描述
+`aria-labelledby`属性标识了给其应用的元素（或多个元素）。
 
-[`aria-labelledby`](http://www.w3.org/TR/wai-aria/states_and_properties#aria-labelledby)属性用来表明某些元素的 id 是某一对象的标签。它被用来确定控件或控件组与它们标签之间的联系。使用诸如屏幕阅读器等辅助技术的用户通常使用 tabbing 在页面的不同区域间进行导航。如果一个输入元素、控件或控件组没有被分配一个 label 标签，那么屏幕阅读器就无法对其进行阅读。
+## 描述
+`aria-labelledby`属性使作者能够引用页面上的其他元素来定义无障碍名称。当使用不具有原生支持关联元素以提供无障碍名称的元素时，这非常有用。
 
-`aria-labelledby` 属性与[aria-describedby](/zh-CN/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute)属性非常相似：用一个标签描述某一对象的本质，可能会提供一些用户需要了解的额外信息。
+一些元素的[无障碍名称](https://w3c.github.io/accname/#dfn-accessible-name)来源于它们的内部内容。例如，{{HTMLElement('button')}}、{{HTMLElement('a')}} 或 {{HTMLElement('td')}} 的无障碍名称来自其开放和闭合标签之间的文本。其他元素，例如{{HTMLElement('textarea')}}、{{HTMLElement('fieldset')}} 和{{HTMLElement('table')}}，它们的无障碍名称来自相关元素的内容；对于这些元素，无障碍名称来自带有 `for` 属性的{{HTMLElement('label')}}、{{HTMLElement('legend')}} 和 {{HTMLElement('caption')}} 分别。
 
-`aria-labelledby` 属性并不仅仅用于表单元素，也可以用来分配静态文本给控件、元素组、面板组以及包含标题和定义等内容的区域等。下方的示例将会展示如何针对这些情况运用这一属性的更多信息。
+所有可交互元素都必须具有无障碍名称。当一个元素的无障碍名称需要使用来自 DOM 其他位置的内容时，可以使用 `aria-labelledby` 引用另一个元素来定义其无障碍名称。
 
-`aria-labelledby` 属性可以与 HTML 元素 label 联合使用，用于提高对于不支持 ARIA 技术的用户代理的兼容性。
+如果没有可以引用以创建无障碍名称的内容，则应使用 [`aria-label`](/zh-CN/docs/Web/Accessibility/ARIA/Attributes/aria-label) 属性。
 
-这一属性可以用于任何典型的 HTML 表单元素，不仅限于已分配 ARIA role 的元素。
+`aria-labelledby` 的目的与 `aria-label` 相同。它为交互式元素提供了一个可识别的、无障碍的名称。如果一个元素同时设置了这两个属性，那么 `aria-labelledby` 将被使用。`aria-labelledby` 优先于所有其他提供无障碍名称的方法，包括 `aria-label`、{{HTMLElement('label')}} 和元素的内部文本。
 
-### 值 Value
+`aria-labelledby` 和 [`aria-describedby`](/zh-CN/docs/Web/Accessibility/ARIA/Attributes/aria-describedby)属性都引用其他元素来计算文本替代方案。`aria-labelledby` 应引用提供给元素无障碍名称的简短文本。`aria-describedby` 用于引用提供描述的较长内容。如果 DOM 中没有为交互式元素提供适合作为无障碍名称的简短标签的元素，则使用 `aria-label` 来定义交互式元素的无障碍名称。
 
-一个以空格进行分割的元素 ID 列表。
+> **备注：** 虽然在美国英语中会假定该属性的拼写为 "labeledby"，但 "labelledby" 拼写已被确立，并且是辅助功能 API 中使用的拼写。
 
-### 对于用户代理和辅助技术的可能影响
-
-当 `aria-labelledby` 和 `aria-label` 都被使用时，用户代理在生成可访问的名称属性时将为 `aria-labelledby` 分配更高的优先级。
-
-**注意：** 由于不同的辅助技术对于这一技术的处理可能不同，以上提供的信息尽是诸多可能的一种，而非一般情况。
-
-### 示例
-
-#### 示例 1: 多标签 Mutiple Labels
-
-在下面的示例中，每个输入域都被它自身的独立标签以及其所在组的标签进行了标识：
-
-```html
-<div id="billing">Billing Address</div>
-
-<div>
-  <div id="name">Name</div>
-  <input type="text" aria-labelledby="name billing" />
-</div>
-<div>
-  <div id="address">Address</div>
-  <input type="text" aria-labelledby="address billing" />
-</div>
-```
-
-#### 示例 2: 联结的标题和区域 Associating Headings With Regions
-
-在下面的示例中，标题元素被与它们作为标题的内容联结在一起。注意，所参考的区域是包含标题元素的那个区域。
-
-```html
-<div role="main" aria-labelledby="foo">
-  <h1 id="foo">Wild fires spread across the San Diego Hills</h1>
-  Strong winds expand fires ignited by high temperatures ...
-</div>
-```
-
-#### 示例 3: 单选组 Radio Groups
-
-在下面的示例中，单选组[radiogroup](/zh-CN/Accessibility/ARIA/ARIA_Techniques/Using_the_radiogroup_role)的容器通过一个 aria-labeledby 属性与他的标签相联结：
-
-```html
-<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>
-```
-
-#### 示例 4: 对话框标签 Dialog Label
-
-在下面的示例中，标记对话框的标题元素通过 aria-labeledby 属性被引用
+以下示例使用 `aria-labelledby` 通过使用兄弟元素的文本内容为复选框输入提供一个无障碍名称：
 
 ```html
-<div role="dialog" aria-labelledby="dialogheader">
-  <h2 id="dialogheader">Choose a File</h2>
-  ... Dialog contents
-</div>
+<span
+  role="checkbox"
+  aria-checked="false"
+  tabindex="0"
+  aria-labelledby="tac"></span>
+<span id="tac">我同意遵守条款和条件。</span>
 ```
 
-#### 示例 5: 内联定义 Inline Definition
+请注意，虽然在这种情况下使用 `aria-labelledby` 与使用带有 `for` 属性的 HTML {{HTMLElement('label')}} 元素类似，但有一些非常重要的区别。aria-labelledby 属性仅定义无障碍名称。它不提供 `<label>` 的其他功能，例如点击标签元素激活与其关联的输入。这必须通过 JavaScript 添加回去。
 
-在下面的示例中，某一事物的被一个叙述性的自然流所描述的定义与这一事物本身通过**aria-labeledby**属性相联结：
+幸运的是，具有 `type="checkbox"` 的 HTML {{HTMLElement('input')}} 与原生 `<label>` 一起使用。如果可行，使用以下方法：
 
 ```html
-<p>
-  The doctor explained it had been a <dfn id="placebo">placebo</dfn>, or
-  <span role="definition" aria-labelledby="placebo">
-    an inert preparation prescribed more for the mental relief of the patient
-    than for its actual effect on a disorder.</span
-  >
-</p>
+<label for="tac">
+  <input id="tac" type="checkbox" name="terms-and-conditions" />
+  我同意遵守条款和条件。
+</label>
+<p><a href="tac.html">阅读我们的条款和条件</a>。</p>
 ```
 
-#### 示例 6: 定义列表 Definition Lists
-
-在下面的示例中，正式的定义列表中的定义与他们所定义的项目通过 aria-labeledby 属性相联结：
-
-```html
-<dl>
-  <dt id="anathema">anthema</dt>
-  <dd role="definition" aria-labelledby="anathema">
-    a ban or curse solemnly pronounced by ecclesiastical authority and
-    accompanied by excommunication
-  </dd>
-  <dd role="definition" aria-labelledby="anathema">
-    a vigorous denunciation : cursor
-  </dd>
-
-  <dt id="homily">homily</dt>
-  <dd role="definition" aria-labelledby="homily">a usually short sermon</dd>
-  <dd role="definition" aria-labelledby="homily">
-    a lecture or discourse on or of a moral theme
-  </dd>
-</dl>
-```
-
-#### 示例 7: 菜单
-
-在下面的示例中，一个[popup menu](/zh-CN/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-haspopup_attribute)通过 aria-labeledby 属性与其标签相联结：
-
-```html
-<div role="menubar">
-  <div role="menuitem" aria-haspopup="true" id="fileMenu">File</div>
-  <div role="menu" aria-labelledby="fileMenu">
-    <div role="menuitem">Open</div>
-    <div role="menuitem">Save</div>
-    <div role="menuitem">Save as ...</div>
-    ...
-  </div>
-  ...
-</div>
-```
-
-### 注意
-
-The most common _accessibility API_ mapping for a label is the _accessible name_ property
-
-### Used by ARIA roles
-
-all elements of the base markup
-
-### Related ARIA techniques
-
-- [Using the aria-label attribute](/zh-CN/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute)
-- [Using the aria-describedby attribute](/zh-CN/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute)
-
-### Compatibility
-
-TBD: Add support information for common UA and AT product combinations
-
-### Additional resources
-
-- [WAI-ARIA specification for aria-labelledby](http://www.w3.org/TR/wai-aria/states_and_properties#aria-labelledby)
+### 优势（和缺点）
+
+1. `aria-labelledby` 属性在浏览器计算无障碍名称时具有最高优先级。请注意，它会覆盖其他命名元素的方法，包括 `aria-label`、其他命名属性，甚至元素的内容。
+
+    ```html
+    <button aria-label="蓝色" aria-labelledby="color">红色</button>
+    <span id="color">黄色</span>
+    ```
+
+    在此示例中，无障碍名称为 "黄色"。
+
+2. `aria-labelledby` 属性的值采用由空格分隔的 ID 引用列表，这意味着你可以将多个元素合并为单个无障碍名称。你可以包含元素自身的 [`id`](/zh-CN/docs/Web/HTML/Global_attributes#id) 来引用其自身的内容。
+    ```html
+
+    <h2 id="attr" class="article-title">你需要了解的 13 个 ARIA 属性</h2>
+    <p>
+        有超过 50 个 ARIA 状态和属性，但其中 13 个突出…
+        <a href="13.html" id="rm13" aria-labelledby="rm13 attr">阅读更多<a>
+    </p>
+
+    ```
+    在此示例中，无障碍名称为 "阅读更多 你需要了解的 13 个 ARIA 属性"。
+3. `aria-labelledby` 属性值的顺序很重要。当 `aria-labelledby` 引用多个元素时，每个引用的元素的内容将按照它们在 `aria-labelledby` 值中的引用顺序进行组合。如果我们写成了 `aria-labelledby="attr rm13">`，无障碍名称将会是 "13 个 ARIA 属性，你需要了解，阅读更多"。
+4. `aria-labelledby` 属性会忽略其值中重复的 `id`。如果一个元素被多次引用，只有第一个引用会被处理。`aria-labelledby="attr attr rm13 rm13"> `将被视为 `aria-labelledby="attr rm13">`。
+5. `aria-labelledby` 属性的值可以包括不可见元素的内容。虽然你应该为辅助技术用户提供与所有其他用户相同的内容，但你可以在计算的名称字符串中包含具有 HTML [`hidden`](/zh-CN/docs/Web/HTML/Global_attributes#hidden) 属性、CSS [`display: none`](/zh-CN/docs/Web/CSS/display) 和 CSS [`visibility: hidden`](/zh-CN/docs/Web/CSS/visibility) 的元素的内容。
+6. `aria-labelledby` 属性会合并输入元素的值。如果值引用了一个 `<input>`，则表单控件的当前值将包含在计算的名称字符串中，并在值更新时改变。
+7. `aria-labelledby` 属性不能被链接。如果具有 `aria-labelledby` 的元素引用了另一个也具有 `aria-labelledby` 的元素，那么被引用元素上的 `aria-labelledby` 属性将被忽略。
+
+> **警告：** 因为计算具有 `aria-labelledby` 的元素的名称可能会很复杂，并引用隐藏的内容，所以使用辅助技术进行测试以确保用户看到的是预期的名称非常重要。
+
+## 值
+- ID 引用列表
+    - : 一个由一个或多个 ID 值组成的用空格分隔的列表，引用了标记当前元素的元素。
+## 关联角色
+几乎所有角色都使用 *除了* 那些无法由作者提供无障碍名称的角色。
+
+`aria-labelledby` 属性在以下情况下 **不**受支持：
+
+- [`code`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/structural_roles)
+- [`caption`](/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)
+
+## 规范
+
+{{Specifications}}
+
+## 参见
+
+- HTML {{HTMLElement('label')}} 元素
+- HTML {{HTMLElement('legend')}} 元素
+- HTML {{HTMLElement('caption')}} 元素
+- [`aria-label`](/zh-CN/docs/Web/Accessibility/ARIA/Attributes/aria-label)
+- [`aria-describedby`](/zh-CN/docs/Web/Accessibility/ARIA/Attributes/aria-describedby)