Fallo común WCAG 2.2
F68Campos de formulario sin nombre para el lector de pantalla
Nombre oficial en el W3C: Fallo del criterio de conformidad 4.1.2 debido a que un control de interfaz de usuario no tiene un nombre determinable por software
En pocas palabras
Este fallo ocurre cuando un campo de formulario no tiene un nombre que el navegador y los lectores de pantalla puedan reconocer. A menudo la etiqueta se ve en pantalla, pero no está unida al campo en el código. Quien usa lector de pantalla oye «edición» sin saber qué dato se le pide.
Por qué es importante
Un lector de pantalla (programa que lee en voz alta lo que hay en la pantalla) anuncia el nombre de cada campo al llegar a él. Si no lo tiene, la persona no sabe si debe escribir su nombre, su DNI o su teléfono.
También afecta a quien usa control por voz: no puede decir «pulsar Teléfono» si el campo no se llama así. Y quien tiene poca precisión con el ratón pierde la ayuda de hacer clic en la etiqueta para activar el campo.
Cómo evitarlo
- Use un elemento
labelcon el atributoforigual aliddel campo, o envuelva el campo dentro dellabel. - Compruebe que cada
idexiste y no se repite en la página. - Si no hay etiqueta visible, como en un buscador con lupa, use
aria-labeloaria-labelledby. - En los botones, el nombre sale de su texto, de
valueo dealtsi son de imagen. - No use el texto de ejemplo (
placeholder) como única etiqueta.
Ejemplo práctico
Un formulario de cita previa de una oficina municipal. Las etiquetas se ven, pero no están unidas a sus campos. A la vista todo parece correcto, pero los campos no tienen nombre para el lector de pantalla.
Así no: Etiquetas visibles sin asociar
Los elementos label no tienen atributo for ni envuelven al campo, así que no se unen a nada. Al pasar con Tab, el lector de pantalla dice solo «edición» o «cuadro combinado», sin decir qué dato se pide. Además, al hacer clic en el texto de la etiqueta no se activa el campo.
La demostración contiene, a propósito, el error de accesibilidad que se explica.
Ver el código del ejemplo incorrecto
<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>Así sí: Etiquetas asociadas con for e id
Cada label lleva el atributo for con el id de su campo. El texto visible pasa a ser el nombre del campo para el lector de pantalla. Y al hacer clic en la etiqueta, el foco va al campo.
Pruébelo aquí:
Ver el código del ejemplo correcto
<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>Cómo comprobarlo
Errores frecuentes en auditorías
- Un label con for que apunta a un id que no existe o que está repetido, a menudo por copiar y pegar bloques de formulario.
- Usar solo el texto de ejemplo (placeholder) como etiqueta: desaparece al escribir y no siempre sirve como nombre.
- Buscadores con un campo de texto y un botón con solo un icono, sin nombre en ninguno de los dos.
- Casillas de aceptación de la política de privacidad con el texto en un párrafo aparte, sin asociar.
Ver el texto completo del W3C (traducción al español)
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 error es uno de los que buscamos en cada auditoría de ADDAW. Se lo entregamos con capturas y la forma de corregirlo.
Basado en la técnica F68 del W3C (WCAG 2.2). Explicación y ejemplos: ADDAW. Traducción no oficial del texto del W3C © W3C, licencia de documentos del W3C. ¿Ha visto un error? Escríbanos.