Técnica Técnicas generales WCAG 2.2
G131Escribir etiquetas que digan qué dato se pide
Nombre oficial en el W3C: Proporcionar etiquetas descriptivas
En pocas palabras
La etiqueta de cada campo de formulario o control debe explicar con claridad qué se espera. «Fecha» no basta si hay dos fechas; «Fecha de nacimiento» sí. Una buena etiqueta se entiende incluso leída sola, fuera del diseño de la página.
Por qué es importante
Una etiqueta vaga obliga a adivinar y provoca errores al rellenar. El problema crece en formularios largos, como una solicitud o una compra.
Quien usa lector de pantalla (programa que lee en voz alta lo que hay en la pantalla) oye la etiqueta sin ver el diseño que la rodea. Las personas con discapacidad cognitiva o que leen con dificultad también necesitan etiquetas claras.
Cómo se hace
- Diga el dato concreto: «Número de DNI o NIE», «Teléfono de contacto», «Fecha preferida para la cita».
- No repita la misma etiqueta en campos que piden cosas distintas.
- Indique en la propia etiqueta si el campo es obligatorio o si exige un formato, como «dd/mm/aaaa».
- Use textos claros y cortos: la etiqueta nombra el dato, las explicaciones largas van aparte.
- Aplique lo mismo a botones y otros controles: «Enviar solicitud» mejor que «Aceptar».
Ejemplo práctico
Ocurre en formularios largos de trámites, reservas o compras. Varios campos comparten una etiqueta corta, como «Fecha», «Número» o «Teléfono». Solo se entienden si se ve el diseño completo.
Así no: Etiquetas ambiguas en un formulario de cita previa
Todos los campos tienen su label, pero las etiquetas no dicen qué se pide. Dos campos se llaman «Fecha» y otro «Número». Tampoco se indica cuáles son obligatorios. El lector de pantalla anuncia «Fecha» dos veces y, en su lista de campos, no hay forma de distinguirlos.
La demostración contiene, a propósito, el error de accesibilidad que se explica.
Ver el código del ejemplo incorrecto
<form action="#">
<h2>Datos del solicitante</h2>
<p><label for="doc">Número</label><br>
<input id="doc" type="text" required></p>
<p><label for="nac">Fecha</label><br>
<input id="nac" type="date" autocomplete="bday"></p>
<p><label for="cita">Fecha</label><br>
<input id="cita" type="date" required></p>
<p><label for="tel">Teléfono</label><br>
<input id="tel" type="tel" autocomplete="tel"></p>
<button type="submit">Continuar</button>
</form>Así sí: Etiquetas que dicen qué dato se pide
Solo cambia el texto de las etiquetas. Cada una nombra el dato concreto. Las de los campos obligatorios lo indican con «(obligatorio)». Leídas sueltas, en la lista de campos del lector de pantalla, se siguen entendiendo.
Pruébelo aquí:
Ver el código del ejemplo correcto
<form action="#">
<h2>Datos del solicitante</h2>
<p><label for="doc">Número de DNI o NIE (obligatorio)</label><br>
<input id="doc" type="text" required></p>
<p><label for="nac">Fecha de nacimiento</label><br>
<input id="nac" type="date" autocomplete="bday"></p>
<p><label for="cita">Fecha preferida para la cita (obligatorio)</label><br>
<input id="cita" type="date" required></p>
<p><label for="tel">Teléfono de contacto</label><br>
<input id="tel" type="tel" autocomplete="tel"></p>
<button type="submit">Continuar</button>
</form>Cómo comprobarlo
Errores frecuentes en auditorías
- Repetir etiquetas genéricas («Fecha», «Número», «Dirección») en campos que piden datos distintos.
- Marcar los campos obligatorios solo con un asterisco que no se explica, o solo con color rojo.
- Usar etiquetas que no coinciden con lo que se pide, como «Nombre» donde se espera nombre y apellidos.
- Poner en los botones textos que no dicen qué hacen («Aceptar», «Enviar») cuando hay varios formularios en la página.
Para saber más, en nuestro blog
-
Principios de las WCAGLos cuatro principios rectores de las WCAG establecen que los contenidos web deben ser Perceptibles, Operables, Comprensibles y Robustos (POCR).
Ver el texto completo del W3C (traducción al español)
Esta es una traducción no oficial al español de la técnica G131 de Techniques for WCAG 2.2, del W3C. Puede contener errores. El único documento oficial y normativo es la versión original en inglés, publicada en el sitio web del W3C.
Aplicabilidad
Todas las tecnologías.
Descripción
El objetivo de esta técnica es garantizar que la etiqueta de cualquier componente interactivo del contenido web deje claro el propósito del componente. Utilizar las técnicas específicas de cada tecnología apropiadas para asociar etiquetas a los controles interactivos permite que la tecnología de asistencia reconozca la etiqueta y la presente al usuario, lo que le permite identificar el propósito del control. La etiqueta también puede utilizarse para incluir un texto o un símbolo textual que indique que la entrada es obligatoria.
Ejemplos
Mapas en línea con controles para acercar y alejar
Una aplicación web presenta mapas de una ciudad. Los usuarios pueden «acercar» para ver una parte del mapa con más detalle y «alejar» para que muestre una parte mayor de la ciudad. Los controles pueden manejarse tanto con el ratón como con el teclado. Los controles están etiquetados como «Zoom in (Ctrl + Shift + L)» («Acercar (Ctrl + Mayús + L)») y «Zoom out (Ctrl + Shift + R)» («Alejar (Ctrl + Mayús + R)»).
Un formulario que pide el nombre del usuario
Un formulario pide el nombre del usuario. Consta de dos campos de entrada para pedir el nombre y los apellidos. El primer campo está etiquetado como «First name» («Nombre») y el segundo como «Last name» («Apellidos»).
Un formulario con campos obligatorios
Un formulario de compra incluye varios campos que son obligatorios. Además de identificar el campo, la etiqueta de cada campo obligatorio incluye la palabra «required» («obligatorio») entre paréntesis.
Pruebas
Procedimiento
Para cada componente de la interfaz que tenga una etiqueta:
- Identificar el propósito del componente de la interfaz.
- Comprobar que cada etiqueta deja claro el propósito del componente.
Resultados esperados
- La comprobación n.º 2 es verdadera.
Cómo lo comprobamos en ADDAW
En cada auditoría de ADDAW revisamos esta técnica página a página y le entregamos los errores con capturas y la forma de corregirlos.
Basado en la técnica G131 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.