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

De WCAG Wiki
← Edición anterior
VisualWikitexto
Sin resumen de edición
Sin resumen de edición
 
(No se muestra una edición intermedia del mismo usuario)
Línea 4: Línea 4:
|wcag_titulo_criterio=1.3.1-H. Asociación entre celdas
|wcag_titulo_criterio=1.3.1-H. Asociación entre celdas
|wcag_nivel=A
|wcag_nivel=A
|wcag_version=2.2
|wcag_version=2.0
|wcag_principio=1_Perceptible
|wcag_principio=1_Perceptible
|wcag_principio_url=Principio_1
|wcag_principio_url=Principio_1
Línea 16: Línea 16:
   [[Archivo:Sinvision.png|20px|class=icon-discapacidad|alt=Discapacidad visual total]]
   [[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="discapacidad-texto">[[:Categoría:Discapacidad visual total|Visual total]]</span> –
   <span class="gravedad gravedad-leve">Barrera leve</span>
   <span class="gravedad gravedad-grave">Barrera grave</span>
</li>
</li>


Línea 22: Línea 22:
   [[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 leve</span>
   <span class="gravedad gravedad-grave">Barrera grave</span>
</li>
</li>


Línea 33: Línea 33:


|wcag_descripcion_resumida=
|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.
En tablas complejas (más de un nivel de encabezados), es necesario asociar con codigo HTML correcto las celdas de encabezado con las celdas de datos mediante atributos como  
<code><nowiki><scope></nowiki></code>, <code><nowiki><id></nowiki></code> y <code><nowiki><headers></nowiki></code>, para garantizar que los productos de apoyo comprendan las relaciones entre datos.


|wcag_objetivo=
|wcag_objetivo=
Línea 43: Línea 44:
|wcag_referencias=
|wcag_referencias=
<ul>
<ul>
<li>H43: Using id and headers attributes to associate cells in data tables</li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/html/H43 H43: Using id and headers attributes to associate cells in data tables]</span></li>
<li>H63: Using scope to associate header cells and data cells</li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/html/H63 H63: Using scope to associate header cells and data cells]</span></li>
<li>F90: Incorrectly associating table headers and data cells</li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/failures/F90 F90: Incorrectly associating table headers and data cells]</span></li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/failures/F91 F91: Failure of Success Criterion 1.3.1 for not correctly marking up table headers]</span></li>
</ul>
</ul>


|wcag_recursos=
|wcag_recursos=
<strong>Consejos </strong>
<ul>
<ul>
<li>Intentar simplificar la tabla antes de asociar manualmente las celdas</li>
<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>Asignar
<code><nowiki><ID></nowiki></code> único a cada <code><nowiki><TH></nowiki></code> y referenciar en cada <code><nowiki><TD></nowiki></code>
</li>
<li>Verificar asociaciones con herramientas y lector de pantalla</li>
<li>Verificar asociaciones con herramientas y lector de pantalla</li>
</ul>
</ul>


<html>
<iframe width="100%" height="400"
        src="https://www.youtube.com/embed/8E4jh9qU_Js"
        title="Tablas complejas accesibles — uso de scope, id y headers en HTML"
        frameborder="0"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
        allowfullscreen>
</iframe>
</html>


|wcag_tipo_evaluacion=Comprobación manual
 
|wcag_tipo_evaluacion=Manual


|wcag_pasos_evaluacion=
|wcag_pasos_evaluacion=
<ol class="paso-list">
<ol class="paso-list">
<li>Localizar tablas complejas con múltiples encabezados.</li>
<li><span class="paso-badge">Paso 1.</span>
<li>Usar inspección del navegador para verificar atributos `scope`, `id` y `headers` o ARIA roles.</li>
Localizar tablas complejas con múltiples encabezados.</li>
<li>Confirmar que cada celda de datos está asociada a sus encabezados correspondientes.</li>
<li><span class="paso-badge">Paso 2.</span>
Usando la herramienta de inspección de código del navegador, comprobar que se utilicen los elementos necesarios para asociar adecuadamente las celdas de encabezado con las celdas de datos (ej. atributo <code><nowiki><scope></nowiki></code> o con los atributos de WAI-ARIA <code><nowiki><rowheader></nowiki></code> o <code><nowiki><columnheader></nowiki></code>).
</li>
</ol>
</ol>


Línea 78: Línea 77:


|wcag_ejemplo_evaluacion=
|wcag_ejemplo_evaluacion=
Ejemplo correcto:
<div class="accessibility-card">
Tabla con un marcado HTML semantico adecuado.
<pre class="wcag-codigo-html">
<pre class="wcag-codigo-html">
<th id="col1">Año</th>
<th id="col1">Año</th>
Línea 84: Línea 84:
<td headers="col1 col2">2024 — 500 unidades</td>
<td headers="col1 col2">2024 — 500 unidades</td>
</pre>
</pre>
</div>


Ejemplo con `scope`:
<div class="accessibility-card">
Ejemplo con <code><nowiki><scope></nowiki></code>.
<pre class="wcag-codigo-html">
<pre class="wcag-codigo-html">
<th scope="col">Año</th>
<th scope="col">Año</th>
Línea 92: Línea 94:
<td>500</td>
<td>500</td>
</pre>
</pre>
</div>


|wcag_otras_herramientas_evaluacion=
|wcag_otras_herramientas_evaluacion=
<ul>
<ul>
<li>Inspección del navegador</li>
<li>'''Inspección del navegador''': comprobar el codigo fuente que hay en elementos tabla </li>
<li>Lector de pantalla (NVDA, JAWS, VoiceOver)</li>
<li>'''Lector de pantalla''': (NVDA, JAWS, VoiceOver) Comprobar si al leer una tabla, se see de forma comprensible para el usuario, indicando a que dato de la columna corresponde el dato de la fila.</li>
</ul>
</ul>


}}
}}

Revisión actual - 07:10 5 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 con codigo HTML correcto las celdas de encabezado con las celdas de datos mediante atributos como <scope>, <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

Recursos de apoyo

Consejos
  • Intentar simplificar la tabla antes de asociar manualmente las celdas
  • 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 Manual

Procedimiento de evaluación

  1. Paso 1. Localizar tablas complejas con múltiples encabezados.
  2. Paso 2. Usando la herramienta de inspección de código del navegador, comprobar que se utilicen los elementos necesarios para asociar adecuadamente las celdas de encabezado con las celdas de datos (ej. atributo <scope> o con los atributos de WAI-ARIA <rowheader> o <columnheader>).

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

Tabla con un marcado HTML semantico adecuado. 

<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: comprobar el codigo fuente que hay en elementos tabla
  • Lector de pantalla: (NVDA, JAWS, VoiceOver) Comprobar si al leer una tabla, se see de forma comprensible para el usuario, indicando a que dato de la columna corresponde el dato de la fila.










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=3405»