CODEWITHSUNDEEP
htmlangularaccessibilitywai-ariauiaccessibility
namrata
namrata

Reputation: 2545

DIV ARIA-LABEl not being read by JAWS

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>

Upvotes: 17

Views: 37259

Answers (3)

Alexander P
Alexander P

Reputation: 1

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.

Upvotes: 0

James Essex
James Essex

Reputation: 301

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

Upvotes: 17

aardrian
aardrian

Reputation: 9009

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.

Upvotes: 15

Related Questions