JAWS无法读取DIV ARIA-LABEl [英] DIV ARIA-LABEl not being read by JAWS

问题描述

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

I have an angular2 application and I am binding some dynamic text to ARIA-LABEl for a nested DIV. But when I use the JAWS reader to locate DIVs on the page , it is not reading the assigned text.This is the text I am trying to read - attr.aria-label="Product details for {{productDetails?.ProductName}}"

此外，如果我为该div分配标题，它会读取动态文本，但不会在文本前添加商品详情

Also if I give assign a role of heading to this div, it reads the dynamic text but doesn't prefix "Product details for " before the text

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

推荐答案

您的描述缺少详细信息或有效的示例，因此提供解决方案的唯一方法是： aria-label 在< div> 上不起作用或< span> 。

Your description lacks detail or a working example, so instead of trying to offer a solution all I can offer is this: aria-label does not work on <div> nor <span>.

A ÷> 和< span> 既不是地标，也不是交互式内容。屏幕阅读器不会读取 aria标签（是这样）。

A <div> and <span> are neither landmarks nor interactive content. An aria-label will not be read by a screen reader (and rightly so).

不知道其用途，我有两个建议可能会有所帮助：

Without knowing the use, I have two suggestions which might help:

1. 放入 aria标签直接在控件上（知道它将覆盖控件的文本）。

1. Put the aria-label directly on the control (knowing it will override the text of the control).

如果希望遇到这些，请使用一些屏幕外文本<

Use some off-screen text if you want it to be encountered only by screen reader users.

使用屏幕外技术：

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

CSS可能看起来像这样（也考虑了RTL语言）：

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.

您在那些÷ div> 上使用自动对焦使我感到紧张。我希望您不要将它们用作交互式控件（如按钮）。理想情况下，不要使用 div 作为交互式内容。

Your use of autofocus on those <div> makes me nervous. I hope you are not using them as interactive controls (like buttons). Ideally never use a div as interactive content.

这篇关于JAWS无法读取DIV ARIA-LABEl的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！