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

De WCAG Wiki
VisualWikitexto
Página creada con «aqui van ejemplos:»
 
Sin resumen de edición
 
(No se muestran 5 ediciones intermedias del mismo usuario)
Línea 1: Línea 1:
aqui van ejemplos:
{{CriterioWCAG
|id_wcag_criterio=1.3.1
|id_wcag_subcriterio=1.3.1-L
|wcag_titulo_criterio=1.3.1-L. Tablas de maquetación limpias
|wcag_nivel=A
|wcag_version=2.0
|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=Tablas de maquetación
 
|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-leve">Barrera leve</span>
</li>
 
<li class="discapacidad-item">
  [[Archivo:Sordoceguera.png|20px|class=icon-discapacidad|alt=Discapacidad sordoceguera]]
  <span class="discapacidad-texto">[[:Categoría:Discapacidad sordoceguera|Sordoceguera]]</span> –
  <span class="gravedad gravedad-leve">Barrera leve</span>
</li>
 
|wcag_lista_discapacidades=
[[Categoría:Discapacidad visual total]]
[[Categoría:Discapacidad sordoceguera]]
 
|wcag_texto_criterioOAW=
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=
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=
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><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><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><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><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><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>
 
 
|wcag_recursos=
<strong> Consejos </strong>
<ul>
<li>No usar <code><nowiki> <th>, <caption> <caption>, ni atributos ''summary'', ''scope'', ''headers'' en tablas de diseño</li>
<li>No usar tabla para maquetación, y si se hace debe tener sentido al leerse linealmente</li>
<li>Usar codigo CSS como ''grid'' y ''flex'' en lugar de tablas para maquetación</li>
</ul>
 
|wcag_tipo_evaluacion=Manual
 
|wcag_pasos_evaluacion=
<ol class="paso-list">
<li><span class="paso-badge">Paso 1.</span>
Localizar las tablas de maquetación que existan en la página.</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>
 
|wcag_resultado_evaluacion=
Si existen tablas de maquetación, estas no incluyen elementos semánticos propios de tablas de datos.
 
|wcag_ejemplo_evaluacion=
<div class="accessibility-card">
Codigo HTML de una tabla solo para maquetación.
<pre class="wcag-codigo-html">
<table>
<tr><td>Texto</td><td>Imagen</td></tr>
</table>
</pre>
</div>
 
 
 
|wcag_otras_herramientas_evaluacion=
<ul>
<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>
 
 
}}

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»