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

De WCAG Wiki
← Edición anteriorEdición siguiente →
VisualWikitexto
Sin resumen de edición
Sin resumen de edición
Línea 1: Línea 1:
__TOC__
{{CriterioWCAG
== '''1.3.1-H. Asociación entre celdas ''' ==
|id_wcag_criterio=1.3.1
<!--
|id_wcag_subcriterio=1.3.1-H
   Análisis interno:
|wcag_titulo_criterio=1.3.1-H. Asociación entre celdas
   Este criterio impacta principalmente a: Personas con discapacidad visual total
|wcag_nivel=A
  Problema grave: Si las celdas de encabezado y de datos no están correctamente asociadas, los lectores de pantalla no pueden relacionar los datos con su contexto. 
|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=Asociación de celdas en tablas complejas
 
|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=
En las tablas de datos se deben asociar adecuadamente las celdas de encabezado con las celdas de datos.
 
|wcag_descripcion_resumida=
En tablas complejas (más de un nivel de encabezados), es necesario asociar programáticamente las celdas de encabezado con las celdas de datos mediante atributos como `scope`, o `id` y `headers`, para garantizar que los productos de apoyo comprendan las relaciones entre datos.
 
|wcag_objetivo=
Permitir que los lectores de pantalla anuncien correctamente los encabezados asociados a cada celda de datos, facilitando la interpretación de tablas complejas.
 
|wcag_importancia=
Sin la asociación correcta, los usuarios que dependen de tecnologías de apoyo no pueden entender la relación entre los encabezados y los datos, generando confusión y pérdida de información esencial.
 
|wcag_referencias=
<ul>
<li>H43: Using id and headers attributes to associate cells in data tables</li>
<li>H63: Using scope to associate header cells and data cells</li>
<li>F90: Incorrectly associating table headers and data cells</li>
</ul>
 
|wcag_recursos=
<ul>
<li>Intentar simplificar la tabla antes de asociar manualmente las celdas</li>
<li>En PDF: asignar ID único a cada TH y referenciar en cada TD</li>
<li>Verificar asociaciones con herramientas y lector de pantalla</li>
</ul>
 
<html>
<html>
<!-- criterio 1.3.1-H -->
<iframe width="100%" height="400"
<article class="wcag-card">
        src="https://www.youtube.com/embed/8E4jh9qU_Js"
  <section class="wcag-info">
        title="Tablas complejas accesibles — uso de scope, id y headers en HTML"
    <ul>
        frameborder="0"
      <li><span class="label">Nivel:</span><span class="value">A</span></li>
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
      <li><span class="label">Versión:</span><span class="value">2.2</span></li>
        allowfullscreen>
      <li><span class="label">Principio:</span><span class="value">1. Perceptible</span></li>
</iframe>
      <li><span class="label">Pauta:</span><span class="value">1.3 Crear contenido adaptable</span></li>
</html>
      <li><span class="label">Categoría:</span><span class="value">Estructura</span></li>
      <li><span class="label">Subcategoría:</span><span class="value">Asociación de celdas</span></li>
    </ul>
  </section>


  <section class="wcag-users">
|wcag_tipo_evaluacion=Comprobación manual
    <p>Usuarios más afectados</p>
 
    <ul>
|wcag_pasos_evaluacion=
      <li><img src="/images/4/4d/Sinvision.png" alt="Icono de una persona con discapacidad visual" /> Personas con discapacidad visual total - <span class="gravedad">Barrera grave</span></li>
<ol class="paso-list">
      <li><img src="/images/b/b7/Bajavision.png" alt="Icono baja visión" class="icono-discapacidad" /> Personas con baja visión – <span class="gravedad">Barrera moderada</span></li>
<li>Localizar tablas complejas con múltiples encabezados.</li>
      <li><img src="/images/4/40/Cognitiva.png" alt="Icono discapacidad cognitiva" class="icono-discapacidad" /> Personas con discapacidad cognitiva – <span class="gravedad">Barrera leve</span></li>
<li>Usar inspección del navegador para verificar atributos `scope`, `id` y `headers` o ARIA roles.</li>
    </ul>
<li>Confirmar que cada celda de datos está asociada a sus encabezados correspondientes.</li>
  </section>
</ol>
</article>
 
</html>
|wcag_resultado_evaluacion=
Las celdas de encabezado están asociadas programáticamente con las celdas de datos, permitiendo interpretar correctamente las relaciones en la tabla.
 
|wcag_ejemplo_evaluacion=
Ejemplo correcto:
<pre class="wcag-codigo-html">
<th id="col1">Año</th>
<th id="col2">Ventas</th>
<td headers="col1 col2">2024 — 500 unidades</td>
</pre>
 
Ejemplo con `scope`:
<pre class="wcag-codigo-html">
<th scope="col">Año</th>
<th scope="col">Ventas</th>
<td>2024</td>
<td>500</td>
</pre>
 
|wcag_otras_herramientas_evaluacion=
<ul>
<li>Inspección del navegador</li>
<li>Lector de pantalla (NVDA, JAWS, VoiceOver)</li>
</ul>
 
}}

