Diferencia entre revisiones de «Principio 2/2.4 Navegable/2.4.6-A»

De WCAG Wiki
← Edición anterior
VisualWikitexto
Sin resumen de edición
Sin resumen de edición
 
(No se muestran 3 ediciones intermedias del mismo usuario)
Línea 7: Línea 7:
|wcag_principio=2_Operable
|wcag_principio=2_Operable
|wcag_principio_url=Principio_2
|wcag_principio_url=Principio_2
|wcag_pauta=2.4_Navegacion_clara
|wcag_pauta=2.4_Navegable
|wcag_pauta_url=Principio_2/2.4_Navegacion_clara
|wcag_pauta_url=Principio_2/2.4_Navegable
|wcag_grupo=Estructura_de_contenido
|wcag_grupo=Estructura_de_contenido
|wcag_subgrupo=Encabezados_y_organización
|wcag_subgrupo=Encabezados_y_organización
Línea 29: Línea 29:
   [[Archivo:Sinvision.png|20px|class=icon-discapacidad|alt=Discapacidad visual total]]
   [[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="discapacidad-texto">[[:Categoría:Discapacidad visual total|Visual total]]</span> –  
   <span class="gravedad gravedad-leve">Barrera leve</span>
   <span class="gravedad gravedad-moderada">Barrera moderada</span>
</li>
</li>


Línea 38: Línea 38:


|wcag_texto_criterioOAW=
|wcag_texto_criterioOAW=
Los encabezados utilizados en una página deben describir el tema o propósito de la sección que encabezan.
Los encabezados usados en la página deben identificar el contenido de la sección que encabezan.


|wcag_descripcion_resumida=
|wcag_descripcion_resumida=
Los encabezados deben comunicar claramente el contenido que presentan, facilitando la orientación, lectura y escaneo rápido de la página.
Los encabezados de sección deben comunicar claramente el contenido que presentan, facilitando la orientación, lectura y escaneo rápido de la página.


|wcag_objetivo=
|wcag_objetivo=
Línea 51: Línea 51:
|wcag_referencias=
|wcag_referencias=
<ul>
<ul>
<li><span lang="en">Understanding Success Criterion 2.4.6: Headings and Labels — W3C</span></li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/general/G130 G130: Providing descriptive headings]</span></li>
<li><span lang="en">WCAG 2.2 Quick Reference — 2.4.6</span></li>
<li>Guía Técnica WCAG — Principio Operable (documento aportado)</li>
</ul>
</ul>


|wcag_recursos=
|wcag_recursos=
<ul>
<ul>
<li>[https://www.w3.org/WAI/tutorials/page-structure/headings/ Headings (w3c)]</li>
<li>Buenas prácticas para estructura semántica H1–H6</li>
<li>Buenas prácticas para estructura semántica H1–H6</li>
<li>Guía ARIA para encabezados y navegación por estructura</li>
</ul>
</ul>


|wcag_tipo_evaluacion=Manual
|wcag_tipo_evaluacion=Manual


|wcag_pasos_evaluacion=
|wcag_pasos_evaluacion=
Usa la herramienta de ''' [https://chromewebstore.google.com/detail/headingsmap/flbjommegcjonpdmenkdiocclhjacmbi Heading Maps].'''
<ol class="paso-list">
<ol class="paso-list">
<li><span class="paso-badge">Paso 1.</span> Revisar si la página utiliza encabezados HTML (`h1`–`h6`).</li>
<li><span class="paso-badge">Paso 1.</span>
<li><span class="paso-badge">Paso 2.</span> Comprobar que cada encabezado describe claramente el contenido de su sección.</li>
Visualizar la estructura de encabezados que identifica la herramienta.
<li><span class="paso-badge">Paso 3.</span> Evaluar que la jerarquía de encabezados es lógica y consistente.</li>
</li>
<li><span class="paso-badge">Paso 4.</span> Navegar con lector de pantalla usando comandos de encabezados para confirmar orientación correcta.</li>
 
<li><span class="paso-badge">Paso 2.</span>
Verificar que los elementos identificados como encabezados:
<ul>
<li>a. Identifican la sección de contenido que encabezan.</li>
<li>b. Son claros y breves.</li>
</ul>
</li>
</ol>
</ol>


|wcag_resultado_evaluacion=
|wcag_resultado_evaluacion=
Línea 77: Línea 86:
|wcag_ejemplo_evaluacion=
|wcag_ejemplo_evaluacion=
<div class="accessibility-card">
<div class="accessibility-card">
<strong>✅ Ejemplo accesible: encabezados descriptivos y estructurados</strong>
Encabezados descriptivos y estructurados.
<pre class="wcag-codigo-html">
<pre class="wcag-codigo-html">
<section>
<h1>Guía de solicitud de becas</h1>
<h1>Guía de solicitud de becas</h1>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
<h2>Requisitos para aplicar</h2>
<h2>Requisitos para aplicar</h2>
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
<h3>Documentación necesaria</h3>
<h3>Documentación necesaria</h3>
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</section>
</pre>
</pre>
</div>
</div>
Línea 87: Línea 101:
|wcag_otras_herramientas_evaluacion=
|wcag_otras_herramientas_evaluacion=
<ul>
<ul>
<li>JAWS, NVDA, VoiceOver — navegación por encabezados</li>
<li>
<li>WAVE y AXE — revisión de estructura semántica</li>
<strong>Bookmarklet diagnóstico encabezados:</strong><br>
<li>Web Developer Toolbar — outline de encabezados</li>
<html>
<li>Herramientas del navegador — inspección de DOM</li>
<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>'''Inspección del contenido''': revisar que los encabezados (<code>&lt;h1&gt;–&lt;h6&gt;</code>) describen claramente el contenido de la sección que introducen.</li>
<li>'''Lectores de pantalla''': (NVDA, JAWS, VoiceOver) usar navegación por encabezados para confirmar que cada título tiene sentido fuera de contexto y guía adecuadamente al usuario.</li>
<li>'''Inspección del DOM''': verificar que los encabezados se usan para estructurar el contenido y no solo para aplicar estilos visuales.</li>
<li>'''Revisión editorial''': comprobar que los encabezados no son genéricos o ambiguos (p. ej. “Más” o “Información”) cuando puede utilizarse un texto más claro.</li>
</ul>
</ul>
}}
}}

