New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Force JAWS to pronounce arbitrary text with JavaScript

HOW TO

Call a JavaScript function and make JAWS read the custom text.

DESCRIPTION

Sometimes we need to force JAWS to read more text, either for further instructions or workaround a bug in a complex scenario.

SOLUTION

The Aria-Live region allows the assistive reader technologies, such as JAWS, to read an updated content in a live area region.

For optimal solutions, a visually hidden element with aria-live attribute can be added. We will update this element's content and force JAWS to pronounce it. To visually hide the div, we add the "position: absolute" and "left: -9999px", because readers ignore elements with "display: none" or "visibility: none".

It is advisable to have the panel element in the initial markup with the aria-live set from the server, as creating it dynamically might not work with readers in all cases.

The following script checks for the element and adds it programmatically to the <body>. You can also check an example how to use the script:

jaws-reader-script.js

;(function (global, undefined) {
    var panelId = "my-jaws-reader-panel-id";
    global.jawsReader = global.jawsReader || {};

    function createPanel() {
        var panel = document.createElement("div");
        document.body.append(panel);

        panel.setAttribute("aria-live", "assertive");
        //panel.style.position = "absolute";
        //panel.style.left = "-9999px";
        return panel;
    }

    function getPanel() {
        var panel = document.getElementById(panelId);
        /* If the <div> element is not visible on page load,
            then the assistive reader technology, such as JAWS,
            might have issues with the aria-live region
            https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions
         */
        if (!panel) {
            panel = createPanel();
        }

        return panel;
    }

    global.jawsReader.read = function read(message, force) {
        var panel = getPanel();

        if (force) {
            panel.innerText = "";
        }

        setTimeout(function () {
            panel.innerText = message;
        }, 50);
    }
})(window);

Index.html

<div id="my-jaws-reader-panel-id" aria-live="assertive" style="position: absolute; left: -9999px">
</div>
<script src="jaws-reader-script.js"></script>

<script>
    function focusHandler() {
        jawsReader.read('It works on input focus.');
    }

    function clickHandler() {
        // the second argument will force JAWS to read the message
        // even if the previously read message was the same
        jawsReader.read("It works also on button click.", true)
    }
</script>

<input type="text" onfocus="focusHandler();" value="" />
<input type="button" onclick="clickHandler();" onsubmit="clickHandler();" value="click and JAWS will read" />

See Also:

In this article