How to get a screen reader to stop reading and read different content

aria-hidden="true" will make screen readers to not perceive that element and its content, which means that it will not be read out.

aria-label will set the text which assistive technologies (screen readers, etc) will perceive.

http://www.w3.org/TR/wai-aria/states_and_properties


This can be accomplished using ARIA role="dialog". you'd have to modify this code for your example, it's vanilla js, so yours will probably be shorter/easier via jQuery.

HTML:


<div role="dialog" aria-labelledby="myDialog" id="box" class="box-hidden" tabindex="-1">
  <h3 id="myDialog">Just an example.</h3>
  <button id="ok" onclick="hideDialog(this);" class="close-button">OK</button>
  <button onclick="hideDialog(this);" class="close-button">Cancel</button>      
</div>

JavaScript:


var dialogOpen = false, lastFocus, dialog, okbutton, pagebackground;

function showDialog(el) {
    lastFocus = el || document.activeElement;
    toggleDialog('show');
}
function hideDialog(el) {
    toggleDialog('hide');
}

function toggleDialog(sh) {
    dialog = document.getElementById("box");
    okbutton = document.getElementById("ok");
    pagebackground = document.getElementById("bg");

    if (sh == "show") {
        dialogOpen = true;

        // show the dialog 
        dialog.style.display = 'block';

        // after displaying the dialog, focus an element inside it
        okbutton.focus();

        // only hide the background *after* you've moved focus out of the content that will be "hidden"
        pagebackground.setAttribute("aria-hidden","true");

    } else {
        dialogOpen = false;
        dialog.style.display = 'none';
        pagebackground.setAttribute("aria-hidden","false");
        lastFocus.focus(); 
    }
}


document.addEventListener("focus", function(event) {

    var d = document.getElementById("box");

    if (dialogOpen && !d.contains(event.target)) {
        event.stopPropagation();
        d.focus();
    }

}, true);


document.addEventListener("keydown", function(event) {
    if (dialogOpen && event.keyCode == 27) {
        toggleDialog('hide');
    }
}, true);  

source: http://3needs.org/en/testing/code/role-dialog-3.html
more reading: http://juicystudio.com/article/custom-built_dialogs.php


It is your responsibility as a developer to present the content of a page in a way that makes it readable for the screenreader.

from http://www.anysurfer.be/en/index.html:

  • Use the right HTML tags to structure your documents. By doing so, assistive technologies can translate headings, paragraphs, lists and tables to braille or speech in a comprehensible manner.
  • Make sure that the website is also operable without using the mouse. In most situations, no special actions are required, except if - for instance - you use dropdown menus. This particular guideline is of great importance to visitors that are only able to use the keyboard.
  • You can make your audio and video fragments accessible to visitors with an auditive or visual constraint by adding subtitles or by offering a transcription.
  • Never solely rely on colors to convey structural information. The message ‘The fields in red are mandatory’ has no use for a blind person or someone who is colorblind.
  • A refreshable braille display cannot display images. Therefore, you should add short descriptions for images and graphical buttons. They don't appear on the screen, but they do get picked up by the screenreader software used by the blind and visually impaired.
  • The use of technologies like Flash and JavaScript should be well-considered. Moreover, heavy animations and flickering are very disturbing for people who suffer from dyslexia or epilepsy.

But is ultimately the responsibility of the screen reader to make sure that it stops and starts when it makes sense to the user, if not possible the user should pause the reader itself.

Because of the large variety of screen readers out there, what you are asking seems quite impossible.