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

De WCAG Wiki
← Edición anterior
VisualWikitexto
Sin resumen de edición
Sin resumen de edición
 
(No se muestran 8 ediciones intermedias del mismo usuario)
Línea 1: Línea 1:
_TOC_
{{CriterioWCAG
== '''1.3.1-F. Tablas estructuradas''' ==
|id_wcag_criterio=1.3.1
<!-- 
|id_wcag_subcriterio=1.3.1-F
  Análisis interno:
|wcag_titulo_criterio=1.3.1-F. Tablas estructuradas
  Este criterio impacta principalmente a: Personas con discapacidad visual total 
|wcag_nivel=A
  Problema grave: Si las tablas no están correctamente estructuradas con <table>, <tr>, <th> y <td>, los lectores de pantalla no pueden interpretar los datos. 
|wcag_version=2.0
-->
|wcag_principio=1_Perceptible
<html>
|wcag_principio_url=Principio_1
<!-- criterio 1.3.1-F -->
|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 datos
      <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 datos</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:Sordoceguera.png|20px|class=icon-discapacidad|alt=Discapacidad sordoceguera]]
</html>
  <span class="discapacidad-texto">[[:Categoría:Discapacidad sordoceguera|Sordoceguera]]</span> –
  <span class="gravedad gravedad-grave">Barrera grave</span>
</li>
 
|wcag_lista_discapacidades=
[[Categoría:Discapacidad visual total]]
[[Categoría:Discapacidad sordoceguera]]
|
 
wcag_texto_criterioOAW=
La información tabular se debe estructurar mediante elementos de tablas de datos (<code><nowiki><table></nowiki></code>,<code><nowiki><tr></nowiki></code>, <code><nowiki><th></nowiki></code>,<code><nowiki><td></nowiki></code>).
 
|wcag_descripcion_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.
 
|wcag_objetivo=
Garantizar que los lectores de pantalla puedan interpretar correctamente las relaciones entre encabezados y celdas de datos al usar marcado de tablas (<code><nowiki><table></nowiki></code>,<code><nowiki><tr></nowiki></code>, <code><nowiki><th></nowiki></code>,<code><nowiki><td></nowiki></code>).
 
 
|wcag_importancia=
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.
 
|wcag_referencias=
<ul>
<li><span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/html/H51 H51:Using table markup to present tabular information]</span></li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/failures/F34 F34:Failure due to formatting tables with white space characters]</span></li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/failures/F48 F48:Failure due to using &lt;pre&gt; element for tabular data]</span></li>
</ul>
 
|wcag_recursos=
<ul>
<li>Usar etiquetas (<code><nowiki><table></nowiki></code>,<code><nowiki><th></nowiki></code>, <code><nowiki><tr></nowiki></code>,<code><nowiki><td></nowiki></code>) para datos tabulares presentados en tabla</li>
<li>Evitar combinar celdas para mejorar comprensión y accesibilidad</li>
</ul>
 
 
|wcag_tipo_evaluacion=Semiautomática
 
|wcag_pasos_evaluacion=
Usa la herramienta de ''' [https://wave.webaim.org/ Wave].'''
 
<ol class="paso-list">
<li><span class="paso-badge">Paso 1.</span>  
Seleccionar '''Details – Structural elements'''.</li>
<li><span class="paso-badge">Paso 2.</span>  
Comprobar que la información tabular se identifica en la herramienta mediante elementos '''data table'''.</li>
</ol>
 
|wcag_resultado_evaluacion=
La información tabular está estructurada correctamente con codigo HTML <code><nowiki><table></nowiki></code>,<code><nowiki><tr></nowiki></code>, <code><nowiki><th></nowiki></code>,<code><nowiki><td></nowiki></code>
 
|wcag_ejemplo_evaluacion=
<div class="accessibility-card">
Se presenta un codigo con etiquetas HTML correctas para incluir una tabla.
<pre class="wcag-codigo-html">
<table>
<tr>
  <th>Producto</th>
  <th>Precio</th>
</tr>
<tr>
  <td>Café</td>
  <td>2€</td>
</tr>
</table>
</pre>
</div>
 
|wcag_otras_herramientas_evaluacion=
<ul>
<li>
<strong> Bookmarklet </strong>
[https://a11y-tools.com/bookmarklets/#getTableData Get table data] pemite obtener los datos de una tabla.
</li>
<li><strong>Web developer Toolbar</strong>
Tiene la opción de ''' outline - outline table''' que permite mostrar donde estan situadas las tablas y luego mirar que codigo HTML presentan</li>
 
<li><strong>Inspección del navegador</strong>  
Observar si elementos que visualmente son tablas están marcados como tañ en el código fuente</li>
 
</ul>
 
 
}}

Revisión actual - 07:11 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

Recursos de apoyo

  • Usar etiquetas (<table>,<th>, <tr>,<td>) para datos tabulares presentados en tabla
  • Evitar combinar celdas para mejorar comprensión y accesibilidad

Evaluación del criterio

Tipo de evaluación

Evaluación Semiautomática

Procedimiento de evaluación

Usa la herramienta de Wave.
  1. Paso 1. Seleccionar Details – Structural elements.
  2. Paso 2. Comprobar que la información tabular se identifica en la herramienta mediante elementos data table.

Resultado esperado

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

Ejemplo

Se presenta un codigo con etiquetas HTML correctas para incluir una tabla. 

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

Otras herramientas de evaluación

  • Bookmarklet Get table data pemite obtener los datos de una tabla.
  • Web developer Toolbar Tiene la opción de outline - outline table que permite mostrar donde estan situadas las tablas y luego mirar que codigo HTML presentan
  • Inspección del navegador Observar si elementos que visualmente son tablas están marcados como tañ en el código fuente










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...




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