Cómo hacer que un lector de pantalla deje de leer y lea contenido diferente

Question

He escrito un sitio que usa jQuery para mostrar un menú emergente modal. En esencia, cubre toda el área visible de la pantalla con una superposición, luego muestra un DIV que contiene la ventana emergente real en la parte superior de la superposición. Uno de los requisitos para este proyecto tiene que ver con la accesibilidad.

Cuando se carga la página, el lector de pantalla comienza a leer desde la parte superior de la página. Cuando un usuario hace clic en un enlace en particular, mostramos un cuadro de diálogo modal. Mi pregunta es: ¿cómo puedo interrumpir la lectura del lector de pantalla de la parte principal del sitio y decirle que empiece a leer el texto del diálogo?

Mi contenedor modal está envuelto en un div así:

<div id="modalcontainer" tabindex="0" class="popup" role="dialog" aria-labelledby="dialog-label" > 

El jQuery que dispara el modal es así:

$("#modalLink").click(function (e) { 
    e.preventDefault(); 

    $("#modalcontainer").center(); 
    $("#modalcontainer").show(); 
    $("#closeBtnLink").focus(); 
    $("#wrapper").attr('aria-disabled', 'true'); 
}); 

El "closeBtnLink" es el botón de cierre en el modal diálogo. Hubiera pensado que centrarme en esto indicaría al lector de pantalla que empiece a leer desde ese elemento.

El elemento "envoltorio" es un SIBLING del cuadro de diálogo modal. Por una sugerencia de otro usuario de SO por diferentes razones, configuro "aria-disabled = true" en el elemento contenedor que contiene la página completa. El diálogo modal existe como un hermano fuera de este contenedor.

Mi objetivo principal aquí es que el lector de pantalla lea los contenidos de mi elemento DIV modal cuando hacen clic en un enlace específico. Cualquier ayuda sería apreciada.

Answer 1

Es su responsabilidad como desarrollador presentar el contenido de una página de forma que sea legible para el lector de la misma.

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

• utilizar las etiquetas HTML adecuadas para estructurar sus documentos. Al hacerlo, las tecnologías de asistencia pueden traducir títulos, párrafos, listas y tablas al braille o al habla de una manera comprensible.
• Asegúrate de que el sitio web también esté operativo sin usar el mouse. En la mayoría de las situaciones, no se requieren acciones especiales, excepto si, por ejemplo, utiliza menús desplegables. Esta guía particular es de gran importancia para los visitantes que solo pueden usar el teclado.
• Puede hacer que sus fragmentos de audio y video sean accesibles para los visitantes con una restricción auditiva o visual al agregar subtítulos u ofrecer una transcripción.
• Nunca confíe únicamente en los colores para transmitir información estructural. El mensaje 'Los campos en rojo son obligatorios' no tiene uso para una persona ciega o alguien que es daltónico.
• Una pantalla Braille actualizable no puede mostrar imágenes. Por lo tanto, debe agregar descripciones breves para imágenes y botones gráficos. No aparecen en la pantalla, pero sí son recogidos por el software de lector de pantalla utilizado por ciegos y deficientes visuales.
• El uso de tecnologías como Flash y JavaScript debe tenerse en cuenta. Además, las animaciones pesadas y el parpadeo son muy molestos para las personas que sufren de dislexia o epilepsia.

Pero es en última instancia la responsabilidad del lector de pantalla para hacer seguro de que se detiene y se inicia cuando tiene sentido para el usuario, si no posible que el usuario debe hacer una pausa en el propio lector.

Debido a la gran variedad de lectores de pantalla por ahí, lo que están pidiendo parece bastante imposible.

Answer 2

¿Se puede usar ARIA Live Regions? https://developer.mozilla.org/en/ARIA/Live_Regions Luego en Javascript durante la visualización modal, intercambie las regiones con asertivo y apagado.

Answer 3

esto se puede lograr usando ARIA role="dialog". Tendría que modificar este código para su ejemplo, es vanilla js, por lo que el suyo probablemente será más corto/más fácil a través de 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); 

fuente: http://3needs.org/en/testing/code/role-dialog-3.html
más lectura: http://juicystudio.com/article/custom-built_dialogs.php

Answer 4

que enfrentan el mismo problema y lo resolvió con la siguiente de setp

• creado una más div (#message) en el interior de contenedores envoltorio modal para colocar todo el mensaje
• Y establecer el atributo aria-labelledby al botón cerca del punto en el contenedor #message

Answer 5

aria-ocultos = "verdadero" hará que los lectores de pantalla no perciban ese elemento y su contenido, lo que significa que no será leído.

aria-etiqueta se fija el texto, que percibirán las ayudas técnicas (lectores de pantalla, etc).

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