Table sorting accessibility for AngularJS table/list

Has your SPA accessibility compliance done ?
Ahhh … let me get back to you.

That’s usual scenario for dynamic single page application. Since content of the web app changes dynamically/asynchronously. It required need addition planning to make dynamic web accessibility complain. For those who are new to web accessibility

The power of the Web is in its universality. Access by everyone
regardless of disability is an essential aspect.

There are many tools are being provided to make the web accessible like screen reader. The screen reader read out the html content with help of aria attributes. One of the accessibility attribute is aria-sort . It let the user know that the given html table is sorted by of the its column and in which order. The sorted column of the table expected to have ng-aria=”ascending/descending”.

The problem with SPA table is that on sorting the table the content get sorted without loading the web, so having static aria-sort attribute is going to help. The aria-sort attribute should get updated as the user interact with html table.

To solve this problem I have come up with angular directive to add/update aria-sort attribute dynamically to table header.

var ngAria = angular.module("NGAria", []);

ngAria.directive('ngAriaSort', function(){
  return {
      restrict:'A',
      scope:{
        orderBy : "="
      },
      link: function(scope, element, attrs, ctrl){
        if(attrs.ngAriaSort) {
          try {
            var currentCol = attrs.ngAriaSort;
            updateAriaAttribute();
            scope.$watch('orderBy', function(newVal, oldVal){
              updateAriaAttribute(); 
            },true);
          } catch(e) {
            console.warn('Error while paring sn-aria-sort attribute value : ' + e.toString());
          }

        }

        function updateAriaAttribute() {
          var isSorted = scope.orderBy.col == currentCol;
          var desc = scope.orderBy.desc;
          if(isSorted)
            element.attr('aria-sort',desc?"descending":"ascending");
          else
            element.removeAttr('aria-sort');
        }

      }
    }
});

Here is how this directive is being used

<thead>
      <tr>
        <th ng-repeat="col in cols" ng-aria-sort="{{col.name}}" order-by="orderBy">

It adds/updates the aria-sort attribute based on the current column by which the table is sorted as well as the sorting order.

Code Link is here

Also found my source repository