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 1: Línea 1:
__TOC__
{{CriterioWCAG
=== '''1.3.1-G. Celdas de encabezado identificadas ''' ===
|id_wcag_criterio=1.3.1
<!-- 
|id_wcag_subcriterio=1.3.1-G
   Análisis interno:
|wcag_titulo_criterio=1.3.1-G. Celdas de encabezado identificadas
   Este criterio impacta principalmente a: Personas con discapacidad visual total
|wcag_nivel=A
   Problema grave: Si los <th> no están correctamente asociados a <td>, los usuarios de lectores de pantalla no pueden relacionar los datos con sus encabezados. 
|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=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: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 identificar las celdas de encabezado con el elemento &lt;th&gt; y las celdas de datos con &lt;td&gt;.
 
|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.
 
|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 &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.
 
|wcag_referencias=
<ul>
<li>H51: Using table markup to present tabular information</li>
<li>F91: Failure for not marking up table headers properly</li>
</ul>
 
|wcag_recursos=
<ul>
<li>En PDF: marcar Table, TR, TH, TD</li>
<li>En editores como Word/Docs: activar “Fila de encabezado”</li>
<li>Revisar con WAVE la detección de &lt;th&gt;</li>
</ul>
 
<html>
<html>
<!-- criterio 1.3.1-G -->
<iframe width="100%" height="400"
<article class="wcag-card">
        src="https://www.youtube.com/embed/Hz_CUQpz-6I"
  <section class="wcag-info">
        title="Tablas accesibles en HTML — marcación correcta con TH y TD"
    <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">Celdas de encabezado</span></li>
    </ul>
  </section>


  <section class="wcag-users">
|wcag_tipo_evaluacion=Semiautomática
    <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>Abrir WAVE → “Details – Structural elements”.</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>Verificar que las celdas de encabezado se identifiquen como “table header cell”.</li>
    </ul>
<li>Confirmar que las celdas de datos están marcadas con &lt;td&gt;.</li>
  </section>
</ol>
</article>
 
</html>
|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.
 
|wcag_ejemplo_evaluacion=
Ejemplo correcto:
<pre class="wcag-codigo-html">
<table>
<tr>
  <th>Producto</th>
  <th>Precio</th>
</tr>
<tr>
  <td>Café</td>
  <td>2€</td>
</tr>
</table>
</pre>
 
Buena práctica:
<pre class="wcag-codigo-html">
<!-- En Word: activas 'Fila de encabezado' para exportar como TH -->
</pre>
 
|wcag_otras_herramientas_evaluacion=
<ul>
<li>WAVE</li>
<li>Inspección del navegador</li>
</ul>
 
}}

Revisión del 18:24 4 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

  • H51: Using table markup to present tabular information
  • F91: Failure for not marking up table headers properly

Recursos de apoyo

  • En PDF: marcar Table, TR, TH, TD
  • En editores como Word/Docs: activar “Fila de encabezado”
  • Revisar con WAVE la detección de <th>

Evaluación del criterio

Tipo de evaluación

Evaluación Semiautomática

Procedimiento de evaluación

  1. Abrir WAVE → “Details – Structural elements”.
  2. Verificar que las celdas de encabezado se identifiquen como “table header cell”.
  3. Confirmar que las celdas de datos están marcadas con <td>.

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

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

Buena práctica: 

<!-- En Word: activas 'Fila de encabezado' para exportar como TH -->

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