Can screen reader like JAWS read jGrowl message?

Question

In my web app, whenever any error occurs, that error message is being displayed through jGrowl box:

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

Also I use the jGrowl box for showing normal messages/notifications. I am making my app accessibility friendly. I am using JAWS as screen reader. When a jGrowl message pops up, JAWS is not reading that message.

How do I make JAWS read that message? Any workaround?

Or is there any jQuery method through which I'd know that a jGrowl message is being displayed so that I can set focus or something so that the screen reader reads that message and notify the user.

Thanks in advance.

I do not know jGrowl, and you have offered no URL, but this may be a case for ARIA live regions. — aardrian
jGrowl has not been updated to be aria-friendly. I would love to merge a PR if you're interested in contributing though! — stanlemon
@stanlemon I don't have much experience with ARIA, but sure! I'd love to contribute something and learn on the same side. — Aagam Jhaveri

Aagam Jhaveri Aagam Jhaveri · Accepted Answer · 2017-04-19T18:51:46

Update:

I did a workaround to make the jGrowl messages/notifications readable by screen readers like JAWS. For that I modified the jquery.jgrowl.min.js file a bit.

First find below line in the jquery.jgrowl.min.js file(which by the way plays an important role to render the jGrowl popup):

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

And now add a 'role' attribute assign 'alert' as a value in that div. You can also add an ARIA label which will have the message to be read by screen reader.

So after changes, it looks something like this:

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:""))

Hope this is helpful. It worked for me :)

Can screen reader like JAWS read jGrowl message?

1 Answers