是否应该使用 aria-label 来描述用户生成的内容，例如用户名链接？

Question

让我们来一个Open Library list page for example。当您访问该页面时，使用屏幕 reader 的用户首先听到的是“link, Mek”。 Mek 是用户名。但是，在社交网站的情况下，有人可以选择任何用户名，例如“借书”或我认为会让使用屏幕 readers 的人迷失方向的东西。

所以，我的问题是，使用 aria-label 之类的东西来表示它是用户名是否合适，因为它没有以其他方式写在页面上？如果没有，使用屏幕 reader 的人是否有另一种方法来处理这个问题？

我是 A11Y 和 ARIA 的新手，所以我可能在错误的地方寻找答案。我尝试以多种方式搜索此内容并阅读了一些文档，例如 Using aria-label for link purpose and Using aria-label to provide an invisible label where a visible label cannot be used.

我还查看了 Twitter、Reddit 和 Facebook 等社交网站上的代码，但据我所知 none 对用户名做了一些特殊的事情。对于主要由用户生成内容的网站来说，可能不太重要。

Answer 1

链接示例

在 example page you linked 中，这些实际上是面包屑，因此在技术上是有意义的。

<div class="superNav">
        <a href="/people/mekBot">Mek</a>
        /
        <a href="/people/mekBot/lists">Lists</a>
    </div>

话虽如此，它们应该位于无序列表中（因为无序列表对于屏幕 reader 用户来说很有用，可以知道有多少 link，因为它将显示为“1 2 个选项”或类似的）并在 <nav> 上有某种形式的标识（因此它不被视为主导航）：

<nav aria-label="breadcrumbs" class="superNav">
  <ul>
    <li>
      <a href="/people/mekBot">Mek</a>
    </li>
    <li>
      <a href="/people/mekBot/lists">Lists</a>
    </li>
  <ul>
</nav>

最后，如果您有复杂的后端，或者第一个 link 将始终是用户配置文件的 link，那么您可以将一些添加到 link 只是为了清楚起见。

HTML

[...]
 <ul>
    <li>
      <a href="/people/mekBot"><span class="visually-hidden">User Profile for </span>Mek</a>
    </li>
[...]

CSS

.visually-hidden { 
    border: 0;
    padding: 0;
    margin: 0;
    position: absolute !important;
    height: 1px; 
    width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */
    clip: rect(1px, 1px, 1px, 1px); /*maybe deprecated but we need to support legacy browsers */
    clip-path: inset(50%); /*modern browsers, clip-path works inwards from each corner*/
    white-space: nowrap; /* added line to stop words getting smushed together (as they go onto seperate lines and some screen readers do not understand line feeds as a space */
}

社交网站

但是对于社交网站，您可以做很多事情。

例如，如果图像是他们个人资料的 link，您可以使用 alt 属性来指示 link.

的操作

<a class="profile-container"
  <img src="profile-image-user-rayb.jpg" alt="RayB profile page" />
</a>

如果它只是一个静态图像（并且他们的用户名没有在其他任何地方显示）那么 alt 属性会随着上下文而改变。

<img src="profile-image-user-rayb.jpg" alt="RayB profile picture / avatar" />

如果它是静态图片并且人名位于该文章/块中的其他位置，那么您可能会隐藏该图片：

<article>
   <h2>Some article Title</h2>
   <img src="profile-image-user-rayb.jpg" alt="" role="presentation" aria-hidden="true"/>
   <p class="written by">Author: RayB</p>
</article>

** 请注意：** 在最后一个示例中，一个空的 alt 属性足以从屏幕 reader 中隐藏图像。我添加 role="presentation" 和 aria-hidden="true" 以便我可以检查错误的空 alt 属性（例如，如果他们没有 aria-hidden="true" 那么我知道他们应该有一个 alt属性填写).

为什么会有这么多变化？

这就是无障碍从一套规则变成一种艺术形式的地方，你必须根据情况选择最好的选择。

例如 alt 属性的一个很好的起点是 alt text decision tree from W3.

除此之外，请考虑以下事项：

这是否会添加屏幕 reader 用户需要的额外信息？
该信息是否在其他地方/附近可用，然后复制它吗？
如果这是 link 中的图像，alt 属性是否反映上下文中 link 的 action。等....

最重要的是，抓住屏幕 reader 并尝试一下，这无疑是最快的学习方法（因为您可以找出问题/让您感到困惑的事情/重复等等，然后就很容易了寻找修复/)。

如果您需要更多信息，请告诉我！

是否应该使用 aria-label 来描述用户生成的内容，例如用户名链接？

Should aria-label be used to describe user generated content like username links?

accessibility

wai-aria

链接示例

HTML

CSS

社交网站

为什么会有这么多变化？