15

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>
namrata
  • 2,235
  • 5
  • 28
  • 35
  • Also if I give assign a role of heading to this div, it reads the dynamic text but doesnt prefix "Product details for " before the text. – namrata Mar 08 '17 at 20:42
  • What are you trying to do here - what do you want read out at the end of the day? For what it's worth, with current implementations, aria-label does not behave as a general text replacement mechanism. It works best when used on elements that naturally take LABELs, but may or may not work on other types of elements (DIV, SPAN) unless they have tabindex or a specific role specified. – BrendanMcK Mar 08 '17 at 20:57
  • Thanks so much for your response. I am fairly newly to UI and accessibility. I was not aware that div and tag aria-labels are not read. My scenario is this- I have some text in DIV. (Let us say the text is "DELL"). But I want the screen reader to read it like "Product Name is DELL". Basically I want to prefix the "Product Name is " only for speech reader and not in the UI. I donot want to specify tabindex for these DIVs. – namrata Mar 08 '17 at 21:49

3 Answers3

15

What was stated above is correct, BUT there is a proper solution:

A <div> and <span> are neither landmarks nor interactive content. An aria-label will not be read by a screen reader (and rightly so).

The proper solution to having a reader such as JAWS or NVDA to read a <div> is by adding a role tag, along with an aria-label.

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

Here are 2 links with the wide list of various roles which SHOULD be added:

  1. MDN - WAI-ARIA Roles
  2. We - ARIA in HTML: #allowed-aria-roles-states-and-properties
Bucket
  • 7,415
  • 9
  • 35
  • 45
James Essex
  • 253
  • 3
  • 9
  • For the given example, I'd use a – flyer Jan 27 '20 at 21:43
  • `role` is an attribute, not a tag. A nitpick, yes, but if we are citing specific technical standards then getting the naming of things correct is important. – aardrian May 03 '22 at 20:43
14

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:

  1. Put the aria-label directly on the control (knowing it will override the text of the control).

  2. 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.

aardrian
  • 8,581
  • 30
  • 40
  • Thanks so much for your response. I am fairly newly to UI and accessibility. I was not aware that div and tag aria-labels are not read. My scenario is this- I have some text in DIV. (Let us say the text is "DELL"). But I want the screen reader to read it like "Product Name is DELL". Basically I want to prefix the "Product Name is " only for speech reader and not in the UI. I tried using the approach you mentioned above. It seems to work . But I just wanted to check if this is the correct way to handle this problem? Or are there any alternate approaches to be followed. – namrata Mar 08 '17 at 21:46
  • 1
    If the context is clear from the page structure or surrounding content, as in there might be a heading that says "Products", then I would not even worry about adding "The product name is". Many well-intentioned efforts end up making a page a bit too verbose for screen reader users. In short, this might not be a problem you need to solve. – aardrian Mar 08 '17 at 21:54
  • 2
    aria label **DOES** work in div and span, but it needs `role=""` too – Hannes Schneidermayer May 02 '22 at 16:26
  • 2
    @HannesSchneidermayer Only for certain roles: https://w3c.github.io/aria/#namefromprohibited – aardrian May 03 '22 at 20:39
0

I found an answer to this that worked a lot better for me without any custom CSS so wanted to share:

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

The aria-label is not read on a heading, but it is read if it is content inside the heading.

Alexander P
  • 1