ADA - 如何让屏幕阅读器在计数器中说出变化

Question

屏幕上的控件如上所示。中心有一个柜台。当用户点击+号时，计数器增加1，减去减1.我想让屏幕阅读器在用户点击+/-符号时说“计数器增加（或减少）”。这可能通过咏叹调标签吗？我认为咏叹调生活和咏叹调控制可能在这里很有用，但实际上并不知道如何实现它。请不要让我更改span标签 - 产品已开发和测试 - 我们正在努力使其与ADA兼容。我们使用NVDA进行测试。

<div class="segment">
    <span class="counterDec" data-ng-click="decreaseCounter()" >
       <span class="icon icon-subtract"></span>
    </span>
    <span class="Cnt">{{empCount}}</span>
    <span class="counerInc" data-ng-click="addCounter()">
       <span class="icon icon-add"></span>
    </span>
</div>

Answer 1

我要做的是创建一个只有屏幕阅读器的跨度（一个视觉上对视力正常的用户隐藏，但只向SR用户读出），如下所示：

.sr-only {
  position: absolute;
  left:-99999px;
  height: 1px;
  width: 1px;
  overflow: hidden;
}

只在代码中的某个位置弹出屏幕阅读器：

<span id="sr-only" aria-live="polite"></span>

然后在您的函数addCounter()和decreaseCounter()内部，在单击按钮时将要读取的状态注入用户。例如，在addCounter()函数中，您可以添加以下内容：

document.getElementById('sr-only').innerHTML = "Counter Increased";

这样，当用户点击你的添加按钮时，addCounter()函数会被调用，这是真的，但也会将文本注入sr-only范围。由于跨度使用aria-live=polite，因此屏幕阅读器会将此文本读出给用户。

为decreaseCounter()函数执行相同的操作，但对于注入的文本使用“Counter Decreased”。

修改
我早上没喝咖啡，哎呀。如果您正在使用AngularJS，我相信您这样做：

var updateSpan = angular.element(document.getElementById("sr-only"));
updateSpan.empty()
updateSpan.append("Counter Increased");

Answer 2

非常确定您可以blur然后focus来提示屏幕阅读器：

<div class="segment">
    <span class="counterDec" data-ng-click="decreaseCounter()" >
       <span class="icon icon-subtract"></span>
    </span>
    <span class="Cnt" #example>{{empCount}}</span>
    <span class="counerInc" data-ng-click="addCounter()">
       <span class="icon icon-add"></span>
    </span>
 </div>

在组件中：

@ViewChild('example') exampleEl;
addCounter(){
    empCounter++;
    this.exampleEl.nativeElement.blur();        
    this.exampleEl.nativeElement.focus();
}