Force JAWS to pronounce arbitrary text with JavaScript

RELATED TO:

AUTHOR: Peter Milchev

DATE POSTED: July 29, 2019

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
         */
        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:

More Resources

  • Forums

    Find answers to thousands of questions or reach out to our active community.

  • Demos

    Browse 1,200+ demos with source code covering basic and advanced scenarios.

  • Sample Applications

    Learn how to integrate the controls in real-world examples.

  • Feedback Portal

    Vote and follow the features you want to see added to Telerik UI for ASP.NET AJAX.

  • User Voice

    Get answers directly from the people who build the product.

  • Documentation

    Benefit from detailed help articles and API references for all controls.

  • Knowledge Base

    Learn how to achieve common scenarios from a multitude of tutorials and working examples.

  • Code Library

    Browse sample projects submitted by Telerik staff and community members.

  • Blog

    Stay up-to-date with the latest functionality, how-to articles and industry trends.

  • Release History

    Up-to-date release notes for all new features and improvements.