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

De WCAG Wiki
VisualWikitexto
Página creada con «aqui van ejemplos:»
 
Sin resumen de edición
 
(No se muestran 9 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-G
|wcag_titulo_criterio=1.3.1-G. Celdas de encabezado identificadas
|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 de tabla
 
|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 identificar las celdas de encabezado con el elemento <code><nowiki><th></nowiki></code> y las celdas de datos con <code><nowiki><td></nowiki></code>.
 
|wcag_descripcion_resumida=
Las tablas deben utilizar celdas de encabezado <code><nowiki><th></nowiki></code> para identificar correctamente las filas y columnas.
 
Esto permite a los lectores de pantalla anunciar los encabezados antes de cada dato, facilitando la comprensión de la relación entre celdas.
 
|wcag_objetivo=
Garantizar que los usuarios puedan comprender las relaciones entre los datos tabulares y los encabezados correspondientes mediante tecnologías de apoyo.
 
|wcag_importancia=
Sin <code><nowiki><th></nowiki></code>, los usuarios de lectores de pantalla reciben datos sin contexto.
 
El etiquetado correcto permite interpretar correctamente la tabla incluso en formatos alternativos.
 
|wcag_referencias=
<ul>
<li><span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/html/H51 H51: Using table markup to present tabular information]</span></li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/failures/F91 F91: Failure for not marking up table headers properly]</span></li>
</ul>
 
|wcag_recursos=
<strong> Consejos </strong>
<ul>
<li>Marcar las tablas con
(<code><nowiki><table></nowiki></code>,<code><nowiki><th></nowiki></code>, <code><nowiki><tr></nowiki></code>,<code><nowiki><td></nowiki></code>) </li>
</ul>
 
|wcag_tipo_evaluacion=Semiautomática
 
|wcag_pasos_evaluacion=
Usa la herramienta de ''' [https://wave.webaim.org/ Wave].'''
<ol class="paso-list">
<li><span class="paso-badge">Paso 1.</span>
Abrir WAVE y seleccionar '''Details – Structural elements'''.</li>
<li><span class="paso-badge">Paso 2.</span>
Comprobar, para cada tabla de datos, que se identifiquen en la herramienta los elementos de encabezado mediante '''table header cell'''.</li>
</ol>
 
|wcag_resultado_evaluacion=
Las tablas de datos usan <code><nowiki><th></nowiki></code> para encabezados y <code><nowiki><td></nowiki></code> para celdas de datos, con roles correctamente interpretados por productos de apoyo.
 
|wcag_ejemplo_evaluacion=
<div class="accessibility-card">
Se presenta un codigo con etiquetas HTML correctas, <code><nowiki><th></nowiki></code> para marcar el encabezado y <code><nowiki><td></nowiki></code> para marcar los datos de cada columna.
 
<pre class="wcag-codigo-html">
<table>
<tr>
  <th>Producto</th>
  <th>Precio</th>
</tr>
<tr>
  <td>Café</td>
  <td>2€</td>
</tr>
</table>
</pre>
</div>
 
|wcag_otras_herramientas_evaluacion=
<ul>
<li>
<li><strong>Inspección del navegador</strong>
Observar si elementos que visualmente son tablas están marcados como tal en el código fuente</li>
</ul>
}}

Revisión actual - 07:10 5 nov 2025

1.3.1-G. Celdas de encabezado identificadas

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 identificar las celdas de encabezado con el elemento <th> y las celdas de datos con <td>.

Comprensión del criterio

Descripción resumida

Las tablas deben utilizar celdas de encabezado <th> para identificar correctamente las filas y columnas. Esto permite a los lectores de pantalla anunciar los encabezados antes de cada dato, facilitando la comprensión de la relación entre celdas.

Objetivo

Garantizar que los usuarios puedan comprender las relaciones entre los datos tabulares y los encabezados correspondientes mediante tecnologías de apoyo.

Importancia de cumplir el criterio

Sin <th>, los usuarios de lectores de pantalla reciben datos sin contexto. El etiquetado correcto permite interpretar correctamente la tabla incluso en formatos alternativos.

Referencias WCAG

Recursos de apoyo

Consejos
  • Marcar las tablas con (<table>,<th>, <tr>,<td>)

Evaluación del criterio

Tipo de evaluación

Evaluación Semiautomática

Procedimiento de evaluación

Usa la herramienta de Wave.
  1. Paso 1. Abrir WAVE y seleccionar Details – Structural elements.
  2. Paso 2. Comprobar, para cada tabla de datos, que se identifiquen en la herramienta los elementos de encabezado mediante table header cell.

Resultado esperado

Las tablas de datos usan <th> para encabezados y <td> para celdas de datos, con roles correctamente interpretados por productos de apoyo.

Ejemplo

Se presenta un codigo con etiquetas HTML correctas, <th> para marcar el encabezado y <td> para marcar los datos de cada columna. 

<table>
 <tr>
  <th>Producto</th>
  <th>Precio</th>
 </tr>
 <tr>
  <td>Café</td>
  <td>2€</td>
 </tr>
</table>

Otras herramientas de evaluación

  • Inspección del navegador Observar si elementos que visualmente son tablas están marcados como tal en el código fuente










Ejemplos accesibles y no accesibles creados por alumnos

Comentarios

A continuación se muestran comentarios sobre el criterio 1.3.1-G. Celdas de encabezado identificadas

Loading comments...




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