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

Force JAWS to pronounce arbitrary text with JavaScript


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


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


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:


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

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

        panel.setAttribute("aria-live", "assertive");
        // = "absolute";
        // = "-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;
    } = function read(message, force) {
        var panel = getPanel();

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

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


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

    function focusHandler() {'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"It works also on button click.", true)

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

See Also:

In this article