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

De WCAG Wiki
VisualWikitexto
Página creada con «aqui van ejemplos:»
 
Sin resumen de edición
 
(No se muestran 6 ediciones intermedias del mismo usuario)
Línea 1: Línea 1:
aqui van ejemplos:
{{CriterioWCAG
|id_wcag_criterio=1.3.1
|id_wcag_subcriterio=1.3.1-H
|wcag_titulo_criterio=1.3.1-H. Asociación entre celdas
|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=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:Sordoceguera.png|20px|class=icon-discapacidad|alt=Discapacidad sordoceguera]]
  <span class="discapacidad-texto">[[:Categoría:Discapacidad sordoceguera|Sordoceguera]]</span> –
  <span class="gravedad gravedad-grave">Barrera grave</span>
</li>
 
|wcag_lista_discapacidades=
[[Categoría:Discapacidad visual total]]
[[Categoría:Discapacidad sordoceguera]]
 
|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 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=
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><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><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><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>
 
|wcag_recursos=
<strong>Consejos </strong>
<ul>
<li>Intentar simplificar la tabla antes de asociar manualmente las celdas</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>
</ul>
 
 
 
|wcag_tipo_evaluacion=Manual
 
|wcag_pasos_evaluacion=
<ol class="paso-list">
<li><span class="paso-badge">Paso 1.</span>
Localizar tablas complejas con múltiples encabezados.</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>
 
|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=
<div class="accessibility-card">
Tabla con un marcado HTML semantico adecuado.
<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>
</div>
 
<div class="accessibility-card">
Ejemplo con <code><nowiki><scope></nowiki></code>.
<pre class="wcag-codigo-html">
<th scope="col">Año</th>
<th scope="col">Ventas</th>
<td>2024</td>
<td>500</td>
</pre>
</div>
 
|wcag_otras_herramientas_evaluacion=
<ul>
<li>'''Inspección del navegador''': comprobar el codigo fuente que hay en elementos tabla </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>
 
}}

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

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

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»