ARIA hace que el lector lea contenido de elementos no enfocados

8

Tengo elementos en una página que son "enfocables" (botones, elementos con índice de tabla, etc.) y el lector de pantalla lee bien el contenido.

Sin embargo, tengo algunos otros elementos que no son enfocables (debido al hecho de que hay muchos de ellos: resultados de la lista desplegable, etc.), por lo que no quiero que el usuario haga clic en la pestaña innumerables veces, pero se pueden navegar a izquierda / derecha / teclas arriba / abajo, y obtienen la clase CSS "seleccionada" (aunque algún otro elemento, su padre, está realmente enfocado)

Quiero hacer que el lector lea esos elementos específicos, con la clase "seleccionado". ¿Cómo lo hago?

(Intenté aplicarles el atributo aria-label = "read this", pero no funcionó; solo funciona si el elemento está realmente enfocado)


Aquí hay más detalles para ayudarlo a comprender lo que quiero lograr:

<div tabindex="0" >
  <span>title1</span>
  <ul>
    <li class="selected">item1</li>
    <li>item2</li>
    <li>item3</li>
  </ul>
</div>

<div tabindex="0">
  <span>title2</span>
  <ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
  </ul>
</div>

Aquí está el violín: https://jsfiddle.net/d5gbjst1/1/

Puede tabular de un lado a otro entre esos 2 divs y cualquier lector de pantalla (intenté con Windows Narrator, NVDA y JAWS) leerá "title1" y todos los elementos para el primero y "title2" y todos los elementos para el segundo, dependiendo de dónde está el foco .

Observe la clase "seleccionada" en el primer elemento en el primer ul. Ahora, navego con las flechas arriba / abajo a través de mis listas ul, y la clase "seleccionada" cambia de un elemento a otro en consecuencia. (Ese es el código JS separado, no incluido en este ejemplo por simplicidad)

Cuando la clase "seleccionada" se aplica al elemento, quiero obligar al lector a leerlo. ¿Es posible en absoluto?


Editar: Intenté también agregar atributos a ul y li, todavía no tuve suerte:

<ul role="list">
 <li role="listitem">
Dalibor
fuente

Respuestas:

2

Tuve el mismo problema la otra semana, la solución que utilicé fue usar aria-describedbyy también aria-labelproporcionar información adicional de toda la página en el elemento que actualmente tiene foco.

En un caso, cambiamos el contenido de aria-labelpara proporcionar detalles adicionales solo la primera vez que el elemento tiene el foco.

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-descriptionsby_attribute

David Bradshaw
fuente
No estoy seguro de entender. Mi elemento con la clase "seleccionado" y nunca recibe el foco. Su estado nunca está enfocado (como en el navegador enfocado, la regla (": focus") nunca es cierta)
Dalibor
No me comprende, en el elemento que tiene el foco, agregue una etiqueta de aria que brinde información sobre el elemento que desea leer. No puedes hacer directamente lo que quieres hacer, pero puedes fingirlo
David Bradshaw
Es imposible para mí agregar etiquetas de elementos "ul" de cada elemento "li"
Dalibor
Puede usar aria-discriptionsby para enumerar las ID de cada LI para que se lean todas. No es bonito, pero desafortunadamente a menudo es la única forma.
David Bradshaw
¿Por qué lo haría? ¿Por qué no usaría aria-label en lugar de aria-labelledby algún otro elemento? Echas de menos el punto, no quiero que se centren los elementos "li".
Dalibor
0

Quiero hacer que el lector lea esos elementos específicos, con la clase "seleccionado". ¿Cómo lo hago?

No creo que debas intentar hacer eso. Los lectores de pantalla, especialmente los que ha probado, tienen teclas intrincadas para permitir a los usuarios navegar hacia, desde y entre elementos específicos y luego saltar dentro y fuera de ellos.

Forzar un comportamiento no estándar para las tecnologías accesibles podría crear una experiencia frustrante para esos usuarios.

Editar: Intenté también agregar atributos a ul y li, todavía no tuve suerte:

<ul role="list"> <li role="listitem">

Evite establecer roles para las listas, ya que tienen estos asignados por defecto. Ver aquí: https://www.w3.org/TR/html53/grouping-content.html#ref-for-allowed-aria-role-attribute-values%E2%91%A1%E2%91%A0

Observe la clase "seleccionada" en el primer elemento en el primer ul. Ahora, navego con las flechas arriba / abajo a través de mis listas ul, y la clase "seleccionada" cambia de un elemento a otro en consecuencia. (Ese es el código JS separado, no incluido en este ejemplo por simplicidad)

