Diferencia entre revisiones de «Principio 1/1.3 Adaptable/1.3.1-B»
De WCAG Wiki
< Principio 1 | 1.3 Adaptable
Sin resumen de edición |
Sin resumen de edición |
||
| Línea 1: | Línea 1: | ||
{{CriterioWCAG | |||
== | |id_wcag_criterio=1.3.1 | ||
|id_wcag_subcriterio=1.3.1-B | |||
|wcag_titulo_criterio=1.3.1-B. Evitar falsos 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=Encabezados falsos | |||
|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= | |||
No se deben emplear los elementos de encabezado (<code><nowiki> <h1>-<h6> </nowiki></code>) para marcar textos que no son encabezados de sección de contenido. | |||
|wcag_descripcion_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. | |||
|wcag_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. | |||
|wcag_importancia= | |||
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. | |||
|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> | |||
</ul> | |||
|wcag_recursos= | |||
<ul> | |||
<li><span lang="en">[https://www.w3.org/WAI/tutorials/page-structure/headings/ Headings in Page Structure Tutorial (en inglés)]</span></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 la extensión <strong>HeadingsMap</strong> o herramienta similar.</li> | |||
<li><span class="paso-badge">Paso 2.</span> | |||
Visualizar la estructura de encabezados que identifica la herramienta. | |||
</li> | |||
<li><span class="paso-badge">Paso 3.</span> | |||
Verificar que no existe ningún elemento identificado como encabezado que no tenga una funcionalidad semántica como encabezado. | |||
</li> | |||
</ol> | |||
|wcag_resultado_evaluacion= | |||
No existen encabezados falsos: cada <h1>-<h6> o role="heading" representa una sección real del contenido. | |||
|wcag_ejemplo_evaluacion= | |||
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: (<code><nowiki> <p> </nowiki></code> o <code><nowiki><span> </nowiki></code>) | |||
<strong> Ejemplo incorrecto </strong> | |||
<div class="accessibility-card-error"> | |||
<pre class="wcag-codigo-html"> | |||
<h2>Titulo de una noticia</h2> | |||
<h3>Texto de la noticia</h3> | |||
<h3>Fecha de creación de la noticia</h3> | |||
</pre> | |||
</div> | |||
|wcag_otras_herramientas_evaluacion= | |||
<ul> | |||
<li>Herramientas de inspección del navegador</li> | |||
</ul> | |||
}} | |||
Revisión del 17:22 4 nov 2025
1.3.1-B. Evitar falsos encabezados
- Nivel: A
- Versión: 2.0
- Principio: 1_Perceptible
- Pauta: 1.3_Adaptable
- Grupo: Estructura y relaciones
- Subgrupo: Encabezados falsos
Discapacidades afectadas
Este criterio puede afectar a distintas personas con discapacidad. A continuación se indican las más relevantes.
-
Visual total –
Barrera grave
-
sordoceguera –
Barrera grave
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.
- Paso 1. Abrir la extensión HeadingsMap o herramienta similar.
- Paso 2. Visualizar la estructura de encabezados que identifica la herramienta.
- 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</h3> <h3>Fecha de creación de la noticia</h3>
Otras herramientas de evaluación
- Herramientas de inspección del navegador
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...
