如何让NVDA屏幕阅读器阅读咏叹调标签？ [英] How to make NVDA screen reader read the aria-label?

问题描述

屏幕阅读器不读这个div：

 < div tabindex =7aria-label =这里是多余的或无关内容> 
  

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

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

解决方案 div 既不是地标也不是交互式内容。屏幕阅读器不会读取 aria-label 。

使用off-屏幕技术：

 < div class =sr-only> 
这里是多余或无关的内容
< / div> 
  

CSS可能看起来像这样（也包含RTL语言）：

  .Sonly {
 position：absolute！important; 
 clip：rect（1px 1px 1px 1px）; / * IE6，IE7 * / 
 clip：rect（1px，1px，1px，1px）; 
 top：auto;剩余
：-9999px; 
 width：1px; 
 height：1px; 
 overflow：hidden; 
} 
 
 html [dir = rtl] .Sonly {
 left：inherit; 
 left：unset; 
正确：-9999px; 
} 
  

还有其他技术，但它们的价值取决于您的受众和技术概况。

此外，从不使用正面 tabindex 值。并且绝对不要使用 div 作为交互式内容（其中tab-stop意味着您的意图）。

将来，您的问题可能会得到如果您提供了您正在尝试解决的挑战的示例和说明，请多加关注。

Screen reader not reading this div:

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

It should read "Here be redundant or extraneous content"

Any help how to solve this problem with HTML?

解决方案

A div is neither landmark nor interactive content. An aria-label will not be read by a screen reader (and rightly so).

Use an off-screen technique:

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

The CSS might look like this (accounting for RTL languages too):

.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;
}

There are other techniques, but their value depends on your audience and its technology profile.

Further, never use a positive tabindex value. And never use a div as interactive content (which the tab-stop implies is your intent).

In the future, your question might get more attention if you provide an example and description of the challenge you are trying to solve.

这篇关于如何让NVDA屏幕阅读器阅读咏叹调标签？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！