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

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-L. Tablas de maquetación limpias''' ==
|id_wcag_criterio=1.3.1
<!-- 
|id_wcag_subcriterio=1.3.1-L
  Análisis interno:
|wcag_titulo_criterio=1.3.1-L. Tablas de maquetación limpias
  Este criterio impacta principalmente a: Personas con discapacidad visual total 
|wcag_nivel=A
  Problema grave: Usar tablas de maquetación mezcladas con tablas de datos confunde lectores de pantalla y dificulta la interpretación de información. 
|wcag_version=2.2
-->
|wcag_principio=1_Perceptible
<html>
|wcag_principio_url=Principio_1
<!-- criterio 1.3.1-L -->
|wcag_pauta=1.3_Adaptable
<article class="wcag-card">
|wcag_pauta_url=Principio_1/1.3_Adaptable
  <section class="wcag-info">
|wcag_grupo=Estructura y relaciones
    <ul>
|wcag_subgrupo=Tablas de maquetación
      <li><span class="label">Nivel:</span><span class="value">A</span></li>
      <li><span class="label">Versión:</span><span class="value">2.2</span></li>
      <li><span class="label">Principio:</span><span class="value">1. Perceptible</span></li>
      <li><span class="label">Pauta:</span><span class="value">1.3 Crear contenido adaptable</span></li>
      <li><span class="label">Categoría:</span><span class="value">Estructura</span></li>
      <li><span class="label">Subcategoría:</span><span class="value">Tablas de maquetación</span></li>
    </ul>
  </section>


  <section class="wcag-users">
|wcag_discapacidades=
    <p>Usuarios más afectados</p>
<li class="discapacidad-item">
    <ul>
  [[Archivo:Sinvision.png|20px|class=icon-discapacidad|alt=Discapacidad visual total]]
      <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>
  <span class="discapacidad-texto">[[:Categoría:Discapacidad visual total|Visual total]]</span> –
      <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>
  <span class="gravedad gravedad-grave">Barrera grave</span>
      <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>
    </ul>
 
  </section>
<li class="discapacidad-item">
</article>
  [[Archivo:Bajavision.png|20px|class=icon-discapacidad|alt=Baja visión]]
</html>
  <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 maquetación no se deben emplear elementos o atributos propios de las tablas de datos (&lt;th&gt;, &lt;caption&gt;, summary, scope, headers).
 
|wcag_descripcion_resumida=
Cuando una tabla se usa únicamente para maquetación visual, no debe incluir marcado semántico de datos como títulos, celdas de encabezado ni atributos para relacionar celdas. Estas tablas deben ser puramente estructurales y comprensibles en lectura lineal.
 
|wcag_objetivo=
Evitar que los lectores de pantalla confundan tablas de diseño con tablas de datos, asegurando que la estructura semántica sea coherente y no genere falsas relaciones entre celdas.
 
|wcag_importancia=
Usar marcado semántico en tablas de maquetación genera confusión para usuarios con lectores de pantalla, quienes pueden interpretar la tabla como información estructurada cuando solo es una distribución visual.
 
|wcag_referencias=
<ul>
<li>H39: Caption en tablas de datos</li>
<li>H73: Uso de summary en tablas de datos</li>
<li>H43: Uso de id y headers</li>
<li>H63: Uso de scope</li>
<li>F46: Failure por usar &lt;th&gt; en tablas de maquetación</li>
</ul>
 
|wcag_recursos=
<ul>
<li>No usar &lt;th&gt;, &lt;caption&gt; ni atributos summary, scope, headers en tablas de diseño</li>
<li>Una tabla de maquetación debe tener sentido al leerse linealmente</li>
<li>Usar CSS moderno (grid, flex) en lugar de tablas para maquetación</li>
</ul>
 
|wcag_tipo_evaluacion=Comprobación manual
 
|wcag_pasos_evaluacion=
<ol class="paso-list">
<li>Identificar tablas usadas para maquetación (sin datos tabulares reales).</li>
<li>Revisar el código HTML para asegurar que no contienen &lt;th&gt;, &lt;caption&gt;, summary, scope ni headers.</li>
<li>Linealizar la página (por ejemplo, con Web Developer Toolbar) y verificar que el contenido sigue siendo lógico.</li>
</ol>
 
|wcag_resultado_evaluacion=
Las tablas de maquetación no incluyen elementos semánticos propios de tablas de datos.
 
|wcag_ejemplo_evaluacion=
Ejemplo correcto (tabla solo para maquetación):
<pre class="wcag-codigo-html">
<table>
<tr><td>Texto</td><td>Imagen</td></tr>
</table>
</pre>
 
Ejemplo incorrecto:
<pre class="wcag-codigo-html">
<table>
<caption>Diseño de página</caption>
<tr>
  <th>Columna</th><td>Contenido</td>
</tr>
</table>
</pre>
 
|wcag_otras_herramientas_evaluacion=
<ul>
<li>Inspección del navegador</li>
<li>Web Developer Toolbar (opción “Linearize page”)</li>
</ul>
 
}}

Revisión del 18:32 4 nov 2025

1.3.1-L. Tablas de maquetación limpias

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 maquetación no se deben emplear elementos o atributos propios de las tablas de datos (<th>, <caption>, summary, scope, headers).

Comprensión del criterio

Descripción resumida

Cuando una tabla se usa únicamente para maquetación visual, no debe incluir marcado semántico de datos como títulos, celdas de encabezado ni atributos para relacionar celdas. Estas tablas deben ser puramente estructurales y comprensibles en lectura lineal.

Objetivo

Evitar que los lectores de pantalla confundan tablas de diseño con tablas de datos, asegurando que la estructura semántica sea coherente y no genere falsas relaciones entre celdas.

Importancia de cumplir el criterio

Usar marcado semántico en tablas de maquetación genera confusión para usuarios con lectores de pantalla, quienes pueden interpretar la tabla como información estructurada cuando solo es una distribución visual.

Referencias WCAG

  • H39: Caption en tablas de datos
  • H73: Uso de summary en tablas de datos
  • H43: Uso de id y headers
  • H63: Uso de scope
  • F46: Failure por usar <th> en tablas de maquetación

Recursos de apoyo

  • No usar <th>, <caption> ni atributos summary, scope, headers en tablas de diseño
  • Una tabla de maquetación debe tener sentido al leerse linealmente
  • Usar CSS moderno (grid, flex) en lugar de tablas para maquetación

Evaluación del criterio

Tipo de evaluación

Evaluación Comprobación manual

Procedimiento de evaluación

  1. Identificar tablas usadas para maquetación (sin datos tabulares reales).
  2. Revisar el código HTML para asegurar que no contienen <th>, <caption>, summary, scope ni headers.
  3. Linealizar la página (por ejemplo, con Web Developer Toolbar) y verificar que el contenido sigue siendo lógico.

Resultado esperado

Las tablas de maquetación no incluyen elementos semánticos propios de tablas de datos.

Ejemplo

Ejemplo correcto (tabla solo para maquetación): 
<table>
 <tr><td>Texto</td><td>Imagen</td></tr>
</table>

Ejemplo incorrecto: 

<table>
 <caption>Diseño de página</caption>
 <tr>
  <th>Columna</th><td>Contenido</td>
 </tr>
</table>

Otras herramientas de evaluación

  • Inspección del navegador
  • Web Developer Toolbar (opción “Linearize page”)










Ejemplos accesibles y no accesibles creados por alumnos

Comentarios

A continuación se muestran comentarios sobre el criterio 1.3.1-L. Tablas de maquetación limpias

Loading comments...




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