Crear activos accesibles: Encabezados y títulos

El uso adecuado de encabezados y títulos ayuda a estructurar tu contenido y mejora la navegación para todos los usuarios, incluidos los que utilizan tecnologías de apoyo. Unos encabezados claros y bien organizados facilitan la comprensión de la jerarquía de la página y la búsqueda rápida de información relevante. Este artículo describe las mejores prácticas para utilizar encabezados y títulos con el fin de mejorar tanto la accesibilidad como la experiencia del usuario.

Para asegurarte de que tu sitio web, página de destino, formulario o mensaje cumple los requisitos de accesibilidad, utiliza la lista de comprobación disponible aquí.

Requisitos

  • La información, la estructura y las relaciones transmitidas a través de la presentación deben determinarse mediante programación o estar disponibles en el texto.
    • El texto que funcione como encabezamiento visual o estructuralmente debe marcarse como un verdadero encabezamiento (por ejemplo, <h1>, <h2>, etc.) en el marcado.
    • El texto que no funcione como encabezamiento visual o estructuralmente no debe marcarse como tal.
  • Los encabezamientos deben ser precisos e informativos, etiquetando claramente las secciones de texto que describen.
  • La página <título> debe presentarse y contener texto.
  • La página <título> debe ser precisa e informativa.
  • El <título> de página de las páginas dinámicas (por ejemplo, en aplicaciones de una sola página) DEBE actualizarse cuando cambie la finalidad de la página.

Los lectores de pantalla permiten a los usuarios navegar por los encabezamientos, lo que los convierte en una forma eficaz de eludir los bloques de contenido, tal como exigen las WCAG 2.4.1 Pasar por alto los bloques. Aunque las WCAG no exigen estrictamente que los encabezados cumplan la 2.4.1, son muy recomendables, junto con los puntos de referencia y los enlaces de salto.

Ejemplos

sitio web con encabezados claramente marcadosHACER: Encabezados correctamente marcados con un etiquetado preciso e informativo
sitio web sin título mostrado en el código del sitioNO HACER:Un sitio generado mediante plantillas no incluye un título para cada página del sitio. Así que el título no puede utilizarse para distinguir entre las páginas.

Recursos populares