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

De WCAG Wiki
VisualWikitexto
Página creada con «== '''2.4.6-A. Los encabezados usados en la página deben identificar el contenido de la sección que encabezan.''' == '''A) EJEMPLO ACCESIBLE:''' '''B) EJEMPLO NO ACCESIBLE:'''»
 
Sin resumen de edición
 
(No se muestran 5 ediciones intermedias del mismo usuario)
Línea 1: Línea 1:
== '''2.4.6-A. Los encabezados usados en la página deben identificar el contenido de la sección que encabezan.''' ==
{{CriterioWCAG
'''A) EJEMPLO ACCESIBLE:'''
|id_wcag_criterio=2.4.6
|id_wcag_subcriterio=2.4.6-A
|wcag_titulo_criterio=2.4.6-A. Encabezados descriptivos
|wcag_nivel=AA
|wcag_version=2.0
|wcag_principio=2_Operable
|wcag_principio_url=Principio_2
|wcag_pauta=2.4_Navegable
|wcag_pauta_url=Principio_2/2.4_Navegable
|wcag_grupo=Estructura_de_contenido
|wcag_subgrupo=Encabezados_y_organización
|wcag_subcriterio_url=Principio_2/2.4_Navegacion_clara/2.4.6-A


'''B) EJEMPLO NO ACCESIBLE:'''
|wcag_discapacidades=
<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-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: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-moderada">Barrera moderada</span>
</li>
 
|wcag_lista_discapacidades=
[[Categoría:Discapacidad cognitiva]]
[[Categoría:Discapacidad baja visión]]
[[Categoría:Discapacidad visual total]]
 
|wcag_texto_criterioOAW=
Los encabezados usados en la página deben identificar el contenido de la sección que encabezan.
 
|wcag_descripcion_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.
 
|wcag_objetivo=
Permitir que los usuarios identifiquen rápidamente la estructura y propósito de cada sección sin leer todo el contenido.
 
|wcag_importancia=
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.
 
|wcag_referencias=
<ul>
<li><span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/general/G130 G130: Providing descriptive headings]</span></li>
</ul>
 
|wcag_recursos=
<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>
</ul>
 
|wcag_tipo_evaluacion=Manual
 
 
|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>
Visualizar la estructura de encabezados que identifica la herramienta.
</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>
 
 
|wcag_resultado_evaluacion=
Los encabezados describen adecuadamente su contenido, siguen un orden jerárquico correcto y permiten comprender y navegar la página con facilidad.
 
|wcag_ejemplo_evaluacion=
<div class="accessibility-card">
Encabezados descriptivos y estructurados.
<pre class="wcag-codigo-html">
<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>
</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>'''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>
}}

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»