it-swarm-es.tech

aria-label y label no leen

Por favor considere el siguiente marcado.

<label for="i1" class="inforLabel">This is a label</label>
<input id="i1" type="text" class="inforTextbox" aria-label="Title, not label" />

Para mí, este marcado es lo que se genera después de mi control personalizado de información sobre herramientas. El problema que veo en JAWS en IE es que solo lee "Título, no etiqueta", sin embargo, con otros lectores de pantalla, por ejemplo, Voz sobre la etiqueta y el cuadro de texto aria-label es leído. Creo que debería leer ambos.

¿Es esta una configuración o un error? ¿O hay algo más que alguien pueda recomendar?

12
Tim

Para los elementos que ya tienen un elemento de etiqueta descriptivo en el DOM, es mejor usar aria-labelledby atributo, en lugar de aria-label.

https://www.w3.org/TR/wai-aria/#aria-labelledby

De la documentación:

El propósito de aria-labelledby es el mismo que el de aria-label. Proporciona al usuario un nombre reconocible del objeto.

Si el texto de la etiqueta es visible en la pantalla, los autores DEBEN usar aria-labelledby y NO DEBEN usar aria-label. Use aria-label solo si la interfaz es tal que no es posible tener una etiqueta visible en la pantalla.

Las combinaciones individuales de lector de pantalla y navegador pueden dar resultados inconsistentes cuando no sigue las recomendaciones estándar, ya que la especificación WAI-ARIA puede estar abierta a interpretación.

Por lo general, no es una buena idea asociar varias etiquetas con un elemento accesible. Las etiquetas deben ser concisas. Si desea agregar una descripción adicional, también puede usar aria-describedby.

https://www.w3.org/TR/wai-aria/#aria-descriptionsby

En ambos casos, deberá tener un id en su etiqueta.

<label id="label1" for="input1" class="inforLabel">This is a label</label>
<input id="input1" type="text" class="inforTextbox" aria-labelledby="label1" />

Opcionalmente, si necesita tener varios elementos, puede intentar ponerlos en un div, con un elemento fuera de la pantalla.

<div id="accessible-label1">
  <label for="input1" class="inforLabel">This is a label</label>
  <span class="offscreen">Supplementary text</span>
</div>
<input id="input1" type="text" class="inforTextbox" aria-labelledby="accessible-label1" />

Con CSS apropiado para colocar el elemento de clase fuera de pantalla fuera de la pantalla, esto debería combinar el contenido de texto de los elementos secundarios de accessible-label1 para usar como etiqueta aria. Nuevamente, considere el uso de aria-describedby.

12
Nick