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

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 就够了吗？我 could/should 添加了其他属性吗？

Answer 1

对于屏幕 reader 用户，links 仍将被读取为 "link"，如果选择了某个页面，用户将希望导航到该页面。您需要其他信息让他们知道 link 只是页面外观的 "preview"。

我会放弃 href 属性，使 link 变为“placeholder links”，然后添加 tabindex="0" 以便它们可通过键盘获得焦点（占位符 links 默认情况下不是交互式的，因此默认情况下它们不会接收键盘焦点）。

然后我会通过 aria-describedby 添加描述，以允许读取 link 的视觉标签，此外还要注意 link 不是真实的。您的原始示例使用 aria-label，它将覆盖 link ("Membership Agreement") 中的可见文本。屏幕 reader 用户只会听到您的 aria-label、"example resource link, link"。

(旁注， 没有必要在你的标签中说出 "link" 这个词，因为屏幕 reader 会宣布它是 link 因为它是一个元素。这样做会导致 "link" 被宣布两次 - 一次来自您的标签，一次是因为该元素是一个 ).

您用 aria-describedby 指向的元素可以隐藏 (display:none)，这样它就不会出现在屏幕上。 “Accessible Name and Description Computation 1.1”描述了 name/description 是如何计算的。第一步，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>

屏幕 reader 会将 link 宣布为 "Membership Agreement, link, example resource, link is not active"。

注意， 某些屏幕 reader 默认不读取 aria-describedby 属性。他们可能只是说该元素有额外的描述，然后按快捷键即可听到描述。没关系。如何呈现aria-describedby属性由屏幕reader决定。

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

What is the most accessible way to render an example hyperlink?

html

accessibility

hyperlink

wai-aria