如何关联两个可访问性元素？
How to relate two elements for accessibility?
我的网络应用程序中有以下布局：
为了使其符合可访问性，是否需要将 "Al Allbrook" 与 "Requester" 标签相关联？如果可以，我们如何实现？
"Al Allbrook" 是 link 用户个人资料。
如果他们没有关系，srceen reader 怎么会知道 "Al Allbrook" 是请求者？ "Site".
的情况相同
使用屏幕浏览网站有多种方式reader，因此这取决于用户当前使用的导航模式。
在DOM顺序
在这种情况下，如果您的“请求者”在 DOM 中的 link 之前，它将被读到此人姓名之前。此外，link 前后的文本可以通过某些快捷方式阅读。
通过访问 link 的列表
有不同的列表屏幕 reader 用户可以请求，f.e。所有 headers 的列表，或页面上所有 link 的列表。
如果在直接导航至 link 时读取“请求者”对您来说很重要，您可以 link 通过 aria-describedby or aria-labelledby.[=13] 这两个元素=]
或者，您可以再次将文本添加到 link 本身，在视觉上隐藏。喜欢“Al Allbrook，请求者”。
除了@andy 所说的，您还可以使用 table。第一列可以有一个 "requestor" table 标题 (
)。如果您不想 "clutter" 显示但仍可用于屏幕 reader (SR) 用户，则可以在视觉上隐藏标题本身。第二列类似于 "contact info"，最后一列为 "site"。这允许 SR 用户在 table 的行中导航，他们将听到数据单元格之前的列标题。
当然，您可以结合使用这些技巧。有 table 和 有关于 link 的额外信息。我会推荐 aria-labelledby instead of aria-describedby。虽然这两个属性都会导致额外信息被 SR (*) 读取，但只有 aria-labelledby 属性会显示在 link 列表中。
(*) 有些 SR 直接宣布 aria-describedby 属性，但其他 SR 只会告诉您有与 link 关联的描述，您必须按不同的快捷键才能听到描述。
这两个属性的优点是元素可以将自身作为标签的一部分进行引用。一种递归标记，但“Accessible Name and Description Computation”规则处理递归。
if computing a name, and the current node has an aria-labelledby attribute that contains at least one valid IDREF, and the current node is not already part of an aria-labelledby traversal, process its IDREFs in the order they occur
看到这样的例子可能更容易。
<span id="comma" style="display:none">,</span>
...
<span id="requestor">Requestor</span>
<a href="#" id="myself" aria-labelledby="myself comma requestor">Al Allbrook</a>
有几点需要注意。
- 首先是 link 在
aria-labelledby 属性（'myself' id）中引用自身。
- 其次，我通过在标签 "Al Allbrook, Requestor" 中添加一个逗号来使用屏幕 readers 的技巧，以便 SR 在阅读标签时有轻微的停顿，"Al Allbrook <pause> Requestor"，而不是听起来好像这个人的名字是 "Al Allbrook Requestor"。请注意，逗号本身有
display:none，因此它不可见，但由于逗号元素的 ID 列在 aria-labelledby 中，它仍将被使用。 （参见上面可访问名称 url 中的规则 2A）
- 最后，我的示例为 "Requestor" 使用了 ，但您可能希望它成为标题（
或 或任何合适的级别）。
例如：
<span id="comma" style="display:none">,</span>
...
<h3 id="requestor">Requestor</h3>
<a href="#" id="myself" aria-labelledby="myself comma requestor">Al Allbrook</a>
如果您使用的是 table.
，则所有这些代码都可以放在 中
我的网络应用程序中有以下布局：
为了使其符合可访问性，是否需要将 "Al Allbrook" 与 "Requester" 标签相关联？如果可以，我们如何实现？
"Al Allbrook" 是 link 用户个人资料。
如果他们没有关系，srceen reader 怎么会知道 "Al Allbrook" 是请求者？ "Site".
的情况相同使用屏幕浏览网站有多种方式reader，因此这取决于用户当前使用的导航模式。
在DOM顺序
在这种情况下，如果您的“请求者”在 DOM 中的 link 之前，它将被读到此人姓名之前。此外，link 前后的文本可以通过某些快捷方式阅读。
通过访问 link 的列表
有不同的列表屏幕 reader 用户可以请求，f.e。所有 headers 的列表，或页面上所有 link 的列表。
如果在直接导航至 link 时读取“请求者”对您来说很重要，您可以 link 通过 aria-describedby or aria-labelledby.[=13] 这两个元素=]
或者，您可以再次将文本添加到 link 本身，在视觉上隐藏。喜欢“Al Allbrook，请求者”。
除了@andy 所说的，您还可以使用 table。第一列可以有一个 "requestor" table 标题 (
当然，您可以结合使用这些技巧。有 table 和 有关于 link 的额外信息。我会推荐 aria-labelledby instead of aria-describedby。虽然这两个属性都会导致额外信息被 SR (*) 读取，但只有 aria-labelledby 属性会显示在 link 列表中。
(*) 有些 SR 直接宣布 aria-describedby 属性，但其他 SR 只会告诉您有与 link 关联的描述，您必须按不同的快捷键才能听到描述。
这两个属性的优点是元素可以将自身作为标签的一部分进行引用。一种递归标记，但“Accessible Name and Description Computation”规则处理递归。
if computing a name, and the current node has an aria-labelledby attribute that contains at least one valid IDREF, and the current node is not already part of an aria-labelledby traversal, process its IDREFs in the order they occur
看到这样的例子可能更容易。
<span id="comma" style="display:none">,</span>
...
<span id="requestor">Requestor</span>
<a href="#" id="myself" aria-labelledby="myself comma requestor">Al Allbrook</a>
有几点需要注意。
- 首先是 link 在
aria-labelledby属性（'myself' id）中引用自身。 - 其次，我通过在标签 "Al Allbrook, Requestor" 中添加一个逗号来使用屏幕 readers 的技巧，以便 SR 在阅读标签时有轻微的停顿，"Al Allbrook <pause> Requestor"，而不是听起来好像这个人的名字是 "Al Allbrook Requestor"。请注意，逗号本身有
display:none，因此它不可见，但由于逗号元素的 ID 列在aria-labelledby中，它仍将被使用。 （参见上面可访问名称 url 中的规则 2A） - 最后，我的示例为 "Requestor" 使用了 ，但您可能希望它成为标题（
或
或任何合适的级别）。
例如：
<span id="comma" style="display:none">,</span>
...
<h3 id="requestor">Requestor</h3>
<a href="#" id="myself" aria-labelledby="myself comma requestor">Al Allbrook</a>
如果您使用的是 table.
，则所有这些代码都可以放在