相关疑难解决方法(0)

我已经四处搜索，但没有找到任何信息是否可以组合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>

我有一个简单的文本，它会更新一个动作，我希望屏幕阅读器可以宣布它。但我不希望该文本在网页上可见。我试过display: none和visibility: hidden，但似乎屏幕阅读器软件无法访问它们。我找到了一种方法来完成这项工作 - 即通过使用负 999999 值一直绝对定位元素，这将使其离开屏幕并从网页中隐藏。我不是这个解决方案的粉丝。有没有更优雅的方法来实现这一目标？

<span class="aria-invisible" aria-live="polite">5 selections have been made.</span>

.aria-invisible {
   display: none; //either of these two attributes
   visibility: hidden;
}