Fallo común Fallos comunes WCAG 2.2
F68Fallo del criterio de conformidad 4.1.2 debido a que un control de interfaz de usuario no tiene un nombre determinable por software
En resumen
Este fallo se produce cuando un campo de formulario (input, textarea, select) no tiene un nombre accesible que las tecnologías de asistencia puedan leer: la etiqueta se ve en pantalla pero no está asociada al control con label, aria-label, aria-labelledby o title. Quien usa un lector de pantalla no sabe qué debe escribir en cada campo. Compruébelo con el árbol de accesibilidad del navegador antes de publicar un formulario.
Ejemplo práctico
Un formulario de cita previa de una oficina municipal con etiquetas visibles que no están asociadas a sus campos: a la vista todo parece correcto, pero los controles no tienen nombre accesible.
Así no: Etiquetas visibles sin asociar
Los elementos label no tienen atributo for ni envuelven al control, así que no se asocian con nada. Al tabular, un lector de pantalla anuncia solo «edición» o «cuadro combinado», sin decir qué dato se pide; además, al pulsar sobre el texto de la etiqueta no se activa el campo.
<style>
label { display: block; margin: 12px 0 4px; font-weight: bold; }
input, select { font-size: 1rem; padding: 4px; border: 1px solid #767676; }
button { display: block; margin-top: 14px; padding: 6px 14px; font-size: 1rem; background: #744E9A; color: #fff; border: 0; }
button:focus-visible { outline: 3px solid #0B2239; outline-offset: 2px; }
</style>
<form action="#">
<label>Nombre y apellidos</label>
<input type="text" id="nombre" autocomplete="name">
<label>Teléfono</label>
<input type="tel" id="telefono" autocomplete="tel">
<label>Oficina</label>
<select id="oficina">
<option>Centro</option>
<option>El Carmen</option>
</select>
<button type="submit">Pedir cita</button>
</form>
La demostración contiene, a propósito, el error de accesibilidad que se explica.
Así sí: Etiquetas asociadas con for e id
Cada label lleva el atributo for con el id de su control. El texto visible pasa a ser el nombre accesible del campo y, al hacer clic en la etiqueta, el foco va al control.
<style>
label { display: block; margin: 12px 0 4px; font-weight: bold; }
input, select { font-size: 1rem; padding: 4px; border: 1px solid #767676; }
button { display: block; margin-top: 14px; padding: 6px 14px; font-size: 1rem; background: #744E9A; color: #fff; border: 0; }
button:focus-visible { outline: 3px solid #0B2239; outline-offset: 2px; }
</style>
<form action="#">
<label for="nombre">Nombre y apellidos</label>
<input type="text" id="nombre" autocomplete="name">
<label for="telefono">Teléfono</label>
<input type="tel" id="telefono" autocomplete="tel">
<label for="oficina">Oficina</label>
<select id="oficina">
<option>Centro</option>
<option>El Carmen</option>
</select>
<button type="submit">Pedir cita</button>
</form>Pruébelo aquí:
Cómo comprobarlo
Errores frecuentes en auditorías
- label con for que apunta a un id inexistente o duplicado, a menudo por copiar y pegar bloques de formulario.
- Usar solo placeholder como etiqueta, que desaparece al escribir y no siempre se expone como nombre.
- Buscadores con un campo de texto y un botón con solo un icono, sin nombre accesible en ninguno de los dos.
- Casillas de verificación de aceptación de la política de privacidad con el texto en un párrafo aparte, sin asociar.
Técnica completa: traducción al español del texto del W3C
Aplicabilidad
Controles HTML
Descripción
Este fallo describe un problema que se produce cuando un control de formulario no tiene un nombre expuesto a las tecnologías de asistencia. Como resultado, algunos usuarios no podrán identificar el propósito del control de formulario. El nombre puede proporcionarse de varias formas, entre ellas el elemento label. Otras opciones son el uso del atributo title y de aria-label, que se emplean para proporcionar directamente el texto que se usa como nombre accesible, o de aria-labelledby, que indica una asociación con otro texto de la página que proporciona el nombre. A los controles de tipo botón se les puede asignar un nombre de otras maneras, como se indica más abajo, pero en determinadas situaciones pueden requerir el uso de label, title, aria-label o aria-labelledby.
Los elementos que pueden usar un elemento label asociado explícitamente son:
-
input -
textarea -
select
El elemento label no se usa para los siguientes, porque las etiquetas de estos elementos se proporcionan mediante el atributo value (en los botones de envío y de restablecimiento), el atributo alt (en los botones de imagen) o el propio contenido del elemento (button):
- Botones de envío y de restablecimiento (
<input type="submit">o<input type="reset">) - Botones de imagen (
<input type="image">) - Campos de entrada ocultos (
<input type="hidden">) - Botones (elementos
buttono<input type="button">)
Ejemplos
El siguiente ejemplo muestra un formulario que presenta visualmente etiquetas para los controles de formulario, pero no usa el elemento label para asociarlas con sus controles. El ejemplo de código siguiente es un fallo porque la tecnología de asistencia puede no ser capaz de determinar qué etiqueta corresponde a cada control.
<form>
First name:
<input type="text" name="firstname">
<br>
Last name:
<input type="text" name="lastname">
<br>
I have a dog <input type="checkbox" name="pet" value="dog">
I have a cat <input type="checkbox" name="pet" value="cat">
</form>En el siguiente ejemplo de código hay elementos label, pero no están vinculados por software con los controles de entrada correspondientes, por lo que la tecnología de asistencia puede no determinarlos correctamente.
<form>
<p>
<label>First Name</label>
<input type="text" name="firstname">
<label>Last Name</label>
<input type="text" name="lastname">
</p>
</form>El cuadro de texto de búsqueda del siguiente ejemplo de código no tiene un nombre determinable por software. El nombre puede proporcionarse con cualquiera de los enfoques mencionados anteriormente.
<input type="text" value="Type your search here">
<input type="submit" value="Search">Pruebas
Procedimiento
Para cada componente de interfaz de usuario expuesto en el árbol de accesibilidad, como los elementos input, textarea y select:
- Comprobar, mediante el árbol de accesibilidad del navegador u otras herramientas de inspección de accesibilidad, que el elemento tiene un nombre accesible determinado por software que no está vacío ni se compone únicamente de caracteres de espacio en blanco.
Resultados esperados
- Si la comprobación n.º 1 es falsa, se da esta condición de fallo y el contenido falla este criterio de conformidad.
Recursos
- Accessible Rich Internet Applications (WAI-ARIA), Accessible Name Calculation (cálculo del nombre accesible)
Cómo lo comprobamos en ADDAW
Este fallo es uno de los que buscamos en cada auditoría de accesibilidad de ADDAW: lo documentamos con capturas y el código afectado, indicamos el criterio que incumple y la técnica suficiente con la que se corrige. Los informes siguen la metodología del Observatorio de Accesibilidad y la norma UNE-EN 301 549.
Fuente y licencia
Traducción al español, no oficial, realizada por ADDAW a partir de la técnica F68 del documento «Techniques for WCAG 2.2» del W3C (versión del repositorio público del W3C a 22/10/2026). Copyright © W3C® (MIT, ERCIM, Keio, Beihang). Se publica conforme a la licencia de documentos del W3C. El texto normativo de referencia es el original en inglés; si detecta un error en la traducción, escríbanos.
