DIV ARIA-LABEl JAWS 未读取

Question

我有一个 angular2 应用程序，我正在将一些动态文本绑定到 ARIA-LABEl 以获得嵌套 DIV。但是当我使用 JAWS reader 在页面上定位 DIVs 时，它没有读取指定的 text.This 是我试图读取的文本 - attr.aria-label ="Product details for {{productDetails?.ProductName}}"

另外，如果我给这个 div 分配一个标题角色，它会读取动态文本，但不会在文本

之前添加前缀 "Product details for "

<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

您的描述缺乏细节或工作示例，因此我没有尝试提供解决方案，而是提供以下内容：aria-label 不适用于 <div> 或 <span>。

A <div> 和 <span> 既不是地标也不是互动内容。 aria-label 不会被屏幕 reader 读取（这是正确的）。

在不知道用途的情况下，我有两个建议可能会有所帮助：

直接把aria-label放在控件上（知道了会覆盖控件的文字）
如果您希望仅被屏幕 reader 用户遇到，请使用一些屏幕外文本。

使用屏幕外技术：

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

There are other techniques，但它们的价值取决于您的受众及其技术概况。

你在 <div> 上使用 autofocus 让我很紧张。我希望您不要将它们用作交互式控件（如按钮）。理想情况下 never use a div as interactive content.

Answer 2

上面说的是对的，但是有一个妥善的解决办法：

A <div> 和 <span> 既不是地标也不是互动内容。 aria-label 不会被屏幕读取 reader（这是正确的）。

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

例子：

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

这里有 2 个链接，其中包含应添加的各种角色的广泛列表：

Answer 3

我找到了一个对我来说效果更好的答案，没有任何自定义 CSS 所以想分享：

<div role="heading" aria-level="1">
    <span aria-label="This is what screen-reader will say">
        <!-- no content shown, but is a heading for screen reader -->
    </span>
</div>

aria-label 不会在标题上阅读，但如果它是标题内的内容，则会阅读。

DIV ARIA-LABEl JAWS 未读取

DIV ARIA-LABEl not being read by JAWS

html

angular

accessibility

wai-aria

uiaccessibility