如何使NVDA屏幕閱讀器閱讀aria標簽？

Question

屏幕閱讀器未閱讀此div：

<div tabindex="7" aria-label="Here be redundant or extraneous content" >

它應顯示為“此處有多余或多余的內容”

對使用HTML解決此問題有幫助嗎？

Answer 1

div既不是地標，也不是交互式內容。 屏幕閱讀器不會讀取aria-label （正確的是）。

使用屏幕外技術：

<div class="sr-only">
Here be redundant or extraneous content
</div>

CSS可能看起來像這樣（也考慮了RTL語言）：

.SRonly {
  position: absolute !important;
  clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px);
  top: auto;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

html[dir=rtl] .SRonly {
  left: inherit;
  left: unset;
  right: -9999px;
}

還有其他技術 ，但是它們的價值取決於您的聽眾及其技術概況。

此外， 切勿使用正的tabindex值 。 切勿將div用作交互式內容 （制表位表示您的意圖）。

將來，如果您提供一個示例並說明要解決的挑戰，那么您的問題可能會得到更多關注。