Microtextos: títulos de página, botones, etiquetas y mensajes

Los textos más cortos de una web son los que más se leen: el título de la pestaña, el texto de un botón, la etiqueta de un campo, un mensaje de error. Se les llama microtextos (en inglés, microcopy, y a la disciplina que los cuida, UX writing) y, aunque los dibuje el equipo de diseño y los programe el de desarrollo, las palabras son responsabilidad de quien redacta. Esta lección se centra en los criterios WCAG que dependen directamente de esas palabras. La parte visual de los formularios (dónde va cada etiqueta, cómo se muestran los errores) la verás en el curso N2-C4 «Diseño de interfaces accesibles», y el código, en el N3-C2 «Formularios accesibles».

Títulos de página (2.4.2)

El criterio 2.4.2 Titulado de páginas (nivel A) exige que cada página tenga un título que describa su tema o propósito. Es el texto del elemento <title>: lo primero que anuncia el lector de pantalla al cargar la página y lo que aparece en la pestaña del navegador, en el historial, en los marcadores y en los resultados de los buscadores. Pautas de redacción:

• Lo específico primero: el tema de la página y después el nombre del sitio. Así se identifica antes en las pestañas y al oírlo con lector de pantalla.
• Un título distinto para cada página. Si todas se llaman igual, el historial y las pestañas no sirven para orientarse.
• En los procesos por pasos, indica el paso: «Paso 2 de 4: datos personales». Algunas administraciones añaden además «Error:» al principio del título cuando el formulario se recarga con errores, para que la persona lo sepa en cuanto se anuncia la página.

<!-- Incorrecto: genérico e igual en todas las páginas -->
<title>Ayuntamiento - Inicio</title>

<!-- Correcto: específico primero, sitio después -->
<title>Pedir cita para el padrón - Ayuntamiento de Villanueva</title>

<!-- Correcto: paso de un proceso -->
<title>Paso 2 de 4: datos personales - Solicitud de beca - Sede electrónica</title>

En la mayoría de los gestores de contenidos el título se rellena en un campo propio, a menudo llamado «título SEO» por las extensiones de posicionamiento. Ese campo es el que se convierte en el <title>: no lo llenes de palabras clave repetidas, porque el lector de pantalla las leerá todas.

Botones y enlaces de acción

Un botón dice lo que pasa cuando lo pulsas. La fórmula más fiable es verbo + objeto: «Enviar solicitud», «Descargar justificante», «Añadir a la cesta», «Pedir cita». Evita los textos que solo tienen sentido mirando el contexto visual («Aceptar», «OK», «Siguiente» en un diálogo con varias opciones) y los que cambian de nombre de una página a otra.

Esto último lo exige el criterio 3.2.4 Identificación coherente (nivel AA): los componentes con la misma función dentro de un conjunto de páginas se identifican de la misma forma. Si el buscador se llama «Buscar» en la portada, no puede llamarse «Encontrar» en la sede electrónica ni ser solo una lupa sin nombre en las fichas.

Lo que se ve y lo que se oye: 2.5.3 Etiqueta en el nombre

El criterio 2.5.3 Etiqueta en el nombre (nivel A) exige que, cuando un control tiene un texto visible, su nombre accesible (el que anuncia el lector de pantalla) contenga ese texto; la buena práctica es que empiece por él. La razón son las personas que usan control por voz: dicen lo que ven («pulsar Leer más») y, si el nombre interno es otro, el programa no encuentra el control.

Afecta directamente a quien redacta cuando se añade texto oculto para dar contexto a un enlace, como recomendamos en la lección de enlaces. Ese texto debe completar el visible, nunca sustituirlo:

<!-- Incorrecto: el nombre accesible no contiene «Leer más» -->
<a href="/becas" aria-label="Abrir la noticia sobre becas">Leer más</a>

<!-- Correcto: el nombre empieza por el texto visible -->
<a href="/becas" aria-label="Leer más sobre la convocatoria de becas">Leer más</a>

Tu papel: proponer ese texto y revisar que empieza por las palabras visibles.

Etiquetas, instrucciones y campos obligatorios (3.3.2)

El criterio 3.3.2 Etiquetas o instrucciones (nivel A) pide que haya etiquetas o instrucciones cuando el contenido requiere que la persona introduzca datos. En la práctica, eso significa decidir bien las palabras:

