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

De WCAG Wiki
← Edición anterior
VisualWikitexto
Sin resumen de edición
Sin resumen de edición
 
(No se muestran 5 ediciones intermedias del mismo usuario)
Línea 10: Línea 10:
|wcag_pauta_url=Principio_1/1.3_Adaptable
|wcag_pauta_url=Principio_1/1.3_Adaptable
|wcag_grupo=Estructura y relaciones
|wcag_grupo=Estructura y relaciones
|wcag_subgrupo=Encabezados falsos
|wcag_subgrupo=Encabezados


|wcag_discapacidades=
|wcag_discapacidades=
Línea 21: Línea 21:
<li class="discapacidad-item">
<li class="discapacidad-item">
   [[Archivo:Sordoceguera.png|20px|class=icon-discapacidad|alt=Discapacidad sordoceguera]]
   [[Archivo:Sordoceguera.png|20px|class=icon-discapacidad|alt=Discapacidad sordoceguera]]
   <span class="discapacidad-texto">[[:Categoría:Discapacidad sordoceguera|sordoceguera]]</span> –
   <span class="discapacidad-texto">[[:Categoría:Discapacidad sordoceguera|Sordoceguera]]</span> –
   <span class="gravedad gravedad-leve">Barrera grave</span>
   <span class="gravedad gravedad-leve">Barrera grave</span>
</li>
</li>
Línea 57: Línea 57:


|wcag_pasos_evaluacion=
|wcag_pasos_evaluacion=
Usa la herramienta de ''' [https://chromewebstore.google.com/detail/headingsmap/flbjommegcjonpdmenkdiocclhjacmbi Heading Maps].''
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>  
<li><span class="paso-badge">Paso 1.</span>  
Línea 79: Línea 79:
<pre class="wcag-codigo-html">
<pre class="wcag-codigo-html">
<h2>Titulo de una noticia</h2>
<h2>Titulo de una noticia</h2>
<h3>Texto de la noticia</h3>
<h3>Texto de la noticia: Lorem Ipsum is simply dummy text of the printing and typesetting industry. 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. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</h3>
<h3>Fecha de creación de la noticia</h3>
<h3>Fecha de creación de la noticia</h3>
</pre>
</pre>
Línea 86: Línea 86:
|wcag_otras_herramientas_evaluacion=
|wcag_otras_herramientas_evaluacion=
<ul>
<ul>
<li>Herramientas de inspección del navegador</li>
<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>
</ul>
}}
}}

Revisión actual - 17:33 4 nov 2025

1.3.1-B. Evitar falsos 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)

  • No se deben emplear los elementos de encabezado ( <h1>-<h6> ) para marcar textos que no son encabezados de sección de contenido.

Comprensión del criterio

Descripción resumida

Se debe evitar usar etiquetas de encabezado únicamente para conseguir texto más grande o destacado. Los encabezados deben marcarse solo cuando verdaderamente introducen y estructuran secciones de contenido.

Objetivo

Garantizar que los encabezados reflejan la estructura real del contenido, evitando confusiones en la navegación mediante lectores de pantalla y permitiendo una interpretación semántica correcta.

Importancia de cumplir el criterio

Cuando un texto marcado como encabezado no representa una sección real, los usuarios de lectores de pantalla pueden recibir información engañosa, perder contexto y tener una experiencia de navegación confusa.

Referencias WCAG

Recursos de apoyo

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 la extensión HeadingsMap o herramienta similar.
  2. Paso 2. Visualizar la estructura de encabezados que identifica la herramienta.
  3. Paso 3. Verificar que no existe ningún elemento identificado como encabezado que no tenga una funcionalidad semántica como encabezado.

Resultado esperado

No existen encabezados falsos: cada <h1>-<h6> o role="heading" representa una sección real del contenido.

Ejemplo

En este ejemplo se muestra el título de la noticia que está marcado como titulo de nivel 2, pero el texto de la noticia y la fecha de creación de la noticia están marcados también como título, aunque debería ser párrafo o otro tipo de etiqueta: ( <p> o <span> )

Ejemplo incorrecto 

<h2>Titulo de una noticia</h2>
<h3>Texto de la noticia: Lorem Ipsum is simply dummy text of the printing and typesetting industry. 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. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</h3>
<h3>Fecha de creación de la noticia</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-B. Evitar falsos encabezados

Loading comments...




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