结合 aria-label 和 aria- describeby 可以吗？

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：-

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

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

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

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

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

把它们放在一起

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

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

我为你做了两个不同的例子，一个文件类型和大小可见，一个只对屏幕阅读器用户可见。

我在第一个示例中添加了 cmets 来解释位。有什么问题就问吧！

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>