Diferencia entre revisiones de «Principio 1/1.3 Adaptable/1.3.1-C»

De WCAG Wiki
← Edición anteriorEdición siguiente →
VisualWikitexto
Sin resumen de edición
Sin resumen de edición
Etiqueta: Revertido
Línea 1: Línea 1:
__TOC__
{{CriterioWCAG
=== '''1.3.1-C. Estructura lógica de encabezados ''' ===
|id_wcag_criterio=1.3.1
<!--
|id_wcag_subcriterio=1.3.1-C
   Análisis interno:
|wcag_titulo_criterio=1.3.1-C. Estructura lógica de encabezados
   Este criterio impacta principalmente a: Personas con discapacidad visual total
|wcag_nivel=A
  Problema grave: Una jerarquía incorrecta de encabezados dificulta la navegación y comprensión del contenido.
|wcag_version=2.2
-->
|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 &lt;h1&gt;.</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 (&lt;h1&gt;).
 
|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>
<!-- criterio 1.3.1-C -->
<div class="highlight-box">
<article class="wcag-card">
Arrastra este botón a tu barra de marcadores y podrás ejecutarlo y ver los textos alternativos de otras páginas. <br>
  <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>


  <section class="wcag-users">
<a class="bookmarklet-button"  
    <p>Usuarios más afectados</p>
  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);})();">
    <ul>
  Ver encabezados/títulos
      <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>
</a>
      <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>
</div>
      <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>
}}

Revisión del 17:30 4 nov 2025

1.3.1-C. Estructura lógica de encabezados

Discapacidades afectadas

Este criterio puede afectar a distintas personas con discapacidad. A continuación se indican las más relevantes.

Enunciado del criterio (Observatorio de Accesibilidad Web)

  • 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.

Comprensión del criterio

Descripción 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.

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.

Importancia de cumplir el criterio

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.

Referencias WCAG

  • H42: Using h1-h6 to identify headings
  • F43: Failure due to incorrect heading structure

Recursos de apoyo

  • Los encabezados deben resumir su contenido asociado y ser breves
  • Evitar saltos de nivel (ej. no pasar de h1 a h3)
  • Debe existir un único h1 como título principal
  • Comprobar que la jerarquía refleja la estructura real del contenido

Evaluación del criterio

Tipo de evaluación

Evaluación Semiautomática

Procedimiento de evaluación

  1. Abrir extensión HeadingsMap para visualizar la jerarquía.
  2. Verificar que la estructura h1 → h2 → h3 es lógica y sin saltos.
  3. Comprobar que existe un único <h1>.
  4. Asegurar que los niveles de encabezado reflejan la estructura real del contenido.

Resultado esperado

La jerarquía de encabezados es correcta, sin saltos de nivel y con un único título principal (<h1>).

Ejemplo

Ejemplo correcto: 
<h1>Título página</h1>
<h2>Sección 1</h2>
<h3>Subsección 1.1</h3>

Ejemplo incorrecto: 

<h1>Título página</h1>
<h3>Subtema mal jerarquizado</h3>

Otras herramientas de evaluación

  • Bookmarklet diagnóstico encabezados:
    Arrastra este botón a tu barra de marcadores y podrás ejecutarlo y ver los textos alternativos de otras páginas.
    Ver encabezados/títulos
  • Lectores recomendados: JAWS, NVDA, VoiceOver.
  • Inspección del navegador: Revisar si todos los títulos de la página, se muestran bajo código HTML de encabezados ( <h1>-<h6> )










Ejemplos accesibles y no accesibles creados por alumnos

Comentarios

A continuación se muestran comentarios sobre el criterio 1.3.1-C. Estructura lógica de encabezados

Loading comments...




Obtenido de «https://wikiwcag.udl.cat/index.php?title=Principio_1/1.3_Adaptable/1.3.1-C&oldid=3273»