Question

有问题的锚标记是帮助用户输入自定义语言时动态呈现的示例。它们不能用作典型的超链接，并且不应该。

要深入解释，请考虑以下情形。

网站有一些用户输入，用于更改显示资源超链接的方式的语言：Thanks for joining! Checkout these guides to get started {{resources}}!

然后{{resources}}被替换为包含所选资源名称的超链接。然后呈现一个示例，向用户显示其外观。类似于以下内容：

<input id="welcome-language" />
<div class="language-preview">
  Thanks for joining! Checkout these guides to get started
  <a href="#faux-link" aria-label="example resource link">Membership Agreement</a>
  ,
  <a href="#faux-link" aria-label="example resource link">Quickstart Guide</a>
  , and
  <a href="#faux-link" aria-label="example resource link">Becoming a Rockstar (for power-users)</a>
  !
</div>

请注意，这些链接实际上并没有到任何地方，而且也不是故意的。

如何使它易于使用？仅添加aria-label就足够了吗？还有其他我可以/应该添加的属性吗？

Answer 1

对于屏幕阅读器用户，这些链接仍将被读取为“链接”，并且如果该用户被选中，则期望将其导航到某个页面。您需要其他信息，以使他们知道链接只是页面外观的“预览”。

我将保留href属性，以使链接变为“ https://github.com/googlesamples/oauth-apps-for-windows/tree/master/OAuthUniversalApp”，然后添加tabindex="0"以使它们可在键盘上聚焦（默认情况下，占位符链接不是交互式的，因此它们默认情况下不会获得键盘焦点。）

然后，我将通过aria-describedby添加一个描述，以使该链接的视觉标签能够被读取，另外还要注意该链接不是真实的。您的原始示例使用了aria-label，它将覆盖链接中的可见文本（“会员协议”）。屏幕阅读器用户将仅听到您的aria标签，“示例资源链接，链接”。

（旁注，您无需在标签中说出“链接”一词，因为屏幕阅读器会因为它是一个元素而宣布它是一个链接。这样做会导致“链接”将被宣布两次-一次是在标签中，一次是因为元素是）。

用aria-describedby指向的元素可以隐藏（display:none），以使其在屏幕上不可见。 “ placeholder links”描述了名称/描述的计算方式。第一步2A表示可以隐藏该元素。

所以您的最终代码可能如下所示：

<span id="dummy" style="display:none">example resource, link is not active</span>

<input id="welcome-language" />
<div class="language-preview">
  Thanks for joining! Checkout these guides to get started
  <a tabindex="0" aria-describedby="dummy">Membership Agreement</a>
  ,
  <a tabindex="0" aria-describedby="dummy">Quickstart Guide</a>
  , and
  <a tabindex="0" aria-describedby="dummy">Becoming a Rockstar (for power-users)</a>
  !
</div>

屏幕阅读器将宣布该链接为“会员协议，链接，示例资源，链接未激活”。

注意，默认情况下，某些屏幕阅读器不会读取aria-describedby属性。他们可能会说该元素还有一个额外的描述，然后按快捷键以听取描述。没关系。由屏幕阅读器决定如何显示aria-describedby属性。

呈现示例超链接的最便捷方法是什么？

1 个答案: