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

De WCAG Wiki
← Edición anteriorEdición siguiente →
VisualWikitexto
Sin resumen de edición
Sin resumen de edición
Línea 4: Línea 4:
|wcag_titulo_criterio=1.3.1-G. Celdas de encabezado identificadas
|wcag_titulo_criterio=1.3.1-G. Celdas de encabezado identificadas
|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 30: Línea 30:


|wcag_texto_criterioOAW=
|wcag_texto_criterioOAW=
En las tablas de datos se deben identificar las celdas de encabezado con el elemento <th> y las celdas de datos con <td>.
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=
|wcag_descripcion_resumida=
Las tablas deben utilizar celdas de encabezado &lt;th&gt; 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.
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=
|wcag_objetivo=
Línea 39: Línea 41:


|wcag_importancia=
|wcag_importancia=
Sin &lt;th&gt;, los usuarios de lectores de pantalla reciben datos sin contexto. El etiquetado correcto permite interpretar correctamente la tabla incluso en formatos alternativos.
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=
|wcag_referencias=
<ul>
<ul>
<li>H51: Using table markup to present tabular information</li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/html/H51 H51: Using table markup to present tabular information]</span></li>
<li>F91: Failure for not marking up table headers properly</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>
</ul>


|wcag_recursos=
|wcag_recursos=
<strong> Consejos </strong>
<ul>
<ul>
<li>En PDF: marcar Table, TR, TH, TD</li>
<li>Marcar las tablas con
<li>En editores como Word/Docs: activar “Fila de encabezado”</li>
(<code><nowiki><table></nowiki></code>,<code><nowiki><th></nowiki></code>, <code><nowiki><tr></nowiki></code>,<code><nowiki><td></nowiki></code>) </li>
<li>Revisar con WAVE la detección de &lt;th&gt;</li>
</ul>
</ul>
<html>
<iframe width="100%" height="400"
        src="https://www.youtube.com/embed/Hz_CUQpz-6I"
        title="Tablas accesibles en HTML — marcación correcta con TH y TD"
        frameborder="0"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
        allowfullscreen>
</iframe>
</html>


|wcag_tipo_evaluacion=Semiautomática
|wcag_tipo_evaluacion=Semiautomática


|wcag_pasos_evaluacion=
|wcag_pasos_evaluacion=
Usa la herramienta de ''' [https://wave.webaim.org/ Wave].'''
<ol class="paso-list">
<ol class="paso-list">
<li>Abrir WAVE → “Details – Structural elements”.</li>
<li><span class="paso-badge">Paso 1.</span>
<li>Verificar que las celdas de encabezado se identifiquen como “table header cell”.</li>
Abrir WAVE y seleccionar '''Details – Structural elements'''.</li>
<li>Confirmar que las celdas de datos están marcadas con &lt;td&gt;.</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>
</ol>


|wcag_resultado_evaluacion=
|wcag_resultado_evaluacion=
Las tablas de datos usan &lt;th&gt; para encabezados y &lt;td&gt; para celdas de datos, con roles correctamente interpretados por productos de apoyo.
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=
|wcag_ejemplo_evaluacion=
Ejemplo correcto:
<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">
<pre class="wcag-codigo-html">
<table>
<table>
Línea 90: Línea 88:
</table>
</table>
</pre>
</pre>
 
</div>
Buena práctica:
<pre class="wcag-codigo-html">
<!-- En Word: activas 'Fila de encabezado' para exportar como TH -->
</pre>


|wcag_otras_herramientas_evaluacion=
|wcag_otras_herramientas_evaluacion=

Revisión del 06:14 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

  • WAVE
  • Inspección del navegador










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