DIV ARIA-LABEl不被JAWS读取

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

另外，如果我分配给标题，这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>

来源

2017-03-08 namrata

此外，如果我给这个div分配一个标题角色，它会读取动态文本，但不会在文本之前添加“产品详细信息”字样。 – namrata

你想在这里做什么 - 你想在一天结束时读出什么？对于目前的实现来说，它的价值在于，咏叹调标签并不像一般的文本替换机制。当它用在自然采用LABEL的元素上时，它的效果最好，但可能对其他类型的元素（DIV，SPAN）有效或无效，除非它们具有tabindex或指定的特定角色。 – BrendanMcK

非常感谢您的回复。我对UI和可访问性相当陌生。我不知道div和标签aria标签没有被读取。我的情景是这样的 - 我在DIV中有一些文字。（让我们说文本是“戴尔”）。但我希望屏幕阅读器能够像“产品名称是DELL”一样阅读它。基本上我想在“产品名称是”前缀中仅限语音阅读器，而不是在UI中。我不想为这些DIV指定tabindex。 – namrata

你的描述缺乏细节或工作例如，所以我可以提供的解决方案不是试图提供一个解决方案，而是aria-label在<div>和<span>上都不起作用。

A <div>和<span>既不是地标也不是交互式内容。一个aria-label将不会被屏幕阅读器读取（正确如此）。

不知道用，我有两个建议，这可能帮助：

把aria-label直接控制（知道它会覆盖控件的文本）。
如果您希望遇到屏幕阅读器用户，请使用一些屏幕外文字只有。

使用脱屏技术：

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

来源

2017-03-08 21:30:44 aardrian

非常感谢您的回复。我对UI和可访问性相当陌生。我不知道div和标签aria标签没有被读取。我的情景是这样的 - 我在DIV中有一些文字。（让我们说文本是“戴尔”）。但我希望屏幕阅读器能够像“产品名称是DELL”一样阅读它。基本上我想在“产品名称是”前缀中仅限语音阅读器，而不是在UI中。我试着用你上面提到的方法。它似乎工作。但我只是想检查这是否是解决这个问题的正确方法？或者是否有任何其他方法需要遵循。 – namrata

如果上下文从页面结构或周边内容中清除，如可能有一个标题为“产品”，那么我甚至不会担心添加“产品名称是”。许多善意的努力最终导致屏幕阅读器用户的页面过于冗长。总之，这可能不是你需要解决的问题。 – aardrian

DIV ARIA-LABEl不被JAWS读取

回答

相关问题