form-control-label-quality
Las etiquetas de los campos de formulario deberían ser descriptivas y distinguibles
Marca una etiqueta visible de campo de formulario que es un marcador de posición ("Label", "Field"), o que repite la etiqueta de otro campo sin contexto visible (encabezado, legend o fila) que los distinga. Los marcadores de posición en inglés se reconocen siempre, y los alemanes, españoles, franceses o japoneses cuando el campo está en ese idioma.
Ámbito de aplicación. Campos de formulario visibles: input nativo (excluyendo hidden y los tipos de tipo botón), select, textarea, o un elemento con uno de los roles de widget ARIA que enumera ACT cc0f0a (checkbox, combobox, listbox, menuitemcheckbox, menuitemradio, radio, searchbox, slider, spinbutton, switch, textbox; el primer token de rol real del atributo role, sin distinguir mayúsculas de minúsculas) que tiene una etiqueta programática visible: una asociación <label>, o los elementos a los que apunta aria-labelledby. Un campo nombrado únicamente mediante aria-label/title no tiene una etiqueta visible que evaluar y queda fuera del alcance aquí (su mecanismo de etiquetado es competencia de form-control-programmatic-label-quality, su presencia de form-control-programmatic-label-present). Un elemento personalizado cuyos ElementInternals le dan uno de esos roles (this.attachInternals().role), sin un atributo role que nombre otro, cuenta como lo hace un elemento nativo con ese rol. Si no encuentra nada por lo que preguntar, devuelve notApplicable, no pass: solo se aplica a lo que su comprobación señala, y no encontrar nada ahí no demuestra que todo esté bien.
Resultado esperado. El texto de la etiqueta visible (a) no es un marcador de posición dejado en el marcado ("label", "field", "enter text", ...), (b) no se comparte con otro campo que ningún contexto visible distinga (el mismo "Nombre" dos veces, sin nada visible en pantalla que indique cuál es de envío y cuál de facturación), y (c) es la totalidad de la etiqueta programática del campo, no el fragmento visible de una etiqueta cuya parte descriptiva está oculta.
Qué informa un hallazgo.
label: el texto de la etiqueta visible del campo.sharedWith: cuántos otros campos tienen la misma etiqueta sin nada visible que los distinga, un recuento. 0 cuando ningún otro campo la comparte.hiddenLabelParts: cuántas partes de la etiqueta del campo están ocultas a la vista, un recuento. 0 cuando toda la etiqueta es visible.
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>Label <input type="text" name="f1"></label>
El texto de la etiqueta es la propia palabra de marcador de posición "Label", no una descripción real del campo.
<label for="e">Email address:</label><input id="e" type="text">
El texto de la etiqueta es un nombre genuino y descriptivo para el campo.
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.
DUPLICATE_LABEL_TEXT
- Localizar el campo que indica el informe y los demás campos con la misma etiqueta visible.
- Observar la pantalla alrededor de cada uno: una leyenda, un encabezado, el texto de la fila o un texto cercano que indique cuál es cuál.
- Decidir si los campos piden lo mismo (un cuadro de búsqueda repetido) o cosas distintas (nombre de envío y de facturación).
Se cumple. Los campos tienen la misma finalidad, o algo visible cerca de cada uno deja claro cuál es cuál.
No se cumple. Campos distintos comparten una etiqueta y nada visible los distingue, así que el usuario no sabe cuál rellenar, lo que incumple WCAG 2.4.6 (G131).
PARTIALLY_HIDDEN_LABEL
- Localizar el campo que indica el informe y leer su etiqueta visible en pantalla.
- Inspeccionar el campo en el panel Accesibilidad y leer su nombre calculado completo, incluidas las partes ocultas.
- Observar lo que es visible alrededor del campo, como el título de un grupo, un encabezado o la fila o columna en que está, que puede dar sentido a la parte oculta.
- Preguntarse si la etiqueta visible, leída con lo que es visible alrededor, dice a un usuario que ve qué introducir o elegir.
Se cumple. La parte visible de la etiqueta, sola o con lo que es visible alrededor, describe el campo; la parte oculta solo añade detalle.
No se cumple. Ni la parte visible de la etiqueta ni nada visible alrededor identifica el campo sin la parte oculta (por ejemplo, solo se muestra «Ir»), lo que incumple WCAG 2.4.6 (ACT cc0f0a).
PLACEHOLDER_LABEL_TEXT
- Localizar el campo que indica el informe y leer su etiqueta visible.
- Deducir por la página para qué sirve el campo.
- Decidir si la etiqueta lo dice, o si es un texto de plantilla como «Etiqueta», «Campo» o «Introduzca texto».
Se cumple. La etiqueta es un nombre real de lo que pide el campo en este contexto (por ejemplo, «Valor» en un editor de clave/valor).
No se cumple. La etiqueta es un texto de relleno que no dice para qué sirve el campo, lo que incumple WCAG 2.4.6 (G131).