html - w3school - El propósito de usar "aria-labelledby" en elementos de entrada ya etiquetados?

aria-label bootstrap

Question

Muchos sitios web de demostración de ARIA usan código como:

<label for="name" id="label-name">Your Name</label>
<input id="name" aria-labelledby="label-name" type="text">

¿Pero cuál es el propósito de usar el atributo aria-labelledby en este caso? El elemento de input ya ha sido etiquetado por el elemento de label que está utilizando for atributo, ¿no es así?

Answer 1

Hay algunos buenos ejemplos de su uso en las páginas de desarrolladores de Mozilla . Quizás el mejor de sus ejemplos es el que se utiliza para asociar un menú emergente con el elemento del menú principal; es el Ejemplo 7 en la página:

<div role="menubar">
<div role="menuitem" aria-haspopup="true" id="fileMenu">File</div>
<div role="menu" aria-labelledby="fileMenu">
<div role="menuitem">Open</div>
<div role="menuitem">Save</div>
<div role="menuitem">Save as ...</div>
...
</div>
...

Los atributos de ARIA tienden a ser de gran utilidad en la creación de aplicaciones de Internet enriquecidas accesibles: siempre que se mantenga con el HTML semántico estándar, utilizando formularios con etiquetas estándares, no debería necesitarlo en absoluto, por lo que no hay razón para usarlo. un par LABEL / INPUT. Pero si está creando una "interfaz de usuario enriquecida" desde cero (DIV y otros elementos de bajo nivel con javascript que agrega interactividad), entonces es esencial que el lector de la pantalla sepa cuál es la intención de nivel más alto.

Answer 2

Siempre hay problemas de soporte de UA con algo nuevo, por eso los desarrolladores miran hacia la mejora progresiva. Esta técnica ARIA proporciona la capacidad de eliminar el atributo "para" y permite que otros elementos se conviertan en parte de la forma enriquecida. Estas técnicas se convertirán en práctica común.