ADA - 如何让屏幕阅读器说出柜台的变化

Question

屏幕上的控件如上所示。 中间有一个柜台。 当用户单击 + 符号时，计数器增加 1，减号减少 1。当用户单击 +/- 符号时，我想让屏幕阅读器显示“计数器增加（或减少）”。 这可能通过 aria 标签吗？ 我认为 aria-live 和 aria-control 在这里可能很有用，但真的不知道如何实现它。 请不要让我更改跨度标签 - 产品是经过开发和测试的 - 我们正在努力使其与 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 span。 因为 span 使用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();
}