Los encabezamientos HTML (H1, H2, H3, H4, H5, H6) estructuran el contenido de una p\u00e1gina de forma jer\u00e1rquica, como el sumario de un documento. H1 es el t\u00edtulo principal, H2 sue\u00f1o las secciones principales, H3 su subsecciones dentro de un H2, y as\u00ed sucesivamente.<\/p>\n
El criterio WCAG 1.3.1 exige que la informaci\u00f3n y las relaciones del contenido sean perceptibles program\u00e1ticamente. Aplicado a los encabezamientos, significa que la estructura tiene que tener sentido para un lector de pantalla, no solo visualmente.<\/p>\n
Los usuarios de lectores de pantalla navegan frecuentemente por una p\u00e1gina saltando de encabezamiento en encabezamiento, igual que una persona con visi\u00f3n escanea visualmente los t\u00edtulos de un art\u00edculo. Cuando un lector de pantalla como NVDA o JAWS lee una p\u00e1gina, permite al usuario pedir una lista de todos los encabezamientos para navegar directamente.<\/p>\n
Si una p\u00e1gina salta de H1 a H3 directamente, el lector de pantalla informa de un alto de nivel que desorientaci\u00f3n el usuario. Si una p\u00e1gina tiene m\u00faltiples H1, el usuario no puede identificar cu\u00e1l es el t\u00edtulo principal. Si los encabezamientos se usan por estilo (uno H3 peque\u00f1o porque es \u00abbonito\u00bb) en lugar de estructura, el documento no tiene sentido auditivo.<\/p>\n
Cada p\u00e1gina tiene que tener exactamente un H1 que describa el contenido principal. Tiene que coincidir o ser muy similar en el t\u00edtulo de la p\u00e1gina y al meta title. Tener dos H1 confunde los lectores de pantalla y diluye la se\u00f1al SEO.<\/p>\n
Puedes pasar de H2 a H3, de H3 a H4, pero no puedes saltar de H2 a H4 directamente. La orden tiene que ser secuencial en profundidad.<\/p>\n
Si quieres que un texto sea grande y en negrita, usa CSS. No usas H2 porque te parece grande. No usas H5 porque es peque\u00f1o y discreto. La elecci\u00f3n del nivel tiene que basarse en la estructura del contenido.<\/p>\n
— MAL: salto de nivel —<\/strong> — MAL: m\u00faltiples H1 —<\/strong> — CORRECTO —<\/strong> En WordPress, un error frecuente es usar el t\u00edtulo del widget de sidebar como H2 cuando el contenido principal tiene H2 para las secciones. Divi por su parte permite configurar el nivel de encabezamiento de cada m\u00f3dulo de t\u00edtulo, pero muchos usuarios lo dejan por defecto sin revisar si es coherente con la estructura.<\/p>\n Otro error com\u00fan: el t\u00edtulo principal de la p\u00e1gina es un H2 porque \u00abqueda mejor visualmente\u00bb pero Divi lo renderiza como H2, y entonces las secciones de bajo su H3. Resultado: no hay H1 en la p\u00e1gina.<\/p>\n La herramienta de autoevaluaci\u00f3n de webaccessible.cat detecta autom\u00e1ticamente errores de jerarqu\u00eda de encabezamientos: saltos de nivel, carencia de H1, H1 duplicados. El informe muestra la estructura actual e indica donde hay que hacer ajustes.<\/p>\n Para corregirlo a Divi, ve a cada m\u00f3dulo de t\u00edtulo o texto y comprueba el campo \u00abHeading Level\u00bb a las opciones de contenido. Aj\u00fastalo para mantener la jerarqu\u00eda l\u00f3gica. Recuerda que el t\u00edtulo de la p\u00e1gina (el campo Title de WordPress) suele renderizarse como H1 a la mayor\u00eda de templates.<\/p>\n Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.<\/p>\n<\/div><\/div><\/div>
\nH1: Servicios de accesibilidad web
\nH3: Auditor\u00eda WCAG (falta el H2!)
\nH3: Implementaci\u00f3n de mejoras<\/p>\n
\nH1: Servicios de accesibilidad web
\nH1: Por qu\u00e9 elegir webaccessible.cat<\/p>\n
\nH1: Servicios de accesibilidad web
\nH2: Auditor\u00eda WCAG
\nH3: Revisi\u00f3n autom\u00e1tica
\nH3: Revisi\u00f3n manual
\nH2: Implementaci\u00f3n de mejoras
\nH2: Testing y validaci\u00f3n<\/p>\nErrores habituales en WordPress y Divi<\/h2>\n
Como detectar y corregir los errores<\/h2>\n