form-control-programmatic-label-quality
Los controles de formulario deberían tener una etiqueta mostrada en pantalla
Marca los controles de formulario cuyo nombre accesible procede de placeholder, title, aria-label o aria-labelledby que apunta solo a texto oculto, ninguno de los cuales es una etiqueta mostrada en pantalla. Se prefiere un <label> visible, o aria-labelledby que apunte a texto visible.
Ámbito de aplicación. Se aplica a los controles de formulario nativos etiquetables expuestos a las tecnologías de asistencia:
- input (excluyendo type=hidden|submit|reset|button|image)
- select
- textarea
role="presentation"/"none" se excluyen solo cuando no son enfocables. Se excluye un control que no se dibuja en pantalla: transparente (opacity 0, propia o de un ancestro) o recortado (como lo está el texto visualmente oculto), como ocurre con una casilla de verificación oculta tras un interruptor estilizado. No tiene una etiqueta visible que evaluar; su sustituto visible sí. Solo cuentan los controles que tienen un nombre programático: un control sin ninguno es un hallazgo de form-control-programmatic-label-present, no una cuestión de lo bueno que es su nombre.
Resultado esperado. Si un control tiene un nombre programático, este no debería proceder ÚNICAMENTE de:
- placeholder (no vacío)
- title (no vacío)
- aria-label
- aria-labelledby cuyos elementos referenciados están todos sin renderizar (hidden, display:none, visibility:hidden)
Se prefiere un <label> asociado o aria-labelledby que apunte a texto visible.
Qué informa un hallazgo.
labelMethod: de dónde procede la etiqueta del control:placeholder,title,aria-labeloaria-labelledby.reasonCode:label_from_placeholder_primary,label_from_title_primary,label_from_aria_label_onlyolabel_from_hidden_labelledby.sourceText: el texto de la etiqueta, hasta 120 caracteres.
Estos campos de data.details ayudan a leer y reproducir un hallazgo. Salvo reasonCode y los pocos campos que Esquema de salida indica como estables, no son un contrato estable: un campo puede cambiar de nombre o desaparecer en una versión menor, así que no construyas sobre ellos.
Ejemplos
<label for="email">Email address</label><input type="text" id="email" placeholder="name@example.com">
Un <label> persistente proporciona el nombre; placeholder aquí es solo una pista de formato.
<input type="text" placeholder="Email address">
El único nombre del control proviene de placeholder, que desaparece en cuanto el usuario empieza a escribir.
<input type="text" title="Name">
El único nombre del control procede de title, que solo se muestra al pasar el puntero. Ambos le dan un nombre al control, así que se cumple WCAG 4.1.2; lo que falta es una etiqueta que se muestre a todo el mundo, que es el SC 3.3.2.
<input type="search" aria-label="Search">
El único nombre del control procede de aria-label, que nunca se muestra en pantalla. Un texto visible junto al campo, como un botón de búsqueda, puede seguir indicando a los usuarios videntes para qué sirve, así que esto requiere que alguien lo mire, no un fallo.
Cómo comprobarlo
Cuando esta regla no puede decidir, informa cantTell y deja la pregunta a una persona. Cada pregunta que puede plantear aparece aquí bajo su código de motivo, con los pasos para responderla. Un hallazgo lleva los mismos pasos en howToCheck, en el idioma del análisis. Consulta Esquema de salida.
label_from_aria_label_only
- Localizar en pantalla el campo que indica el informe y leer su aria-label, que da el informe.
- Buscar texto mostrado junto al campo (una etiqueta visible, un encabezado o una leyenda) que diga qué introducir.
Se cumple. Un texto mostrado junto al campo, o un icono de significado evidente como una lupa en un campo de búsqueda, dice qué introducir.
No se cumple. Nada en pantalla dice qué introducir en el campo, lo que incumple WCAG 3.3.2.
label_from_hidden_labelledby
- Localizar el campo que indica el informe y, en las herramientas para desarrolladores, seguir sus id de aria-labelledby hasta los elementos a los que apuntan.
- Comprobar si esos elementos se muestran en pantalla cuando se muestra el campo.
- Buscar otro texto visible junto al campo que diga qué introducir. También cuenta un botón justo después del campo que dice lo que hace, como Buscar tras un campo de búsqueda.
Se cumple. El texto que etiqueta el campo se muestra con él, u otro texto junto a él, o un botón justo después como Buscar, dice qué introducir.
No se cumple. La etiqueta solo está en elementos ocultos y nada en pantalla dice qué introducir, lo que incumple WCAG 3.3.2.
label_from_placeholder_primary
- Localizar el campo que indica el informe y leer su texto provisional.
- Escribir algo en el campo.
- Comprobar si algo que sigue visible en pantalla dice para qué es el campo: una etiqueta o un texto junto a él. También cuenta un botón justo después del campo que dice lo que hace, como Buscar tras un campo de búsqueda.
Se cumple. Una etiqueta, un texto junto al campo o un botón justo después como Buscar sigue en pantalla una vez rellenado y dice qué introducir.
No se cumple. Una vez rellenado el campo, nada en pantalla dice para qué es, lo que incumple WCAG 3.3.2.
label_from_title_primary
- Observar el campo que indica el informe sin pasar el puntero por encima.
- Buscar un texto visible junto a él que diga qué introducir. También cuenta un botón justo después del campo que dice lo que hace, como Buscar tras un campo de búsqueda.
- Llegar al campo con Tab y observar que la información emergente del title no aparece.
Se cumple. Sin pasar el ratón por encima, un texto junto al campo, o un botón justo después como Buscar, dice qué introducir.
No se cumple. Qué introducir solo lo dice el title, que aparece al pasar el ratón, así que quienes usan el teclado o una pantalla táctil nunca lo ven, lo que incumple WCAG 3.3.2.