JAWS ne lit pas l'étiquette aria mise à jour

Question

Nous utilisons une table angulaire personnalisée qui inclut également la fonctionnalité de tri. Lorsque l'utilisateur trie la colonne 1, nous définissons aria-label comme colonne: "Cliquez pour trier la colonne1 dans l'ordre croissant".

Si l'utilisateur clique à nouveau sur le même en-tête, nous modifions la même étiquette-aria pour "Cliquez pour trier la colonne1 dans l'ordre décroissant".

Mais il est observé que le aria-label mis à jour n'est pas détecté par le narrateur de JAWS.

Comment pouvons-nous résoudre ce problème où JAWS peut lire une mise à jour aria-label ou existe-t-il une alternative pour cela?

Merci

Answer 1

Le texte alternatif a déjà été calculé, mais vous pouvez définir deux boutons/div et cacher les inutiles.

<th> 
    <div role="button" 
     class="ascending" 
     aria-label="Click to sort column in ascending order"></div> 
    <div role="button" 
     class="descending hidden" 
     aria-label="Click to sort column in ascending order"></div> 
</th> 

Answer 2

Merci pour la réponse, mais je l'ai fait de manière différente,

1. J'ai ajouté ci-dessous le code html qui a un rôle = "log"-live aria "=" poli »

<div class="hidden" id="sortAnnouncer" role="log" aria-live"="polite"> 
     <span ng-bind="sortingChangedMessage"></span> 
</div> 

2. lorsque l'utilisateur clique sur en-tête de colonne pour trier, appelle la fonction angulaire et mises à jour sortingChangedMessage variables

 <th ng-click="setSortMessage('column name',direction)">Column name</th> 

     $scope.setSortMessage = function(columnName, direction) 
     { 
      $scope.sortingChangedMessage = "Click on column " + columnName + " to sort in " + direction + " order";  } 

les changements de messages détectés par JAWS et a commencé à lire le sortingChangedMessage mis à jour.

Cette méthode a résolu mon problème.

Answer 3

Ajoutez simplement role = "alert". Cela résoudra votre problème. Le rôle "alerte" est utilisé pour détecter les changements dynamiques.