像 JAWS 这样的屏幕阅读器可以阅读 jGrowl 消息吗？答案

【问题标题】：Can screen reader like JAWS read jGrowl message?像 JAWS 这样的屏幕阅读器可以阅读 jGrowl 消息吗？
【发布时间】：2017-08-03 12:57:51
【问题描述】：

在我的网络应用程序中，每当发生任何错误时，都会通过 jGrowl 框显示该错误消息：

$.jGrowl("This is an error message.");

我还使用 jGrowl 框来显示正常的消息/通知。我正在使我的应用程序可访问性友好。我使用 JAWS 作为屏幕阅读器。当弹出 jGrowl 消息时，JAWS 没有读取该消息。

如何让 JAWS 阅读该消息？有什么解决方法吗？

或者是否有任何 jQuery 方法可以让我知道正在显示一条 jGrowl 消息，以便我可以设置焦点或其他东西，以便屏幕阅读器读取该消息并通知用户。

提前致谢。

【问题讨论】：

我不知道 jGrowl，你也没有提供任何 URL，但这可能是 ARIA live regions 的情况。
jGrowl 尚未更新为对 aria 友好。如果你有兴趣贡献，我很乐意合并 PR！
@stanlemon 我对 ARIA 没有太多经验，但可以肯定！我很想贡献一些东西并在同一方面学习。

标签： jquery accessibility jaws-screen-reader jgrowl

【解决方案1】：

更新：

我做了一个解决方法，使 JAWS 等屏幕阅读器可以阅读 jGrowl 消息/通知。为此，我稍微修改了 jquery.jgrowl.min.js 文件。

首先在 jquery.jgrowl.min.js 文件中找到以下行（顺便说一句，它在呈现 jGrowl 弹出窗口中起着重要作用）：

var t=e("<div />").addClass("jGrowl-notification "+n.themeState+" ui-corner-all"+(void 0!=n.group&&""!=n.group?" "+n.group:""))

现在添加一个“role”属性，将“alert”指定为该 div 中的一个值。您还可以添加 ARIA 标签，让屏幕阅读器可以阅读该消息。

所以修改后的样子是这样的：

var t=e("<div role='alert' />").attr('aria-label',t.message).addClass("jGrowl-notification "+n.themeState+" ui-corner-all"+(void 0!=n.group&&""!=n.group?" "+n.group:""))

希望这会有所帮助。它对我有用:)

【讨论】：