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

84

Muchos sitios web de demostración de ARIA utilizan códigos 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 aria-labelledbyatributo en este caso? El inputelemento ya ha sido etiquetado por el labelelemento que usa el foratributo, ¿no es así?

— Ian Y.
fuente

1

w3.org/TR/2010/WD-wai-aria-20100916/…

— Sarfraz

8

Gracias @Sarfraz. Sin embargo, esa página no ilustra el propósito de tal uso en elementos de entrada ya etiquetados.

— Ian Y.22 de

69

Hay algunos buenos ejemplos de su uso en las páginas de Mozilla Developer . Quizás el mejor de sus ejemplos es donde se usa 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 mayor utilidad en la creación de aplicaciones de Internet enriquecidas y accesibles : siempre que se ciña a HTML semántico estándar, utilizando formularios con etiquetas estándar, no debería necesitarlo en absoluto: por lo que no hay razón para usarlo en un par LABEL / INPUT. Pero si está construyendo una "interfaz de usuario rica" desde cero (DIV y otros elementos de bajo nivel con javascript que agrega interactividad), entonces es esencial que un lector de pantalla sepa cuál es la intención de nivel superior.

— BrendanMcK
fuente

11

Gracias @BrendanMcK. Lo que dijiste es verdad. Le pregunté a alguien que trabaja para ARIA y él también dijo que no es necesario usar aria-labelledby en este caso. Para etiquetar <input> s, dijo que lo use solo cuando necesitemos etiquetar un <input> con múltiples <label> s. Aquí hay un ejemplo que proporcionó: html5accessibility.com/tests/mulitple-labels.html

— Ian Y.

1

Se puede asociar más de una ETIQUETA con el mismo control creando múltiples referencias a través del atributo for . Ok, a WAVE / WebAIM no le gusta, y resulta que hay un problema con el soporte de UA . Pero su sugerencia es simplemente extraña y no creo que tenga ninguna ventaja real. Al menos IE <= 8 no admite múltiples ID en aria-labelledby .

— sourcejedi

1

este enlace DEBE estar aquí: developer.mozilla.org/en-US/docs/Accessibility/ARIA

— Facundo Colombier

5

Siempre hay problemas de soporte de UA con cualquier cosa nueva, por eso los desarrolladores buscan la mejora progresiva. Esta técnica ARIA proporciona la capacidad de eliminar el atributo "para" y permite que otros elementos formen parte de la forma rica. Estas técnicas se convertirán en una práctica común.

— usuario2323922
fuente

1

¿Enfoca el elemento cuando se hace clic como lo hace el atributo for? Supongo que no

— Dominic

3

Completamente falso. Se supone que los atributos aria NO reemplazan otros atributos ya que su único propósito es ayudar a que los elementos sean más accesibles. Los elementos NO deben poder enfocarse debido a cualquier atributo aria.

— Gust van de Wal

1

La práctica común (¿lamentablemente?) Actualmente todavía no es cierta en mi opinión. La mejor práctica, podría ser una mejor opción. Quizás en el futuro, cuando sea una práctica común que la IA altamente avanzada escriba html en lugar de humanos :)

— Michael