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

De WCAG Wiki
← Edición anterior
VisualWikitexto
Sin resumen de edición
Sin resumen de edición
 
(No se muestran 12 ediciones intermedias del mismo usuario)
Línea 1: Línea 1:
=== '''EN DESAROLLO''' ===
{{CriterioWCAG
|id_wcag_criterio=1.3.1
|id_wcag_subcriterio=1.3.1-C
|wcag_titulo_criterio=1.3.1-C. Estructura lógica de encabezados
|wcag_nivel=A
|wcag_version=2.0
|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:Sordoceguera.png|20px|class=icon-discapacidad|alt=Discapacidad sordoceguera]]
  <span class="discapacidad-texto">[[:Categoría:Discapacidad sordoceguera|Sordoceguera]]</span> –
  <span class="gravedad gravedad-leve">Barrera grave</span>
</li>
 
|wcag_lista_discapacidades=
[[Categoría:Discapacidad visual total]]
[[Categoría:Discapacidad sordoceguera]]
 
|wcag_texto_criterioOAW=
La jerarquía de encabezados o el ''outline'' de la página debe reflejar la estructura lógica del contenido.
 
|wcag_descripcion_resumida=
La página debe tener una jerarquía de encabezados coherente.
 
La secuencia h1 → h2 → h3 debe seguir, en todos los casos, un orden lógico, sin saltos innecesarios.
 
Los lectores de pantalla y otras ayudas técnicas detectarán 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><span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/html/H42 H42: Using h1-h6 to identify headings (en inglés)]</span></li>
<li><span lang="en"> [https://www.w3.org/WAI/WCAG21/Techniques/failures/F43 F43: Failure due to incorrect heading structure]</span>
</li>
</ul>
 
|wcag_recursos=
<strong> Consejos </strong>
<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 sin antes incluir un h2!)</li>
<li>Debe existir un único <code><nowiki>H1</nowiki></code> como título principal</li>
<li>Comprobar que la jerarquía refleja la estructura real del contenido</li>
</ul>
 
 
|wcag_tipo_evaluacion=Semiautomática
 
|wcag_pasos_evaluacion=
Usa la herramienta de ''' [https://chromewebstore.google.com/detail/headingsmap/flbjommegcjonpdmenkdiocclhjacmbi Heading Maps].'''
<ol class="paso-list">
<li><span class="paso-badge">Paso 1.</span>
Abrir extensión <strong>HeadingsMap</strong> para visualizar la jerarquía.</li>
<li><span class="paso-badge">Paso 2.</span>
1. Visualizar la estructura de encabezados que identifica la herramienta.
</li>
<li><span class="paso-badge">Paso 3.</span>
Comprobar que la estructura identificada con los encabezados es adecuada para el contenido de la página.
</li>
</ol>
 
|wcag_resultado_evaluacion=
La jerarquía de encabezados es correcta (<code><nowiki> <h1><H2><H3><h6> </nowiki></code>), sin saltos de nivel y con un único título principal (<code><nowiki> <h1> </nowiki></code>).
 
|wcag_ejemplo_evaluacion=
<div class="accessibility-card">
Estructura de encabezados correcta, según el nivel de titulo principal o sección.
<pre class="wcag-codigo-html">
<h1>Título página</h1>
<h2>Sección 1</h2>
<h3>Subsección 1.1</h3>
</pre>
</div>
 
|wcag_otras_herramientas_evaluacion=
<ul>
<li>
<strong>Bookmarklet diagnóstico encabezados:</strong><br>
<html>
<div class="highlight-box">
Arrastra este botón a tu barra de marcadores y podrás ejecutarlo y ver los encabezados de otras páginas. <br>
 
<a class="bookmarklet-button"
  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);})();">
  Ver encabezados/títulos
</a>
</div>
</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 actual - 07:02 5 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 jerarquía de encabezados o el outline de la página debe reflejar la estructura lógica del contenido.

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, en todos los casos, un orden lógico, sin saltos innecesarios.

Los lectores de pantalla y otras ayudas técnicas detectarán 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

Recursos de apoyo

Consejos
  • Los encabezados deben resumir su contenido asociado y ser breves
  • Evitar saltos de nivel (ej. no pasar de h1 a h3 sin antes incluir un h2!)
  • 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

Usa la herramienta de Heading Maps.
  1. Paso 1. Abrir extensión HeadingsMap para visualizar la jerarquía.
  2. Paso 2. 1. Visualizar la estructura de encabezados que identifica la herramienta.
  3. Paso 3. Comprobar que la estructura identificada con los encabezados es adecuada para el contenido de la página.

Resultado esperado

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

Ejemplo

Estructura de encabezados correcta, según el nivel de titulo principal o sección. 

<h1>Título página</h1>
<h2>Sección 1</h2>
<h3>Subsección 1.1</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 encabezados 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=3400»