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

De WCAG Wiki
Sin resumen de edición
Sin resumen de edición
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-grave">Barrera grave</span>
   <span class="gravedad gravedad-leve">Barrera leve</span>
</li>
</li>


<li class="discapacidad-item">
<li class="discapacidad-item">
   [[Archivo:Bajavision.png|20px|class=icon-discapacidad|alt=Baja visión]]
   [[Archivo:Sordoceguera.png|20px|class=icon-discapacidad|alt=Discapacidad sordoceguera]]
  <span class="discapacidad-texto">[[:Categoría:Discapacidad baja visión|Baja visión]]</span> –
   <span class="discapacidad-texto">[[:Categoría:Discapacidad sordoceguera|Sordoceguera]]</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>
   <span class="gravedad gravedad-leve">Barrera leve</span>
</li>
</li>
Línea 33: Línea 27:
|wcag_lista_discapacidades=
|wcag_lista_discapacidades=
[[Categoría:Discapacidad visual total]]
[[Categoría:Discapacidad visual total]]
[[Categoría:Discapacidad baja visión]]
[[Categoría:Discapacidad sordoceguera]]
[[Categoría:Discapacidad cognitiva]]
 
|wcag_texto_criterioOAW=
|wcag_texto_criterioOAW=
La información tabular se debe estructurar mediante elementos de tablas de datos (&lt;table&gt;, &lt;tr&gt;, &lt;th&gt;, &lt;td&gt;).
La información tabular se debe estructurar mediante elementos de tablas de datos (&lt;table&gt;, &lt;tr&gt;, &lt;th&gt;, &lt;td&gt;).

Revisión del 05:44 5 nov 2025

1.3.1-F. Tablas estructuradas

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)

  • La información tabular se debe estructurar mediante elementos de tablas de datos (<table>, <tr>, <th>, <td>).

Comprensión del criterio

Descripción resumida

La información tabular debe estar marcada con etiquetas semánticas de tabla. Esto permite que los usuarios de lectores de pantalla comprendan correctamente la estructura y relaciones entre los datos.

Objetivo

Garantizar que los lectores de pantalla puedan interpretar correctamente las relaciones entre encabezados y celdas de datos al usar marcado de tablas (<table>, <tr>, <th>, <td>).

Importancia de cumplir el criterio

Las tablas mal estructuradas o simuladas visualmente rompen la interpretación del contenido para los usuarios con discapacidad visual y otros usuarios que dependen de tecnologías de apoyo.

Referencias WCAG

  • H51: Using table markup to present tabular information
  • F34: Failure due to formatting tables with white space characters
  • F48: Failure due to using <pre> element for tabular data

Recursos de apoyo

  • En PDF, usar etiquetas Table, TR, TH y TD para datos tabulares
  • Evitar combinar celdas para mejorar comprensión y accesibilidad
  • Usar WAVE para comprobar estructura tabular

Evaluación del criterio

Tipo de evaluación

Evaluación Semiautomática

Procedimiento de evaluación

  1. Usar WAVE y revisar “Details – Structural elements”.
  2. Comprobar que la tabla se marca como “data table”.
  3. Verificar que las celdas de encabezado utilizan <th>.
  4. Comprobar que las celdas de datos usan <td> y mantienen relaciones correctas.

Resultado esperado

La información tabular está estructurada correctamente con <table>, <tr>, <th> y <td>.

Ejemplo

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

Ejemplo incorrecto:

<p>Producto | Precio</p>
<p>Café | 2€</p>

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-F. Tablas estructuradas

Loading comments...