DIV ARIA-LABElがJAWSによって読まれていない

Question

私はangular2アプリケーションを持っており、ネストされたDIVのARIA-LABElにいくつかの動的テキストをバインドしています。しかし、私が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

あなたの説明は、詳細や作業を欠いたとえば、私が提供できるソリューションを提供しようとする代わりに、aria-labelは<div>でも<span>でも動作しません。

<div>および<span>は、目印もインタラクティブなコンテンツでもありません。 aria-labelはスクリーンリーダーで読むことはできません（そうです）。

使用することを知らず、私は役立つかもしれない2件の提案があります。

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

There are other techniquesが、その価値はあなたに依存します視聴者とその技術プロファイル

autofocusをご利用の場合は<div>となります。あなたが対話的なコントロール（ボタンのようなもの）としてそれらを使用していないことを願っています。理想的にはnever use a div as interactive content。