Sin resumen de edición |
Sin resumen de edición |
||
| Línea 31: | Línea 31: | ||
</article> | </article> | ||
</html> | </html> | ||
{{CriterioWCAG | |||
|id_wcag_criterio=1.3.1 | |||
|id_wcag_subcriterio=1.3.1-A | |||
|wcag_titulo_criterio=1.3.1-A. Información y relaciones | |||
|wcag_nivel=A | |||
|wcag_version=2.2 | |||
|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, listas, agrupaciones | |||
|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: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:Cognitiva.png|20px|class=icon-discapacidad|alt=Discapacidad cognitiva]] | |||
<span class="discapacidad-texto">[[:Categoría:Discapacidad cognitiva|Cognitiva]]</span> – | |||
<span class="gravedad gravedad-leve">Barrera leve</span> | |||
</li> | |||
|wcag_lista_discapacidades= | |||
[[Categoría:Discapacidad visual total]] | |||
[[Categoría:Discapacidad baja visión]] | |||
[[Categoría:Discapacidad cognitiva]] | |||
|wcag_texto_criterioOAW= | |||
La información, estructura y relaciones comunicadas a través de la presentación pueden ser determinadas por software o están disponibles como texto. | |||
|wcag_descripcion_resumida= | |||
Este criterio garantiza que la estructura y las relaciones del contenido —como encabezados, listas, tablas y agrupaciones de formularios— sean reconocibles por software y no solo por su apariencia visual. Permite que lectores de pantalla y otros productos de apoyo interpreten correctamente el contenido. | |||
|wcag_objetivo= | |||
Asegurar que la información y la estructura del contenido sean identificables y procesables por software, de manera que puedan presentarse en diferentes formatos sin perder coherencia ni significado. | |||
|wcag_importancia= | |||
Si la estructura solo se define visualmente (por tamaño, posicionamiento o estilo), las ayudas técnicas no pueden interpretarla, lo que genera confusión, pérdida de contexto y navegación ineficiente. | |||
|wcag_referencias= | |||
<ul> | |||
<li>H42: Using h1-h6 to identify headings</li> | |||
<li>H48: Using ol, ul and dl for lists</li> | |||
<li>G115: Using semantic elements to mark up structure</li> | |||
<li>G140: Separating information and structure from presentation</li> | |||
<li>F43: Failure due to incorrect structural markup</li> | |||
</ul> | |||
|wcag_recursos= | |||
<ul> | |||
<li>G138: Using semantic markup when color conveys information</li> | |||
<li>H71: Agrupar controles de formulario con <fieldset> y <legend></li> | |||
<li>H44: Asociar etiquetas mediante <label></li> | |||
</ul> | |||
<html> | |||
<iframe width="100%" height="400" | |||
src="https://www.youtube.com/embed/Hu4Yvq-g7_Y" | |||
title="Explicación sobre semántica HTML y encabezados accesibles" | |||
frameborder="0" | |||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" | |||
allowfullscreen> | |||
</iframe> | |||
</html> | |||
|wcag_tipo_evaluacion=Semiautomática | |||
|wcag_pasos_evaluacion= | |||
<ol class="paso-list"> | |||
<li>Abrir la extensión <strong>HeadingsMap</strong> y visualizar la estructura jerárquica.</li> | |||
<li>Comprobar que los encabezados corresponden a títulos reales de sección.</li> | |||
<li>Verificar que ningún texto con estilo visual de título esté sin <h1-h6> o role="heading".</li> | |||
<li>Asegurar que la jerarquía h1 → h2 → h3 sea coherente y lógica.</li> | |||
<li>Comprobar listas (<ul>, <ol>, <dl>), tablas de datos y formularios (<fieldset>, <legend>, <label>) y su semántica.</li> | |||
</ol> | |||
|wcag_resultado_evaluacion= | |||
La estructura del contenido es determinable por software y está marcada con elementos semánticos adecuados. | |||
|wcag_ejemplo_evaluacion= | |||
Ejemplo correcto: | |||
<pre class="wcag-codigo-html"> | |||
<h2>Servicios</h2> | |||
<ul> | |||
<li>Atención al cliente</li> | |||
<li>Formación</li> | |||
</ul> | |||
</pre> | |||
Ejemplo incorrecto: | |||
<pre class="wcag-codigo-html"> | |||
<p style="font-size:28px; font-weight:bold;">Servicios</p> | |||
</pre> | |||
|wcag_otras_herramientas_evaluacion= | |||
<ul> | |||
<li>HeadingsMap</li> | |||
<li>WAVE</li> | |||
<li>Inspección del navegador</li> | |||
</ul> | |||
}} | |||
Usuarios más afectados
Personas con discapacidad visual total - Barrera grave
Personas con baja visión – Barrera moderada
Personas con discapacidad cognitiva – Barrera leve
Discapacidades afectadas
Este criterio puede afectar a distintas personas con discapacidad. A continuación se indican las más relevantes.
Visual total –
Barrera grave
Baja visión –
Barrera moderada
Cognitiva –
Barrera leve
Enunciado del criterio (Observatorio de Accesibilidad Web)
<h2>Servicios</h2> <ul> <li>Atención al cliente</li> <li>Formación</li> </ul>
Ejemplo incorrecto:
<p style="font-size:28px; font-weight:bold;">Servicios</p>
A continuación se muestran comentarios sobre el criterio 1.3.1-A. Información y relaciones
