DIV ARIA-LABEl 未被 JAWS 读取

Question

我有一个 angular2 应用程序，我将一些动态文本绑定到嵌套 DIV 的 ARIA-LABE1。但是当我使用 JAWS 阅读器在页面上定位 DIV 时，它没有阅读指定的文本。这是我试图阅读的文本 - attr.aria-label=“{{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>

原文由 namrata 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

A <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 作为交互式内容。

原文由 aardrian 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

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

让 JAWS 或 NVDA 等阅读器读取 <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

原文由 James Essex 发布，翻译遵循 CC BY-SA 4.0 许可协议