NVDA 在点击时读取按钮 aria-label 而不是在悬停时读取

问题描述

我使用 W3Schools HTML 代码为网站创建了幻灯片（来自此处：https://www.w3schools.com/w3css/w3css_slideshow.asp）

除了我无法让 NVDA 读取悬停时附加到上一个和下一个箭头的任何标题或 aria-label 之外，一切正常。它只会在点击时读取，这对于使用屏幕阅读器的人来说为时已晚。

我已将 W3Schools 代码从实际按钮更改为：

<div class="direction prev" tabindex="0" onclick="plusSlides(-1)" role="button" aria-label="prevIoUs">❮</div>

<div class="direction next" tabindex="0" onclick="plusSlides(1)" role="button" aria-label="next">❯</div>

并尝试了几种组合，包括：

将 id 添加到带有文本的 span，然后在按钮 div 中使用 aria-labelledby 引用它
使用 title="PrevIoUs Slide"
使用特殊的 class="visually-hidden" 使用剪辑方法隐藏文本（已在菜单中使用，但它也不读取）
各种其他类似的选项，但无济于事。

我该怎么做才能让 NVDA 在悬停时读取标签/文本？ JavaScript 可以，但请不要使用 jQuery。谢谢。

解决方法

我认为你必须使用 aria-describedby="previous" 或 "next" 以便 NVDA 可以读取它。更多信息请访问：https://www.powermapper.com/tests/screen-readers/labelling/a-aria-describedby/

如果它不起作用，我很抱歉。让我知道，以便我可以删除

以下代码有效。我没有包含 JavaScript，因为它与这篇文章无关。

.gallery /*code for this demo only */ {
 width: 100%;
 margin: 1rem 0;
 border: 1px solid red;
 height: 50px;
}
.prev,.next {
  background-color: rgba(0,0.2);
  cursor: pointer;
  position: absolute;
  top: 30px;
  width: 10px;
  padding: 15px;
  margin-top: 22px;
  color: var(--dark-green);
  font-weight: bold;
  font-size: 1.25rem;
  transition: 0.6s ease;
  border: none;
  user-select: none;
  left: 1rem;
}
.next {
  left: unset;
  right: 1rem;
  border-radius: 3px 0 0 3px;
}
.visually-hidden {
    border: 0;
    padding: 0;
    margin: 0;
    position: absolute;
    height: 1px;
    width: 1px;
    overflow: hidden;
    white-space: nowrap;
}

<div class="direction prev" tabindex="0" onclick="plusSlides(-1)" role="button">❮<span class="visually-hidden">Previous slide</span></div>
<div class="direction next" tabindex="0" onclick="plusSlides(1)" role="button">❯<span class="visually-hidden">Next slide</span></div>

accessibility html javascript nvda