NVDA 在點擊時讀取按鈕 aria-label 但不在 hover 上

Question

我使用 W3Schools HTML 代碼為網站創建了幻燈片（從這里開始： https://www.w3schools.com/w3css/w3css_slideshow.asp ）

一切正常，除了我無法讓 NVDA 讀取附加到 hover 上的上一個和下一個箭頭的任何標題或 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>

並嘗試了幾種組合，包括：

1. 將 id 添加到帶有文本的跨度，然后在按鈕 div 中使用 aria-labelledby 引用它
2. 使用title="Previous Slide"
3. 使用特殊的class="visually-hidden"使用 clip 方法隱藏文本（已經在菜單中使用，但它也不會讀取）
4. 各種其他類似的選擇，無濟於事。

我該怎么做才能讓 NVDA 讀取 hover 上的標簽/文本？ JavaScript 沒問題，但沒有 jQuery，拜托。 謝謝。

Answer 1

我認為您必須使用 aria- describeby="previous" 或 "next" 以便 NVDA 可以讀取它。 更多信息在這里： https://www.powermapper.com/tests/screen-readers/labelling/a-aria- describeby/

如果它不起作用，我很抱歉。 讓我知道，以便我刪除

Answer 2

以下代碼有效。 我沒有包括 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,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>

Answer 3

我遇到的問題是 nvda 沒有讀取分配給 hover 上的 Icon 或 IconButton 的 aria-label。 我用 span 包裹了圖標，將角色設置為 img 並將 aria-label 分配給 span。

以前的：

 <IconButton
    aria-label="Some icon"
    role="button"
 >
     <TodayIcon aria-label="Today"/>
 </IconButton>

當前的：

 <IconButton
    role="button"
  >
      <span role="img" aria-label="Today">
        <TodayIcon />
      </span>
 </IconButton>

Answer 4

我最終到了那里。 我需要在跨度內移動前后符號，正如@robariissa01 所說，我需要使用“aria-label”。 按鈕的代碼現在是這樣的：

<div id="dp" class="direction prev" tabindex="0" onclick="plusSlides(-1)" role="button" aria-labelledby="ps"><span id="ps" for="dp" aria-label="Previous slide">❮</span></div>
<div id="dn" class="direction next" tabindex="0" onclick="plusSlides(1)" role="button" aria-labelledby="ns"><span id="ns" for="dn" aria-lable="Next slide">❯</span></div>