DIV ARIA-LABEl n'étant pas lu par JAWS

Question

J'ai une application angular2 et je lie un texte dynamique à ARIA-LABEl pour un DIV imbriqué. Mais quand j'utilise le lecteur JAWS pour localiser des DIVs sur la page, il ne lit pas le texte assigné. C'est le texte que j'essaie de lire - attr.aria-label = "Détails du produit pour {{productDetails? .ProductName}} "

aussi, si je donne attribuer un rôle de la position à ce div, il lit le texte dynamique, mais ne préfixe pas « détails du produit » avant que le texte

<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

Votre description ne dispose pas de détails ou d'un travail par exemple, donc au lieu d'essayer d'offrir une solution tout ce que je peux offrir est la suivante: aria-label ne fonctionne pas sur <div> ni <span>.

A <div> et <span> ne sont pas des repères ni un contenu interactif. Un aria-label ne sera pas lu par un lecteur d'écran (et à juste titre).

Sans connaître l'utilisation, j'ai deux suggestions qui pourraient aider:

1. Mettez le aria-label directement sur le contrôle (le savoir remplace le texte du contrôle).

2. Utilisez un texte hors écran si vous voulez qu'il soit rencontré seulement par les utilisateurs du lecteur d'écran.

Utiliser une technique hors écran:

<div class="sr-only"> 
Here be redundant or extraneous content 
</div> 

Le CSS pourrait ressembler à ceci (comptabilité pour les langues RTL aussi):

.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, mais leur valeur dépend de votre public et son profil technologique.

Votre utilisation de autofocus sur ceux <div> me rend nerveux. J'espère que vous ne les utilisez pas comme contrôles interactifs (comme les boutons). Idéalement never use a div as interactive content.