Revisión actual - 12:45 6 nov 2025

2.4.6-A. Encabezados descriptivos

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)

  • Los encabezados usados en la página deben identificar el contenido de la sección que encabezan.

Comprensión del criterio

Descripción resumida

Los encabezados de sección deben comunicar claramente el contenido que presentan, facilitando la orientación, lectura y escaneo rápido de la página.

Objetivo

Permitir que los usuarios identifiquen rápidamente la estructura y propósito de cada sección sin leer todo el contenido.

Importancia de cumplir el criterio

Una jerarquía clara y encabezados descriptivos ayudan a las personas con discapacidad cognitiva, usuarios de lectores de pantalla y quienes escanean visualmente la información para localizar contenido relevante sin esfuerzo.

Referencias WCAG

Recursos de apoyo

Evaluación del criterio

Tipo de evaluación

Evaluación Manual

Procedimiento de evaluación

Usa la herramienta de Heading Maps.
  1. Paso 1. Visualizar la estructura de encabezados que identifica la herramienta.
  2. Paso 2. Verificar que los elementos identificados como encabezados:
    • a. Identifican la sección de contenido que encabezan.
    • b. Son claros y breves.

Resultado esperado

Los encabezados describen adecuadamente su contenido, siguen un orden jerárquico correcto y permiten comprender y navegar la página con facilidad.

Ejemplo

Encabezados descriptivos y estructurados. 

<section>
<h1>Guía de solicitud de becas</h1>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
<h2>Requisitos para aplicar</h2>
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
<h3>Documentación necesaria</h3>
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. 
</section>

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
  • Inspección del contenido: revisar que los encabezados (<h1>–<h6>) describen claramente el contenido de la sección que introducen.
  • Lectores de pantalla: (NVDA, JAWS, VoiceOver) usar navegación por encabezados para confirmar que cada título tiene sentido fuera de contexto y guía adecuadamente al usuario.
  • Inspección del DOM: verificar que los encabezados se usan para estructurar el contenido y no solo para aplicar estilos visuales.
  • Revisión editorial: comprobar que los encabezados no son genéricos o ambiguos (p. ej. “Más” o “Información”) cuando puede utilizarse un texto más claro.










Ejemplos accesibles y no accesibles creados por alumnos

Comentarios

A continuación se muestran comentarios sobre el criterio 2.4.6-A. Encabezados descriptivos

Loading comments...




Obtenido de «https://wikiwcag.udl.cat/index.php?title=Principio_2/2.4_Navegable/2.4.6-A&oldid=3732»