Search code examples
jqueryaccessibilityjaws-screen-readerjgrowl

Can screen reader like JAWS read jGrowl message?

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.

Solution

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