javascript - true - Cómo notificar a los lectores de pantalla que utilizan WAI-ARIA que un div ahora está visible

the aria hidden attribute is equivalent to hidden attribute in html5

Question

¿Cómo notifica a los lectores de pantalla que utilizan WAI-ARIA que ahora hay un div visible?

Si conseguimos el html

<div id="foo">Present main content</div>
<div id="bar" style="display: none;">Hidden content</div>

y luego nosotros

$(''#foo'').hide();
$(''#bar'').show();

¿Cómo notificamos a los lectores de pantalla que deben notificar al usuario sobre la división ahora visible (o posiblemente enfocarse automáticamente en la división ahora visible)?

Answer 1

Al etiquetar el contenido con role = "alerta", se activará un evento de alerta al que los lectores de pantalla responderán cuando esté visible:

<div id="content" role="alert">
...
</div>

$("#content").show();

Esto alertaría al usuario cuando #content se haga visible.

Aria-hidden debe usarse cuando hay algo que quiere ocultar del lector de pantalla, pero mostrárselo a los usuarios videntes. Usar con cuidado sin embargo. Consulte aquí para obtener más información: http://www.456bereastreet.com/archive/201205/hiding_visible_content_from_screen_readers_with_aria-hidden/

Answer 2

Creé una muestra que muestra cómo podría usar role = "alert" para notificar a los usuarios de lectores de pantalla cuando se aproximan al límite de caracteres de un elemento de área de texto. Si está tratando de entender cómo usar el rol de alerta, puede ser útil:

Hay más que eso, pero aquí está la pequeña parte del código que produce la alerta:

if (characterCount > myAlertTheshold) {
       var newAlert = document.createElement("div"); /* using the native js because it''s faster */
       newAlert.setAttribute("role", "alert");
       newAlert.setAttribute("id", "alert");
       newAlert.setAttribute("class","sr-only");
       var msg = document.createTextNode(''You have '' + charactersRemaining +'' characters of '' + myMaxLength + '' left'');
       newAlert.appendChild(msg);
       document.body.appendChild(newAlert);
     }

http://codepen.io/chris-hore/pen/emXovR

Answer 3

En general, no es necesario que le diga a los lectores de pantalla que el contenido ahora está visible. El uso de aria-hidden no hace ninguna diferencia en la práctica, por lo que sugeriría no usarlo. Si desea que el contenido de texto de la división oculta sea anunciado por un lector de pantalla, puede usar role=alert o aria-live=polite (por ejemplo). Lo usaría para el contenido actualizado que desea que escuche un lector de pantalla sin tener que desplazarse a la ubicación del contenido para descubrirlo. Por ejemplo, un mensaje emergente que no recibe el foco, pero que contiene información de texto que es relevante para un usuario después de una acción como presionar un botón.

actualización: discutí con una de las personas que desarrollaron ARIA 1.0, sugirió usar HTML5 hidden lugar de aria-hidden como una indicación semántica de que el contenido está oculto. utilícelo junto con la display:none CSS display:none para navegadores más antiguos. Los navegadores que admiten HTML5 hidden implementan usando display:none en la hoja de estilo del agente de usuario.

Answer 4

Usa aria-hidden

Indica que el elemento y todos sus descendientes no son visibles ni perceptibles para ningún usuario tal como lo implementó el autor. Ver aria-discapacitados relacionados.

Si un elemento solo es visible después de alguna acción del usuario, los autores DEBEN establecer el atributo aria-hidden en verdadero. Cuando se presenta el elemento, los autores DEBEN establecer el atributo aria-hidden en falso o eliminar el atributo, lo que indica que el elemento es visible . Algunas tecnologías de asistencia acceden a la información de WAI-ARIA directamente a través del DOM y no a través de la accesibilidad de la plataforma admitida por el navegador. Los autores DEBEN establecer aria-hidden = "true" en el contenido que no se muestra, independientemente del mecanismo utilizado para ocultarlo. Esto permite que las tecnologías de asistencia o los agentes de usuario omitan correctamente los elementos ocultos en el documento.

por lo que su código podría convertirse

$(''#foo'').hide().attr(''aria-hidden'', ''true'');
$(''#bar'').show().attr(''aria-hidden'', ''false'');