Revisión del 18:25 4 nov 2025

1.3.1-H. Asociación entre celdas

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)

  • En las tablas de datos se deben asociar adecuadamente las celdas de encabezado con las celdas de datos.

Comprensión del criterio

Descripción resumida

En tablas complejas (más de un nivel de encabezados), es necesario asociar programáticamente las celdas de encabezado con las celdas de datos mediante atributos como `scope`, o `id` y `headers`, para garantizar que los productos de apoyo comprendan las relaciones entre datos.

Objetivo

Permitir que los lectores de pantalla anuncien correctamente los encabezados asociados a cada celda de datos, facilitando la interpretación de tablas complejas.

Importancia de cumplir el criterio

Sin la asociación correcta, los usuarios que dependen de tecnologías de apoyo no pueden entender la relación entre los encabezados y los datos, generando confusión y pérdida de información esencial.

Referencias WCAG

  • H43: Using id and headers attributes to associate cells in data tables
  • H63: Using scope to associate header cells and data cells
  • F90: Incorrectly associating table headers and data cells

Recursos de apoyo

  • Intentar simplificar la tabla antes de asociar manualmente las celdas
  • En PDF: asignar ID único a cada TH y referenciar en cada TD
  • Verificar asociaciones con herramientas y lector de pantalla

Evaluación del criterio

Tipo de evaluación

Evaluación Comprobación manual

Procedimiento de evaluación

  1. Localizar tablas complejas con múltiples encabezados.
  2. Usar inspección del navegador para verificar atributos `scope`, `id` y `headers` o ARIA roles.
  3. Confirmar que cada celda de datos está asociada a sus encabezados correspondientes.

Resultado esperado

Las celdas de encabezado están asociadas programáticamente con las celdas de datos, permitiendo interpretar correctamente las relaciones en la tabla.

Ejemplo ilustrativo

Ejemplo correcto: 
<th id="col1">Año</th>
<th id="col2">Ventas</th>
<td headers="col1 col2">2024 — 500 unidades</td>

Ejemplo con `scope`: 

<th scope="col">Año</th>
<th scope="col">Ventas</th>
<td>2024</td>
<td>500</td>


Otras herramientas de evaluación

  • Inspección del navegador
  • Lector de pantalla (NVDA, JAWS, VoiceOver)










Ejemplos accesibles y no accesibles creados por alumnos

 Última modificación
25261.3.1-H-00018 diciembre 2025 10:47:17
2526UPSA1.3.1-H-00018 diciembre 2025 10:23:13


Comentarios

A continuación se muestran comentarios sobre el criterio 1.3.1-H. Asociación entre celdas

Loading comments...




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