|
|
| Línea 1: |
Línea 1: |
| {{CriterioWCAG
| | __TOC__ |
| |id_wcag_criterio=1.3.1
| | === '''1.3.1-C. Estructura lógica de encabezados ''' === |
| |id_wcag_subcriterio=1.3.1-C
| | <!-- |
| |wcag_titulo_criterio=1.3.1-C. Estructura lógica de encabezados
| | Análisis interno: |
| |wcag_nivel=A
| | Este criterio impacta principalmente a: Personas con discapacidad visual total |
| |wcag_version=2.2
| | Problema grave: Una jerarquía incorrecta de encabezados dificulta la navegación y comprensión del contenido. |
| |wcag_principio=1_Perceptible
| | --> |
| |wcag_principio_url=Principio_1
| |
| |wcag_pauta=1.3_Adaptable
| |
| |wcag_pauta_url=Principio_1/1.3_Adaptable
| |
| |wcag_grupo=Estructura y relaciones
| |
| |wcag_subgrupo=Jerarquía de encabezados
| |
| | |
| |wcag_discapacidades=
| |
| <li class="discapacidad-item"> | |
| [[Archivo:Sinvision.png|20px|class=icon-discapacidad|alt=Discapacidad visual total]] | |
| <span class="discapacidad-texto">[[:Categoría:Discapacidad visual total|Visual total]]</span> – | |
| <span class="gravedad gravedad-grave">Barrera grave</span> | |
| </li>
| |
| | |
| <li class="discapacidad-item">
| |
| [[Archivo:Bajavision.png|20px|class=icon-discapacidad|alt=Baja visión]]
| |
| <span class="discapacidad-texto">[[:Categoría:Discapacidad baja visión|Baja visión]]</span> –
| |
| <span class="gravedad gravedad-moderada">Barrera moderada</span>
| |
| </li>
| |
| | |
| <li class="discapacidad-item">
| |
| [[Archivo:Cognitiva.png|20px|class=icon-discapacidad|alt=Discapacidad cognitiva]]
| |
| <span class="discapacidad-texto">[[:Categoría:Discapacidad cognitiva|Cognitiva]]</span> –
| |
| <span class="gravedad gravedad-leve">Barrera leve</span>
| |
| </li>
| |
| | |
| |wcag_lista_discapacidades=
| |
| [[Categoría:Discapacidad visual total]]
| |
| [[Categoría:Discapacidad baja visión]]
| |
| [[Categoría:Discapacidad cognitiva]]
| |
| | |
| |wcag_texto_criterioOAW=
| |
| La información, estructura y relaciones comunicadas a través de la presentación pueden ser determinadas por software o están disponibles como texto.
| |
| | |
| |wcag_descripcion_resumida=
| |
| La página debe tener una jerarquía de encabezados coherente. La secuencia h1 → h2 → h3 debe seguir un orden lógico, sin saltos innecesarios, para que lectores de pantalla y otras ayudas técnicas detecten correctamente la estructura del contenido.
| |
| | |
| |wcag_objetivo=
| |
| Garantizar que la estructura jerárquica del contenido se puede interpretar y navegar fácilmente mediante software, manteniendo su coherencia incluso con cambios de diseño o formato.
| |
| | |
| |wcag_importancia=
| |
| Los encabezados son puntos de referencia esenciales. Muchas personas con discapacidad visual navegan únicamente mediante la lista de encabezados. Saltos o desorden en la jerarquía (por ejemplo, pasar de h1 a h3 sin un h2 previo) pueden generar confusión, aumentar la carga cognitiva y dificultar la navegación.
| |
| | |
| |wcag_referencias=
| |
| <ul>
| |
| <li>H42: Using h1-h6 to identify headings</li>
| |
| <li>F43: Failure due to incorrect heading structure</li>
| |
| </ul>
| |
| | |
| |wcag_recursos=
| |
| <ul>
| |
| <li>Los encabezados deben resumir su contenido asociado y ser breves</li>
| |
| <li>Evitar saltos de nivel (ej. no pasar de h1 a h3)</li>
| |
| <li>Debe existir un único h1 como título principal</li>
| |
| <li>Comprobar que la jerarquía refleja la estructura real del contenido</li>
| |
| </ul>
| |
| | |
| <html>
| |
| <iframe width="100%" height="400"
| |
| src="https://www.youtube.com/embed/Hu4Yvq-g7_Y"
| |
| title="Cómo estructurar encabezados correctamente HTML"
| |
| frameborder="0"
| |
| allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
| |
| allowfullscreen>
| |
| </iframe>
| |
| </html>
| |
| | |
| |wcag_tipo_evaluacion=Semiautomática
| |
| | |
| |wcag_pasos_evaluacion=
| |
| <ol class="paso-list">
| |
| <li>Abrir extensión <strong>HeadingsMap</strong> para visualizar la jerarquía.</li>
| |
| <li>Verificar que la estructura h1 → h2 → h3 es lógica y sin saltos.</li>
| |
| <li>Comprobar que existe un único <h1>.</li>
| |
| <li>Asegurar que los niveles de encabezado reflejan la estructura real del contenido.</li>
| |
| </ol>
| |
| | |
| |wcag_resultado_evaluacion=
| |
| La jerarquía de encabezados es correcta, sin saltos de nivel y con un único título principal (<h1>).
| |
| | |
| |wcag_ejemplo_evaluacion=
| |
| Ejemplo correcto:
| |
| <pre class="wcag-codigo-html">
| |
| <h1>Título página</h1>
| |
| <h2>Sección 1</h2>
| |
| <h3>Subsección 1.1</h3>
| |
| </pre>
| |
| | |
| Ejemplo incorrecto:
| |
| <pre class="wcag-codigo-html">
| |
| <h1>Título página</h1>
| |
| <h3>Subtema mal jerarquizado</h3>
| |
| </pre>
| |
| | |
| |wcag_otras_herramientas_evaluacion=
| |
| <ul>
| |
| <li>
| |
| <strong>Bookmarklet diagnóstico encabezados:</strong><br>
| |
| <html> | | <html> |
| <div class="highlight-box"> | | <!-- criterio 1.3.1-C --> |
| Arrastra este botón a tu barra de marcadores y podrás ejecutarlo y ver los encabezados de otras páginas. <br>
| | <article class="wcag-card"> |
| | <section class="wcag-info"> |
| | <ul> |
| | <li><span class="label">Nivel:</span><span class="value">A</span></li> |
| | <li><span class="label">Versión:</span><span class="value">2.2</span></li> |
| | <li><span class="label">Principio:</span><span class="value">1. Perceptible</span></li> |
| | <li><span class="label">Pauta:</span><span class="value">1.3 Crear contenido adaptable</span></li> |
| | <li><span class="label">Categoría:</span><span class="value">Estructura</span></li> |
| | <li><span class="label">Subcategoría:</span><span class="value">Jerarquía de encabezados</span></li> |
| | </ul> |
| | </section> |
|
| |
|
| <a class="bookmarklet-button" | | <section class="wcag-users"> |
| href="javascript:(function(){let headers=document.querySelectorAll('h1,h2,h3,h4,h5,h6');if(headers.length===0){alert('No se encontraron encabezados en esta página.');return;}let report='📋 Estructura de Encabezados:\n\n';headers.forEach(h=>{let indent=' '.repeat(parseInt(h.tagName.substring(1))-1);report+=indent+'• '+h.tagName+': '+h.innerText.trim()+'\n';});console.log(report);alert(report);})();">
| | <p>Usuarios más afectados</p> |
| Ver encabezados/títulos
| | <ul> |
| </a> | | <li><img src="/images/4/4d/Sinvision.png" alt="Icono de una persona con discapacidad visual" /> Personas con discapacidad visual total - <span class="gravedad">Barrera grave</span></li> |
| </div> | | <li><img src="/images/b/b7/Bajavision.png" alt="Icono baja visión" class="icono-discapacidad" /> Personas con baja visión – <span class="gravedad">Barrera moderada</span></li> |
| | <li><img src="/images/4/40/Cognitiva.png" alt="Icono discapacidad cognitiva" class="icono-discapacidad" /> Personas con discapacidad cognitiva – <span class="gravedad">Barrera leve</span></li> |
| | </ul> |
| | </section> |
| | </article> |
| </html> | | </html> |
| </li>
| |
| <li>
| |
| <strong>Lectores recomendados:</strong> JAWS, NVDA, VoiceOver.
| |
| </li>
| |
| <li>
| |
| <strong>Inspección del navegador:</strong> Revisar si todos los títulos de la página, se muestran bajo código HTML de encabezados (<code><nowiki> <h1>-<h6> </nowiki></code>)
| |
| </li>
| |
| </ul>
| |
| }}
| |
Personas con discapacidad visual total - Barrera grave
Personas con baja visión – Barrera moderada
Personas con discapacidad cognitiva – Barrera leve
