如何使屏幕阅读器专注于消息

时间:2016-04-27 19:19:09

标签: html5 xhtml wai-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>

1 个答案:

答案 0 :(得分:0)

没有太多的背景,但我想知道你是否真的需要设置焦点。

如果你需要专注,只能使用JavaScript .focus()。添加到其中的tabindex将意味着当设置焦点时仍然保持Tab键顺序。

但是,您似乎将此作为快速提醒,让用户知道该项目是否已添加。看起来似乎不需要实际的互动/运动。

如果您使用焦点,则可能会将用户从当前位置带到页面的全新区域。如果没有接下来的步骤,他们被跳到用户可能不知道下一步该做什么。

然而,现代版本的屏幕阅读器可以理解咏叹调,并且您可以使用aria-live属性。您可以将其设置为礼貌,以便等待用户首先完成其交互。我也会改变你的角色警觉。

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