javascript - img - Cómo obtener un lector de pantalla para dejar de leer y leer contenido diferente

title html css

Question

He escrito un sitio que usa jQuery para mostrar una ventana emergente modal. Básicamente 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 la página se carga, 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 diálogo modal. Mi pregunta es: ¿cómo interrumpo la lectura del lector de la pantalla de la parte principal del sitio y le digo que comience a leer el texto del diálogo?

Mi contenedor modal está envuelto en un div como este:

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

El jQuery que dispara el modal se ve 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 cerrar dentro del diálogo modal. Habría pensado que centrar la atención en esto le daría instrucciones al lector de pantalla para que comience a leer desde ese elemento.

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

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

Answer 1

¿Puedes 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 desactivado.

Answer 2

Es su responsabilidad como desarrollador presentar el contenido de una página de manera que sea legible para el lector de pantalla.

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

• Use las etiquetas HTML correctas para estructurar sus documentos. Al hacerlo, las tecnologías de asistencia pueden traducir los encabezados, párrafos, listas y tablas al braille o al habla de una manera comprensible.
• Asegúrese de que el sitio web también sea operable sin usar el mouse. En la mayoría de las situaciones, no se requieren acciones especiales, excepto si, por ejemplo, utiliza los menús desplegables. Esta guía en 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 agregando subtítulos u ofreciendo 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 ningún uso para una persona ciega o una persona que no tiene color.
• Una pantalla braille actualizable no puede mostrar imágenes. Por lo tanto, debe agregar descripciones cortas para imágenes y botones gráficos. No aparecen en la pantalla, pero sí son detectados por el software del lector de pantalla que usan los ciegos y los discapacitados visuales.
• El uso de tecnologías como Flash y JavaScript debe ser bien considerado. Además, las animaciones pesadas y el parpadeo son muy perturbadores para las personas que sufren de dislexia o epilepsia.

Pero en última instancia, es responsabilidad del lector de pantalla asegurarse de que se detenga y comience cuando tenga sentido para el usuario, si no es posible, el usuario debe hacer una pausa en el lector.

Debido a la gran variedad de lectores de pantalla que hay, lo que estás preguntando parece bastante imposible.

Answer 3

Esto se puede lograr usando ARIA role="dialog" . Tendrías que modificar este código para tu ejemplo, es vanilla js, por lo que probablemente el tuyo será más corto / 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

Me enfrenté al mismo problema y lo resolví con los siguientes setp

• creó un div más (# mensaje) dentro del contenedor contenedor modal para colocar todo el mensaje
• Y establezca el atributo aria-labelledby en el botón de cierre para señalar el contenedor #message

Answer 5

aria-hidden = "true" hará que los lectores de pantalla no perciban ese elemento y su contenido, lo que significa que no se leerá.

aria-label establecerá el texto que las tecnologías de asistencia (lectores de pantalla, etc.) percibirán.

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