it-swarm.dev

¿Cómo etiquetar una animación de carga para WAI-ARIA?

Estoy trabajando para solucionar algunos problemas de accesibilidad en una página web. Tengo este div que actúa como un diálogo, y dentro de un punto, se muestra un div que contiene una animación de carga y un texto "Trabajando ...".

No estoy seguro de cómo etiquetar estos dos elementos para notificar correctamente al usuario ciego que hay una animación de progreso y que está funcionando y que debería esperar.

<div id="loading" style="display: none;">
        <div class="mgBot15"><span class="txt16" role="alert">Working...</span></div>
        <img src="loading.png" role="progressbar" aria-busy="true"/>
    </div>

Intenté agregar el rol y las propiedades aria-busy al img (también al div padre, al principio).

Cuando aparece este div (al cambiar la propiedad de estilo de visualización), se lee correctamente "Trabajando ..." pero no escucho ninguna indicación de que esté ocupado y que el usuario deba esperar, ¿me estoy perdiendo algo?

He buscado ejemplos para cargar animaciones, hasta ahora en vano.

Nota: Estoy usando NVDA como un lector de pantalla para probar.

Gracias

11
So Many Goblins

La mejor solución que se me ocurrió fue usar role alert, y aria-busy = "true".

<div id="loading" style="display: none;">
    <div class="mgBot15"><span class="txt16" role="alert" aria-busy="true">Working...</span></div>
    <img src="loading.png" alt="loading" />
</div>
14
So Many Goblins

Creo que el enfoque más sensato sería usar el combo aria-busy="true" aria-live="polite"

La razón de esto es porque algunas páginas pueden tener muchos cargadores separados (digamos uno para cada componente, no un solo cargador para toda la página) y usas aria-live="assertive" o role="alert" será muy intrusivo y se llamará a cada uno de los cargadores.

4
Lejeune

El rol correcto para usar aquí es progressbar como la pregunta original utilizada. Otros roles como alert pueden funcionar, pero son menos específicos, lo que significa que la tecnología de asistencia puede presentar la información de una manera menos ideal.

Sin embargo, hay algunos problemas con el ejemplo de la pregunta original:

  • Si desea que el texto se anuncie de la misma manera que una alerta, aria-live="assertive" debe usarse en lugar del rol alert. Ese aria-live valor es lo que hace que el lector de pantalla anuncie el texto cuando lo hace para una alerta.
  • El texto que se anunciará debe establecerse en el elemento con el rol progressbar utilizando el aria-valuetext atributo. No debe establecerse únicamente en un elemento adyacente separado. Si también debe incluirse en otro elemento por motivos de presentación, ese elemento debe tener aria-hidden="true".
  • Según la especificación, aria-valuemin y aria-valuemax se deben especificar incluso cuando el progreso es indeterminado (como un indicador de carga giratorio). Estos podrían establecerse en 0 y 100 respectivamente como marcadores de posición simples que implican un porcentaje.

Cuando se completa la carga, el aria-valuenow podría establecerse en lo que se haya utilizado para aria-valuemax y aria-busy se puede establecer en false.

Esto lleva a una alternativa potencial a la pregunta original:

<div id="loading" role="progressbar" aria-valuetext="Working…" aria-busy="true"
    aria-live="assertive" aria-valuemin="0" aria-valuemax="100">
    <div class="mgBot15" aria-hidden="true"><span class="txt16">Working...</span></div>
    <img src="loading.png" alt="" />
</div>
1
Scott Buchanan

Me encontré con un buen artículo que explica lo que hay que hacer para este escenario Cargando la accesibilidad de la ruleta

La ruleta debe incluirse dentro del contenedor. Su visibilidad se puede alternar en relación con el atributo aria-busy. Siempre deben ser opuestos, es decir, si se está cargando actualmente, sección [aria-busy = "true"], .tn-spinner [aria-hidden = "false"], una vez que se carga el contenido, cambie a falso y verdadero respectivamente.

1
ZeroDarkThirty

¿Intentaste usar role="alertdialog" aria-busy="true" en tu lapso?

0
Clyde Lobo

Después de un día de jugar con un problema similar, finalmente pude hacer que esto funcionara con mucha lectura y experimentación. Estoy usando NVDA para un lector de pantalla.

<div class="loader" show.bind="isLoading" role="alert" aria-label="Loading"></div>

Los siguientes atributos fueron clave: rol y etiqueta-aria. El ejemplo anterior hace que NVDA anuncie "Cargando alerta" una vez que se está cargando. Es importante tener en cuenta que NVDA pronuncia el valor de etiqueta aria, seguido de "alerta". El uso de roles "log" o "status" no terminó en ningún anuncio.

0
malkstor

Tenga en cuenta que esto también se ha respondido aquí ¿Cómo hace que el icono de carga sea accesible para lectores de pantalla como JAWS? con este combo: role = "alertdialog" aria-busy = "true" aria-live = "positivo"

0
Mike Gifford