2011-08-02 18 views
12

Estoy intentando que una región aria-live funcione correctamente con JAWS 11 e IE8.aria-live y JAWS

Usando el siguiente código, puedo hacer que JAWS anuncie el nuevo valor cuando se hace clic en el botón, pero el comportamiento no es el esperado.

JSFiddle of this example

<!DOCTYPE html> 
<html> 
<head></head> 
<body> 
    <button onclick="document.getElementById('statusbar').innerHTML = parseInt(document.getElementById('statusbar').innerHTML) + 1">Update</button> 
    <div id="statusbar" aria-live="polite">0</div> 
</body> 
</html> 

Usando mi JAWS11/configuración de Internet Explorer 8, en cada clic del botón escucho:

 
Click number HTML Value (after click) JAWS says 
------------ ------------------------- --------- 
1    1       "Update button 0" 
2    2       "1" 
3    3       "2" 

El problema, y ​​mi pregunta es: ¿Cómo hago JAWS anuncian valor actual de la región aria-live, en lugar del valor anterior de la región aria-live?

También me interesaría saber cómo otros lectores de pantalla manejarán esta funcionalidad.

+0

El mismo problema no parece ocurrir en [este video que demuestra aria-live] (http://www.youtube.com/watch?v=9nZnTdSAkH0#t=3m8s) - quizá ¿Tiene algo que ver con mi configuración específica? –

Respuesta

12

Tu código es correcto. Aparentemente, el "1 detrás" ha sido discovered. Desde el enlace, parece que usar aria-atomic="true" puede solucionar el problema. Sin embargo, el ejemplo dado hace funciona correctamente en IE9 y Firefox.

Si aún no se ha encontrado con ellos, consulte los casos de prueba en codetalks y accessibleculture.org. Hay muchas diferencias sutiles para tener en cuenta. ¡No te sorprendas cuando las pruebas fallan! Durante el año pasado más o menos, me encontré con algunos trucos (inadecuados) que pueden ayudarte.

Método 1: role="alert"

El papel es alertsupposed to be equivalente a aria-live="assertive", pero más viejas versiones de JAWS no se manejan correctamente. Echa un vistazo a these examples de febrero de 2011, que establece que:

Si usted está mirando para apoyar JAWS 10 en IE7 o IE8 en absoluto, es probable que la mejor manera de duplicar en alerta tanto con función = "alerta" y Aria -live = "asertivo". Si bien esto es algo redundante ya que, por definición, la función de alerta debe procesarse como una región en vivo asertiva, hacerlo permite que JAWS 10 anuncie automáticamente el contenido de la alerta actualizada en esos dos navegadores.

Tanto Firefox4 + como IE9 no requieren esto. Sin embargo, sería algo como esto:

<div id="statusbar" role="alert" aria-live="assertive"> 
    Contents will be spoken when changed 
</div> 

Método 2: centrarse obligando a cortar

Al crear dinámicamente un elemento DOM y forzando el foco a ella, puede "engañar" a la mayoría de los lectores de pantalla en la lectura de la contenido. Es hackish, pero efectivo ... y de alguna manera el punto del ejemplo Create and Focus. Simplificada, se puede hacer algo como esto:

<div id="statusbar" role="alert" tabindex="-1"></div> 

$('#statusbar') 
    .clear() 
    .append('<div>' + newString + '</div>') 
    .children().first().focus() 
; 

Simplemente ocultar/mostrar el contenido en lugar realmente funciona bastante bien la mayor parte del tiempo. Sin embargo, el foco de VoiceOver permanece en el elemento y no dice su contenido cuando se muestra de nuevo. Por lo tanto, eliminarlo del DOM parece ser el método más infalible por el momento.No me gusta, pero tal es el estado de las cosas.

+0

¡Gran respuesta, gracias! El uso de aria-live = "educado" y rol = "alerta" efectivamente lee el valor actual (en lugar del anterior) con IE8 y JAWS 11, sin embargo, lee el valor actual dos veces. Un comentario condicional para

+0

@Daniel, gracias por la actualización de IE8. ¡Buena suerte! –

0

Si está utilizando JAWS, creo que es necesario también para configurar el modo por defecto; porque el lector de pantalla tiene un modo de "solo lectura". este problema puede ser resuelto a través de la prensa:

(Insert + z) para encender/apagar los lectores de pantalla de sólo lectura.

http://www.mozilla.org/access/qa/win-webcontent-jaws.html

Cuestiones relacionadas