Cuando la clase "seleccionada" se aplica al elemento, quiero obligar al lector a leerlo. ¿Es posible en absoluto?

He probado usando el narrador y el simulador de lector de pantalla para Chrome con tu jsfiddle. El comportamiento esperado, y lo que he logrado reproducir, es lo que estás buscando. ¿Corrígeme si estoy equivocado?

Primero, hago clic en la pestaña y me concentro en el siguiente marcado:

<div tabindex="0" >
  <span>title1</span>
  <ul>
    <li class="selected">item1</li>
    <li>item2</li>
    <li>item3</li>
  </ul>
</div>

Lo que hace que el lector de pantalla regrese

"título1, elemento1, elemento2, elemento3"

En rápida sucesión. Como era de esperar

Vuelvo a hacer clic en la pestaña para centrarme en este marcado:

<div tabindex="0">
  <span>title2</span>
  <ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
  </ul>
</div>

Y el lector de pantalla vuelve

"título 2, elemento1, elemento2, elemento3"

En rápida sucesión. De nuevo, como era de esperar

Finalmente, hago clic en la pestaña nuevamente para volver a enfocar el primer marcado y usar la tecla de flecha abajo. El lector de pantalla vuelve

"Ingrese a la lista. Uno de tres. Viñeta. Artículo 1"

Luego hago clic en la tecla de flecha abajo nuevamente para pasar a la segunda viñeta.

"Dos de tres. Bala. Artículo 2."

Hago clic en la tecla de flecha abajo nuevamente.

"Tres de tres. Bala. Artículo 3".

Este comportamiento es lo que esperaría y es, por la experiencia que tengo de pasar dos evaluaciones de WCAG 2.1 de Doble A, la norma.

¿Qué comportamiento estás esperando? Específicamente, ¿qué es lo que quiere que le devuelva / diga su lector de pantalla?

dvro
fuente
No obtengo los resultados como tú. Cuando uso el Narrador de Windows solo obtengo "flecha hacia abajo" y "flecha hacia arriba" cuando hago clic en las flechas hacia abajo y hacia arriba. En cuanto a NVDA, el comportamiento hacia arriba y hacia abajo está bloqueado por alguna razón (algunas teclas de acceso rápido probablemente lo activaron), y en cuanto a las flechas hacia arriba y hacia abajo de JAWS tienen el mismo efecto que las pestañas de ida y vuelta.
Dalibor
Parece que su narrador, y tal vez otras tecnologías de asistencia, están anunciando sus pulsaciones de teclas en lugar de seguir su navegación en pantalla. He confirmado nuevamente con Narrador esta mañana y he replicado el comportamiento de mi respuesta anterior.
dvro
Tuve el mismo resultado (flecha hacia abajo / flecha hacia arriba) cuando instalé Screen Reader Simulator para Chrome. Yo uso Win10 y la última versión de Chrome. No sé cómo es posible para mí tener un resultado diferente al tuyo.
Dalibor
Algo que debe verificar: en la configuración del Narrador, desplácese hacia abajo para "Cambiar lo que escucha al escribir" y asegúrese de que las casillas de verificación 1, 2 y 5 estén marcadas. Esa es la configuración predeterminada.
dvro
Tengo la configuración predeterminada de Narrador, y el Narrador funciona bien pestaña de conserje
Dalibor
0

Tuve el mismo problema recientemente y durante la investigación, encontré información sobre el atributo aria-activedescendant: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-activedescendant_attribute

En este caso, cada elemento de la lista debe tener un atributo de identificación único. Cuando se selecciona el elemento de la lista, su id. Debe proporcionarse al atributo aria-activedescendant del padre enfocado.

<div tabindex="0" aria-activedescendant="Id1">
  <span>title1</span>
  <ul>
    <li class="selected" id="Id1">item1</li>
    <li id="Id2">item2</li>
    <li id="Id3">item3</li>
  </ul>
</div>
Paweł Głosz
fuente
-1

Podría intentar agregar un índice de tabulación a esos elementos específicos, pero debe tener cuidado al usarlo, ya que puede conducir a páginas que pueden ser realmente difíciles de navegar si usa valores mayores que 0. Aquí hay un enlace para una respuesta más detallada. https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex

Jón Ólafsson
fuente
Le dije específicamente que el elemento no debe ser enfocable, y el atributo tabindex los hace enfocables.
Dalibor