Aria live and angular pages

Question

I am trying to implement aria live function on a angular page. please find below a sample code which I am implementing.

/*  highlights JSON data, it updates in every 30 second timeinterval */
/* issues : always read from 0 index to last item */
<ul aria-live="polite" aria-atomic="false" aria-relevant="additions">
  <li class="matchday-blogs" ng-repeat="highlight in highlights">
    <div class="matchday-blogs__info">
      <p class="matchday-blogs__title">
        <span class="matchday-blogs__tag" ng-class="eventIcon(highlight.eventtype_t, true, true)"></span>{{::highlight.eventtext_t}}
      </p>
      <p class="matchday-blogs__teasure">{{::highlight.blogheading_t}}</p>
    </div>
    <p class="blogs-time">{{getHours(highlight.matchtimer_t,highlight.matchstage_t)}}<span class="screenreader">ago</span></p>
  </li>
</ul>

/*  match scores updates in live match */
/* HomeTeam = Team-A   ,  AwayTeam = Team-B */
/* issue : NVDA or Jaws is not reading updated score */

<span  aria-live="polite" aria-atomic="true">{{spotItem.optacontent.value[0].MatchDataList[0].HomeTeam.Score}} - {{spotItem.optacontent.value[0].MatchDataList[0].AwayTeam.Score}} </span>

The information is being updated dynamically from back-end in li and as soon as new item got added, screen reader is reading entire list again and again. I want that screen reader should only read newly added item only. I tried aria-relevant="additions" as well but then also, it is reading entire list again. does anyone has any idea how to fix it?

mcgraw mcgraw · Accepted Answer · 2018-04-20T13:22:35

I was having the same problem with an AngularJS SPA / NVDA on Firefox and was able to use aria-relevant="all" and aria-atomic="false" on the parent element of content.

<div class="slide-container" 
     aria-live="polite" 
     aria-atomic="false" 
     aria-relevant="all">

     <-- Slideshow Tutorial Elements -->

</div>

when aria-atomic was set to true, every bit of content on each of the contained elements was being read by the screen reader, once that was set to false only the content that was in view was being read.

Values of aria-relevant

additions - Element nodes are added to the DOM within the live region
removals - Text or element nodes within the live region are removed from the DOM
text - Text is added to any DOM descendant nodes of the live region
all - Equivalent to the combination of all values, “additions removals text”

Aria live and angular pages

1 Answers