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

De WCAG Wiki
← Edición anterior
VisualWikitexto
Sin resumen de edición
Sin resumen de edición
 
(No se muestra una edición intermedia del mismo usuario)
Línea 4: Línea 4:
|wcag_titulo_criterio=1.3.1-L. Tablas de maquetación limpias
|wcag_titulo_criterio=1.3.1-L. Tablas de maquetación limpias
|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 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 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>


<li class="discapacidad-item">
<li class="discapacidad-item">
   [[Archivo:Cognitiva.png|20px|class=icon-discapacidad|alt=Discapacidad cognitiva]]
   [[Archivo:Sordoceguera.png|20px|class=icon-discapacidad|alt=Discapacidad sordoceguera]]
   <span class="discapacidad-texto">[[:Categoría:Discapacidad cognitiva|Cognitiva]]</span> –
   <span class="discapacidad-texto">[[:Categoría:Discapacidad sordoceguera|Sordoceguera]]</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=
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).
En las tablas de maquetación no se deben emplear elementos o atributos propios de las tablas de datos (<code><nowiki> <th>, <caption>, <summary></nowiki></code> ni atributos ''scope'' o ''headers''.
 
|wcag_descripcion_resumida=
|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.
Cuando una tabla se usa únicamente para maquetación visual (algo que ahora ya no se hace porque el codigo CSS ha evolucionado mucho), 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=
|wcag_objetivo=
Línea 50: Línea 42:
|wcag_referencias=
|wcag_referencias=
<ul>
<ul>
<li>H39: Caption en tablas de datos</li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/html/H39 H39: Using caption elements to associate data table captions with data tables]</span></li>
<li>H73: Uso de summary en tablas de datos</li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/html/H73 H73: Using the summary attribute to describe the organization of data tables]</span></li>
<li>H43: Uso de id y headers</li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/html/H43 H43: Using id and headers attributes to associate cells in data tables]</span></li>
<li>H63: Uso de scope</li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/html/H63 H63: Using scope to associate header cells and data cells]</span></li>
<li>F46: Failure por usar &lt;th&gt; en tablas de maquetación</li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/failures/F46 F46: Failure due to using th elements in layout tables]</span></li>
</ul>
</ul>


|wcag_recursos=
|wcag_recursos=
<strong> Consejos </strong>
<ul>
<ul>
<li>No usar &lt;th&gt;, &lt;caption&gt; ni atributos summary, scope, headers en tablas de diseño</li>
<li>No usar <code><nowiki> <th>, <caption> <caption>, 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>No usar tabla para maquetación, y si se hace debe tener sentido al leerse linealmente</li>
<li>Usar CSS moderno (grid, flex) en lugar de tablas para maquetación</li>
<li>Usar codigo CSS como ''grid'' y ''flex'' en lugar de tablas para maquetación</li>
</ul>
</ul>


|wcag_tipo_evaluacion=Comprobación manual
|wcag_tipo_evaluacion=Manual


|wcag_pasos_evaluacion=
|wcag_pasos_evaluacion=
<ol class="paso-list">
<ol class="paso-list">
<li>Identificar tablas usadas para maquetación (sin datos tabulares reales).</li>
<li><span class="paso-badge">Paso 1.</span>
<li>Revisar el código HTML para asegurar que no contienen &lt;th&gt;, &lt;caption&gt;, summary, scope ni headers.</li>
Localizar las tablas de maquetación que existan en la página.</li>
<li>Linealizar la página (por ejemplo, con Web Developer Toolbar) y verificar que el contenido sigue siendo lógico.</li>
<li><span class="paso-badge">Paso 2.</span>  
Usando la herramienta de inspección de código del navegador, verificar que no se utilizan elementos o atributos propios de las tablas de datos
</li>
</ol>
</ol>


|wcag_resultado_evaluacion=
|wcag_resultado_evaluacion=
Las tablas de maquetación no incluyen elementos semánticos propios de tablas de datos.
Si existen tablas de maquetación, estas no incluyen elementos semánticos propios de tablas de datos.


|wcag_ejemplo_evaluacion=
|wcag_ejemplo_evaluacion=
Ejemplo correcto (tabla solo para maquetación):
<div class="accessibility-card">
Codigo HTML de una tabla solo para maquetación.
<pre class="wcag-codigo-html">
<pre class="wcag-codigo-html">
<table>
<table>
Línea 83: Línea 80:
</table>
</table>
</pre>
</pre>
</div>


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=
|wcag_otras_herramientas_evaluacion=
<ul>
<ul>
<li>Inspección del navegador</li>
<li>
<li>Web Developer Toolbar (opción “Linearize page”)</li>
'''Web Developer Toolbar''' seleccionar ''' Miscellaneous - Linearize page''' y comprobar que la información que se muestra en forma lineal es comprensible.
<li>'''Lector de pantalla''': (NVDA, JAWS, VoiceOver) Comprobar si se accede a una tabla decorativa, no se lee como una tabla de datos.</li>
</ul>
</ul>


}}
}}

Revisión actual - 08:13 5 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> ni atributos scope o headers.

Comprensión del criterio

Descripción resumida

Cuando una tabla se usa únicamente para maquetación visual (algo que ahora ya no se hace porque el codigo CSS ha evolucionado mucho), 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

Recursos de apoyo

Consejos
  • No usar <nowiki> , , ni atributos summary, scope, headers en tablas de diseño
  • No usar tabla para maquetación, y si se hace debe tener sentido al leerse linealmente
  • Usar codigo CSS como grid y flex en lugar de tablas para maquetación

Evaluación del criterio

Tipo de evaluación

Evaluación Manual

Procedimiento de evaluación

  1. Paso 1. Localizar las tablas de maquetación que existan en la página.
  2. Paso 2. Usando la herramienta de inspección de código del navegador, verificar que no se utilizan elementos o atributos propios de las tablas de datos

Resultado esperado

Si existen tablas de maquetación, estas no incluyen elementos semánticos propios de tablas de datos.

Ejemplo

Codigo HTML de una tabla solo para maquetación. 

<table>
 <tr><td>Texto</td><td>Imagen</td></tr>
</table>

Otras herramientas de evaluación

  • Web Developer Toolbar seleccionar Miscellaneous - Linearize page y comprobar que la información que se muestra en forma lineal es comprensible.
  • Lector de pantalla: (NVDA, JAWS, VoiceOver) Comprobar si se accede a una tabla decorativa, no se lee como una tabla de datos.










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