html - 如何让 NVDA 屏幕阅读器阅读 aria-label？

Question

屏幕阅读器未阅读此 div：

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

它应该是“这里是多余或无关的内容”

任何帮助如何用 HTML 解决这个问题？

Answer 1

Adiv既不是地标也不是交互式内容。Anaria-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正值。并且永远不要将 adiv用作交互式内容（制表位意味着您的意图）。

将来，如果您提供一个示例和描述您试图解决的挑战，您的问题可能会受到更多关注。