JAWS lesen aktuelles Aria-Label nicht

Question

Wir verwenden eine benutzerdefinierte eckige Tabelle, die auch Sortierfunktionalität enthält.

Wenn der Benutzer Spalte1 sortiert, setzen wir aria-label für Spalte1 als: "Klicken Sie, um Spalte1 in aufsteigender Reihenfolge zu sortieren".

Wenn der Benutzer erneut auf dieselbe Kopfzeile klickt, ändern wir dieselbe Arienbezeichnung in "Klicken, um Spalte1 in absteigender Reihenfolge zu sortieren".

Es wird jedoch beobachtet, dass die aktualisierte aria-label nicht von JAWS Erzähler erkannt wird.

Wie können wir dieses Problem lösen, wo JAWS eine aktualisierte aria-label lesen kann oder gibt es dafür eine Alternative?

Dank

Answer 1

Der alternative Text bereits berechnet worden ist, aber Sie können zwei Tasten/div definieren und die unnötige eine verbergen.

<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

Danke für Ihre Antwort, aber ich habe es in anderer Weise,

1. Ich habe unten Code hinzugefügt HTML, welche Rolle = "log" aria-live "=" höflich“

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

2. wenn Benutzer klickt auf Spaltenüberschrift zu sortieren, ruft die Winkelfunktion und Updates sortingChangedMessage variable

 <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";  } 

die Nachricht Veränderungen von JAWS detektierten und begann die aktualisierte sortingChangedMessage zu lesen.

Diese Methode löste mein Problem.

Answer 3

Fügen Sie einfach role = "alert" hinzu. Es wird Ihr Problem lösen. Die "alert" -Rolle wird verwendet, um die dynamischen Änderungen zu erkennen.