Question

我正在尝试在角度页面上实现aria live功能。请在下面找到我正在实施的示例代码。

/*  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>

信息正在从li后端动态更新，一旦新项目被添加，屏幕阅读器就会一次又一次地读取整个列表。我希望屏幕阅读器只能阅读新添加的项目。我也试过了aria-relevant =“adds”，但是，它也在重读整个列表。有没有人知道如何解决它？

Answer 1

我在Firefox上使用AngularJS SPA / NVDA遇到了同样的问题，并且能够使用aria-relevant =＆＃34; all＆＃34;和咏叹调原子=＆＃34;假＆＃34;在内容的父元素上。

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

     <-- Slideshow Tutorial Elements -->

</div>

当aria-atomic设置为true时，屏幕阅读器正在读取每个包含元素的每个内容，一旦设置为false，只读取正在查看的内容。

咏叹调相关的值

添加 - 将元素节点添加到实时区域内的DOM
删除 - 活动区域内的文本或元素节点将从DOM中删除
text - 将文本添加到活动区域的任何DOM后代节点
all - 相当于所有值的组合，“添加删除文本”

咏叹调生活和角度页面

1 个答案: