如何将两个元素联系起来进行访问？

Question

我的Web应用程序中有以下布局：

为了使其符合可访问性，是否需要将“Al Allbrook”与“请求者”标签联系起来？如果是这样，我们如何实现这一目标？

“Al Allbrook”是用户个人资料的链接。

如果它们不相关，屏幕阅读器怎么会知道“All Allbrook”是请求者？在“网站”的情况下也是如此。

Answer 1

除了@andy所说的，你还可以使用一个表。第一列可以有一个“请求者”表标题（<th scope =“col”>）。如果您不希望它“混乱”显示但仍然可供屏幕阅读器（SR）用户使用，则可以在视觉上隐藏标题本身。第二列是“联系信息”，最后一列是“站点”。这允许SR用户在表的行中导航，并且他们将在数据单元之前听到列标题。

当然，您可以结合使用这些技术。有一张桌子，并有链接的额外信息。我会推荐aria-labelledby而不是aria-describedby。虽然这两个属性都会导致SR（*）读取额外信息，但只有aria-labelledby属性才会显示在链接列表中。

（*）有些SR会直接宣布aria-describedby属性，但其他SR只会告诉您有与该链接相关的描述，您必须点击不同的快捷键才能听到描述。

两个属性的好处是元素可以将自身称为标签的一部分。一种递归标记，但“Accessible Name and Description Computation”规则处理递归。

如果计算名称，并且当前节点具有包含至少一个有效IDREF的aria-labelledby属性，并且当前节点不是aria-labelledby遍历的一部分，则按其发生的顺序处理其IDREF

可能更容易看到这样的例子。

<span id="comma" style="display:none">,</span>
...
<span id="requestor">Requestor</span>
<a href="#" id="myself" aria-labelledby="myself comma requestor">Al Allbrook</a>

有几点需要注意。

• 首先是链接在aria-labelledby属性中引用自身（'我'的id）。
• 其次是我使用屏幕阅读器的技巧，在标签中添加一个逗号“Al Allbrook，Requestor”，以便SR在阅读标签时略有停顿，“Al Allbrook <暂停>请求者”，而不是听到这个家伙的名字叫“Al Allbrook Requestor”。请注意，逗号本身具有display:none，因此它不可见，但由于逗号元素的ID列在aria-labelledby中，因此它仍将被使用。 （参见上述无障碍名称网址中的规则2A）
• 最后，我的示例使用<span>作为“Requestor”，但您可能希望它是一个标题（<h3>或<h4>或任何适合的级别）。

例如：

<span id="comma" style="display:none">,</span>
...
<h3 id="requestor">Requestor</h3>
<a href="#" id="myself" aria-labelledby="myself comma requestor">Al Allbrook</a>

如果您使用的是表格，那么所有这些代码都可以在<td>中。

Answer 2

使用屏幕阅读器浏览网站的方法有很多种，因此它取决于用户目前使用的导航模式。

1. 在DOM顺序中 在这种情况下，如果您的“请求者”位于DOM中的链接之前，则会在该人名之前读取它。此外，可以通过某些快捷方式读取链接之前和之后的文本。
2. 通过访问链接列表 屏幕阅读器用户可以请求不同的列表，f.e。所有标题的列表，或页面上所有链接的列表。

如果在直接导航到链接时读取“请求者”很重要，可以通过aria-describedby或aria-labelledby链接这两个元素。

或者，您可以再次将文本添加到链接本身，直观地隐藏。喜欢“Al Allbrook，Requester”。