html - 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用于为自定义控件等提供附加信息。它还可以用于向屏幕阅读器用户提供提示。还有 this answer I gave has information about support for 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:-

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

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

通常(如果您的设计可以调整以允许它)，最好在任何下载旁边的括号中包含文件类型和文件大小作为附加信息。

不要使用 title属性，它不是一个很容易访问的属性，对大多数屏幕阅读器用户来说是无用的，因为它不会被宣布。 (对于任何仅使用键盘的用户等也无用。)

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

把这一切放在一起
您会注意到在下面的示例中，我完全不需要“下载 PDF”额外信息。
因为超链接在语义上是正确的，而且我们声明它是括号中的 PDF(加上文件大小)，所以没有必要告诉人们这将下载 PDF，他们已经知道了!
我为你做了两个不同的例子，一个文件类型和大小可见，一个只对屏幕阅读器用户可见。
我在第一个示例中添加了注释来解释位。有什么问题就问吧!

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

<div class="btn">
    <a href="link-to-pdf.pdf"> <!--obviously if you want to intercept this with an event listener in JS then do so but leave the URL for fallback-->
      <div class="container">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/87/PDF_file_icon.svg/267px-PDF_file_icon.svg.png" aria-hidden="true"/> <!-- hide the icon from screen readers with `aria-hidden`, preferably use a **inline** SVG instead of external image to save an uneeded request. -->
        <span class="text">Item Name (PDF, 21MB)</span> <!-- added the file type and size as this is useful information for people, made it visible to all. If yourdesign won't allow for this then hide it as per second example -->
      </div>
    </a>
  </div>
  
  
  
  <div class="btn">
    <a href="link-to-pdf.pdf">
      <div class="container">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/87/PDF_file_icon.svg/267px-PDF_file_icon.svg.png" aria-hidden="true"/>
        <span class="text">Item Name Hidden file size info <span class="visually-hidden">(PDF, 21MB)</span></span>
      </div>
    </a>
  </div>