• Etiquetas breves y concretas: «Correo electrónico», no «Contacto»; «Número de expediente», no «Referencia».
• El formato, en la etiqueta o justo debajo: «Fecha de nacimiento (por ejemplo, 15/03/1985)». Aquí sí se escribe la fecha con números, porque es el formato que el campo espera.
• Los obligatorios, con palabras: «(obligatorio)» en cada campo o, si casi todos lo son, una frase al principio: «Todos los campos son obligatorios salvo los marcados como (opcional)».
• Las instrucciones generales, antes del formulario: qué documentos tendrás que adjuntar, cuánto se tarda («unos 10 minutos») y si se puede guardar y seguir más tarde.

Mensajes de error (3.3.1 y 3.3.3)

El criterio 3.3.1 Identificación de errores (nivel A) exige que, cuando se detecta un error automáticamente, se identifique el campo y se describa el error en texto. El 3.3.3 Sugerencias ante errores (nivel AA) añade que, si se sabe cómo corregirlo, se le diga a la persona, salvo que eso ponga en riesgo la seguridad (por eso es correcto un mensaje como «El usuario o la contraseña no son correctos», sin decir cuál de los dos falla). Un buen mensaje de error responde a tres preguntas: dónde está el problema, qué ocurre y cómo se arregla. Y lo hace sin culpar ni asustar.

Mensaje que no ayuda	Mensaje que ayuda
Error 422: entrada no válida.	El DNI tiene que tener 8 números y una letra. Por ejemplo: 12345678Z.
Campo obligatorio.	Escribe tu fecha de nacimiento.
Formato incorrecto.	Escribe la fecha con números: día, mes y año. Por ejemplo: 15/03/1985.
Ha introducido datos erróneos.	El código postal tiene que tener 5 números.

Cuando la acción tiene efectos legales o económicos (firmar, pagar, presentar una solicitud), el criterio 3.3.4 Prevención de errores (legales, financieros, datos), de nivel AA, exige al menos una de estas garantías: que el envío se pueda anular, que se comprueben los datos introducidos o que la persona pueda revisarlos, corregirlos y confirmarlos antes de enviarlos. El texto de esa pantalla de revisión también es tuyo: «Revisa tus datos. Cuando pulses Presentar solicitud, ya no podrás cambiarlos».

Mensajes de estado y otros textos breves

El criterio 4.1.3 Mensajes de estado (nivel AA) exige que los avisos que aparecen sin recargar la página («producto añadido», «12 resultados») se anuncien al lector de pantalla sin moverle el foco. Que se anuncien es tarea de desarrollo; que se entiendan, de redacción. Como la persona los oye una sola vez y fuera de contexto, deben ser completos:

• «Producto añadido a la cesta. Tienes 3 productos.» mejor que «¡Hecho!».
• «12 resultados para becas de comedor» mejor que «12».
• «Guardando…» y después «Cambios guardados», no un icono que gira sin texto.
• Para los tiempos límite (2.2.1 Tiempo ajustable, nivel A): «Tu sesión se cerrará en 2 minutos por inactividad», con un botón «Seguir conectado».
• Para los estados vacíos: «No hay citas libres en esta oficina este mes. Prueba en otra oficina o pide cita por teléfono», en lugar de una pantalla en blanco.

Un glosario de interfaz

La coherencia que pide 3.2.4 es mucho más fácil con un glosario compartido entre redacción, diseño y desarrollo: una lista de términos con la palabra elegida para cada concepto («cita previa», nunca «cita» en unas páginas y «turno» en otras), los textos de los botones más habituales y plantillas para los mensajes de error. Cabe en una hoja de cálculo y evita decenas de incoherencias.

Resumen

• 2.4.2 Titulado de páginas (A): títulos únicos, con lo específico primero y el paso actual en los procesos.
• Botones con verbo y objeto, y el mismo nombre para la misma función en todo el sitio (3.2.4).
• 2.5.3 Etiqueta en el nombre (A): el nombre accesible contiene, y mejor empieza por, el texto visible.
• Etiquetas concretas, formato indicado y obligatorios con palabras; el placeholder no es una etiqueta (3.3.2).
• Errores que dicen dónde, qué y cómo arreglarlo (3.3.1 y 3.3.3), y mensajes de estado completos (4.1.3).