Encabezados y etiquetas
Los encabezados y las etiquetas de formulario deben describir el tema o el propósito del contenido que encabezan. No tienen que ser únicos, pero sí han de ser informativos: un encabezado que dice «Información» o una etiqueta que dice «Campo» incumplen este criterio de conformidad.
Qué exige este criterio
Cuando una sección tiene un encabezado o un control de formulario tiene una etiqueta, el texto de esa etiqueta o encabezado debe describir realmente lo que sigue. Los usuarios de lectores de pantalla emplean los encabezados y las etiquetas como la tabla de contenido de la página: los usuarios de JAWS presionan H para saltar de encabezado en encabezado, y el modo de formulario lee las etiquetas en voz alta cada vez que un campo recibe el foco. Un texto vago destruye por completo este modelo de navegación.
El criterio de conformidad no exige que los encabezados estén presentes en todas partes, solo que los que existen sean descriptivos. (Para los casos en que los encabezados son obligatorios, véase 2.4.10, de nivel AAA.)
Cómo cumplirlo
- Redactar encabezados que nombren la sección, no la intención de diseño:
"Dirección de envío"en vez de"Sección 2";"Preguntas frecuentes"en vez de"Más información". - Asociar cada control de formulario con un elemento
<label>visible cuyo texto describa el campo. Evitar el uso del marcador de posición como etiqueta, ya que desaparece al escribir. - Para etiquetas visualmente ocultas (campo de búsqueda, botones de icono), usar
aria-labelo una clase.visually-hidden, pero asegurándose de que la etiqueta sea específica. - Cuando dos encabezados de una misma página cubren genuinamente el mismo tema (por ejemplo, dos secciones de «Comentarios» en un índice de foro), añadir contexto diferenciador:
"Comentarios del 14 de julio","Comentarios del 15 de julio". - Auditar cualquier encabezado o etiqueta que tenga tres palabras o menos: ahí es donde suele concentrarse la vaguedad.
Fallos habituales
- «Información», «Detalles», «Más», «Sección», «Formulario» como encabezados sin contexto adicional.
- Etiquetas de formulario como «Campo 1», «Entrada», «Escriba aquí» o sin etiqueta alguna (solo con marcador de posición).
- Encabezados de cuadrículas de tarjetas que todos dicen «Más información» porque fueron convertidos de llamadas a la acción por un cambio de plantilla.
- Página de resultados de búsqueda donde el encabezado de cada resultado es literalmente la palabra «Resultado».
- Tablas cuyos encabezados de columna son «Col 1», «Col 2» en lugar de «Fecha», «Importe», «Estado».
Por qué es importante
En las encuestas de usuarios de lectores de pantalla de WebAIM, navegar por encabezados es sistemáticamente la estrategia más frecuente para orientarse en una página nueva, más común que leer de arriba abajo. Los encabezados vagos destruyen ese mapa. Las etiquetas vagas colapsan los formularios: el usuario llega a un control que solo dice «entrada» y tiene que retroceder para leer el texto circundante, que el modo de formulario a menudo oculta.