JAWS not reading updated aria-label

Question

We are using a custom angular table which includes sorting functionality as well.

When the user sorts column1 we are setting aria-label for column1 as: "Click to sort column1 in ascending order".

If the user clicks again on same header we are changing the same aria-label to "Click to sort column1 in descending order".

But it is observed that the updated aria-label is not detected by JAWS narrator.

How we can resolve this issue where JAWS can read an updated aria-label or is there any alternative for this ?

Thanks

Answer 1

The alternative text has already been calculated, but you can define two buttons/div and hide the unnecessary one.

<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

Thanks for reply but i did it in different way,

1. I have added below code to html which has role="log" aria-live"="polite"

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

2. when user clicks on column header to sort, calls the angular function and 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";      }

The message changes detected by JAWS and started reading the updated sortingChangedMessage.

This method solved my issue.

Answer 3

Just add role="alert". It will solve your problem. "alert" role is used to detect the dynamic changes.