如何使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用作交互式内容 （制表位表示您的意图）。

将来，如果您提供一个示例并说明要解决的挑战，那么您的问题可能会得到更多关注。