DIV ARIA-LABEl没有被JAWS阅读

Question

我有一个angular2应用程序,我将一些动态文本绑定到ARIA-LABEl以获得嵌套的DIV.但是当我使用JAWS阅读器在页面上找到DIV时,它并没有读取指定的文本.这是我试图阅读的文本 - attr.aria-label ="{productDetails？.ProductName}}的产品详细信息"

此外,如果我给这个div指定一个标题角色,它会读取动态文本,但不会在文本前面加上"产品详细信息"的前缀

<div [ngClass]="getDescClass()" class="prdDetails-div" aria-label="some text">
<div autofocus attr.aria-label="Product details for {{productDetails?.ProductName}}" class="productDetails-name" style="cursor:default!important" role="heading" >{{productDetails?.ProductName}}   </div>
        <div autofocus class="products-result-compare">
            <!--{{getDescription(productDetails?.Description)}}-->
            Small description
        </div>

Answer 1

上面说的是正确的，但有一个适当的解决方案：

A<div>和<span>既不是地标也不是交互式内容。Anaria-label不会被屏幕阅读器读取（这是正确的）。

让 JAWS 或 NVDA 等阅读器读取 a 的正确解决方案<div>是添加role标签以及aria-label.

例子：

<div role="navigation" aria-label="Main">
  <!-- list of links to main website locations -->
</div>

以下是 2 个链接，其中包含应添加的各种角色的广泛列表：

1. MDN - WAI-ARIA 角色
2. 我们 - HTML 中的 ARIA：#allowed-aria-roles-states-and-properties

Answer 2

你的描述缺乏细节或工作的例子,所以不是试图提供一个解决方案的所有我可以提供的是:aria-label不工作的<div>,也没有<span>.

一个<div>和<span>既不是地标,也没有互动的内容.一个aria-label不会被屏幕阅读器来读取(这是正确的).

在不知道使用的情况下,我有两条建议可能有所帮助:

1. 把aria-label直接控制(知道它会覆盖控件的文本).

2. 如果只希望屏幕阅读器用户遇到屏幕文本,请使用屏幕外文本.

使用屏幕外技术:

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

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

你autofocus对这些的使用<div>让我感到紧张.我希望你不要将它们用作交互式控件(如按钮).理想情况下从不使用div互动内容.