如何让屏幕阅读器专注于消息答案

【问题标题】：How do I make a screen reader focus on messages如何让屏幕阅读器专注于消息
【发布时间】：2016-08-22 07:03:25
【问题描述】：

我正在将 aria 用于屏幕阅读器。如何使屏幕阅读器专注于以下错误？我添加了role ="error" tabindex="-1"，但出现错误时没有关注。

<div role ="error" tabindex="-1" ng-class="{ 'alert': flash, 'alert-success': flash.type === 'success', 'alert-danger': flash.type === 'error' }" ng-if="flash" ng-bind="flash.message" style="text-align:left;" class="ng-binding ng-scope alert alert-success">Item has been added to Shopiing cart</div>

【问题讨论】：

标签ada是关于编程语言Ada的。我很确定您指的是《美国残疾人法案》。
@SimonWright - 是的，对于美国残疾人来说……我需要能够专注于 div 或 p 标签等内的错误消息

标签： html xhtml wai-aria

【解决方案1】：

没有太多的上下文，但我想知道你是否真的需要设置焦点。

如果您确实需要专注，只能使用 JavaScript .focus()。添加到它的 tabindex 将意味着当设置焦点时仍然保持 tab 顺序。

但是，您似乎将其用作快速提醒，让用户知道该项目是否已添加。似乎不需要实际的交互/移动。

如果您使用焦点，您可能会将用户从当前位置带到页面的全新区域。如果没有跳转到的下一步，用户可能不确定下一步该做什么。

但是，现代版本的屏幕阅读器可以理解 aria，并且您可以使用 aria-live 属性。您可以将其设置为礼貌，以便等待用户首先完成他们的交互。我也会将您的角色更改为警报。

这种方法允许用户继续与页面进行交互，但会被提醒某些事情是否成功。

【讨论】：