如何关联两个元素的可访问性？

Question

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

要使其符合可访问性，是否需要将“ Al Allbrook”与“ Requester”标签相关联？如果是这样，我们如何实现呢？

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

如果他们不相关，那么精明的读者怎么会知道“ Al Allbrook”是请求者？对于“网站”也是一样。

Answer 1

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

当然，您可以组合使用这些技术。在链接中有一个表格和。我建议使用aria-labelledby而不是aria-describedby。虽然这两个属性都会使SR（*）读取额外的信息，但是在链接列表中仅显示aria-labelledby属性。

（*）某些SR会直接宣布aria-describedby属性，而其他SR只会告诉您该链接有一个描述，您必须按其他快捷键才能听到该描述。

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

  

如果计算名称，并且当前节点具有一个aria-labelledby属性，该属性至少包含一个有效的IDREF，并且当前节点尚不属于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属性（“ myself” ID）中引用自身。
• 第二个原因是，我在屏幕阅读器上使用了一个技巧，即在标签“ Al Allbrook，请求者”中添加逗号，以便SR在阅读标签“ Al Allbrook 请求者”时稍有停顿，而不是听到这个家伙的名字叫“ Al Allbrook Requestor”。请注意，逗号本身具有display:none，因此它不可见，但是由于逗号元素的ID在aria-labelledby中列出，因此仍将使用它。 （请参阅上方“可访问名称” URL中的规则2A）
• 最后，我的示例在“请求者”中使用了，但您可能希望它作为标题（

  或

  或任何合适的水平）。

例如：

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

然后，如果您使用的是表格，所有这些代码都可以放在中。

Answer 2

使用屏幕阅读器浏览网站的方式不同，因此取决于用户当前使用的导航模式。

1. 以DOM顺序

   在这种情况下，如果您的“请求者”在DOM中的链接之前，则该链接将在此人的名字之前被读取。另外，可以通过某些快捷方式读取链接前后的文本。

2. 通过访问链接列表

   屏幕阅读器用户可以请求不同的列表，例如所有标题的列表，或页面上所有链接的列表。

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

或者，您可以将文本再次添加到链接本身，以可视方式隐藏。就像“请求者Al Allbrook”一样。