可以将 aria-label 和 aria-describedby 结合起来吗？

Question

我已经四处搜索，但没有找到任何信息是否可以组合aria-label和aria-describedby元素，以及是否会对使用屏幕阅读器的人造成混淆？

我有一个包含许多项目的列表，每个项目都有一个title，然后标题旁边有一个 PDF 图标，用于下载该项目的 pdf，如下所示：

<ul>
    <li>
        <div id="item-{{item.id}}">{{item.title}}</div>
        <button class="icon-pdf"></button>
    </li>
</ul>

我想知道我是否可以做这样的事情，它对用户是否仍然有意义，以及屏幕阅读器是否可以处理这种情况：

<ul>
    <li>
        <div id="item-{{item.id}}">{{item.title}}</div>
        <button class="icon-pdf" 
                aria-label="Download PDF button" 
                aria-describedby="item-{{item.id}}">
        </button>
    </li>
</ul>

button也许将 转换为链接并使用title这样的属性会更好？

<a href="javascript:void(0);//Download PDF"  
   class="icon-pdf"
   title="Download PDF"
   aria-describedby="item-{{item.id}}">
</a>

Answer 1

简答

如果您使用超链接以及在括号中添加文件类型和大小的推荐做法（哦，如果您的网站是多语言的，还有语言），则无需添加您尝试添加的额外信息。

长答案

要回答原来的问题，是的，您可以一起使用aria-label和aria-describedby。它们有不同的用途。

aria-label用于为控件提供可用的名称，它会覆盖任何语义派生信息（即按钮文本）。

aria-describedby用于为自定义控件等提供附加信息。它还可以用于向屏幕阅读器用户提供提示。我给出的这个答案还包含有关支持aria-describedby等的信息。需要考虑的事情。

如果将它们一起使用，您将aria-label首先读取内容，然后aria-describedby再读取信息。

aria-label和aria-describedby在一起的快速示例

<button aria-label="read first" aria-describedby="extra-info">Not Read Out</button>
<div class="visually-hidden" id="extra-info">This would be read second</div>

在上面的示例中，它将显示“首先读取，然后再读取”，请注意“未读取”原始按钮文本已被完全覆盖。

不过，您的用例并不真正需要这些

综上所述，以下是针对您的用例的一些建议，因为这里并不真正需要 WAI-ARIA：-

1. 即使在同一页面上下载文档，您也应该使用超链接。造成这种情况的主要原因是，当JavaScript 在您的页面上失败时（或者对于那些仍然在没有 JavaScript 的情况下浏览互联网的人），会出现后备机制，以便可以访问文档。此外，如果您希望文档被索引等，这有助于 SEO（我知道，我敢在 Stack Overflow 上提到 SEO！）。最后，它在语义上是正确的，它是一个链接文件，这就是超链接的最终用途。

2. 如果信息对屏幕阅读器用户有用，那么它可能对其他人（即有认知障碍的人）也有用。然而，在此用例中，执行操作的控件最好包含所有相关信息。

3. 一般来说（如果您的设计可以调整以允许它），最好将文件类型和文件大小作为附加信息包含在任何下载旁边的括号中。

4. 不要使用该title属性，它不是一个非常容易访问的属性，并且对于大多数屏幕阅读器用户来说毫无用处，因为它不会被公布。（对于任何仅使用键盘的用户等来说，它也是无用的。）

5. WAI-ARIA 对于补充信息很有用，一般规则是控件应该在没有它的情况下工作，而 WAI-ARIA 用于渐进增强。

把它们放在一起

您会注意到，在下面的示例中，我完全消除了对“下载 PDF”额外信息的需要。

因为超链接在语义上是正确的，而且我们在括号中声明它是 PDF（加上文件大小），所以无需告诉人们这将下载 PDF，他们已经知道这一点！

我为您做了两个不同的示例，一个示例的文件类型和大小可见，另一种示例仅对屏幕阅读器用户可见。

我在第一个示例中添加了注释来解释位。有任何问题尽管问！

<button aria-label="read first" aria-describedby="extra-info">Not Read Out</button>
<div class="visually-hidden" id="extra-info">This would be read second</div>

body {
  font-family: Century Gothic;
  background: #272727;
}

.btn {
  float: left;
  width: 25%;
  height: 30px;
  padding: 1px 0px;
  min-width: 200px;
  margin: 2% .8%;
  overflow: hidden;
  background: #527EBF;
}
.btn:hover {
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
  border-radius: 5px;
  background: #666;
}
.btn a {
  text-decoration: none;
}
.btn img {
  width: 22px;
  margin: 0 5px;
  transition: all .5s ease;
  position: relative;
  left: 0;
  transform: scale(0.7);
}
.btn .container span.text {
  font-size: 12px;
  color: #fff;
  position: relative;
  left: -3px;
  top: -8px;
  transition: all .45s ease-in-out;
}


.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 */
}