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}}"
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>
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 <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:
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.
Use an off-screen technique:
<div class="sr-only">
Here be redundant or extraneous content
</div>
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.
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.