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

De WCAG Wiki
← Edición anteriorEdición siguiente →
VisualWikitexto
Sin resumen de edición
Sin resumen de edición
Línea 28: Línea 28:
[[Categoría:Discapacidad visual total]]
[[Categoría:Discapacidad visual total]]
[[Categoría:Discapacidad sordoceguera]]
[[Categoría:Discapacidad sordoceguera]]
|wcag_texto_criterioOAW=
|
La información tabular se debe estructurar mediante elementos de tablas de datos (<table>, <tr>, <th>, <td>).
 
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=
|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.
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=
|wcag_objetivo=
Garantizar que los lectores de pantalla puedan interpretar correctamente las relaciones entre encabezados y celdas de datos al usar marcado de tablas (&lt;table&gt;, &lt;tr&gt;, &lt;th&gt;, &lt;td&gt;).
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=
|wcag_importancia=
Línea 42: Línea 47:
|wcag_referencias=
|wcag_referencias=
<ul>
<ul>
<li>H51: Using table markup to present tabular information</li>
<li><span lang="en">[[https://www.w3.org/WAI/WCAG21/Techniques/html/H51|H51: Using table markup to present tabular information]]</span></li>
<li>F34: Failure due to formatting tables with white space characters</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>F48: Failure due to using &lt;pre&gt; element for tabular data</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>
</ul>


|wcag_recursos=
|wcag_recursos=
<ul>
<ul>
<li>En PDF, usar etiquetas Table, TR, TH y TD para datos tabulares</li>
<li>Usar etiquetas (<code><nowiki><table></nowiki></code>,<code><nowiki><tr></nowiki></code>, <code><nowiki><th></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>
<li>Evitar combinar celdas para mejorar comprensión y accesibilidad</li>
<li>Usar WAVE para comprobar estructura tabular</li>
</ul>
</ul>


<html>
<iframe width="100%" height="400"
        src="https://www.youtube.com/embed/Hz_CUQpz-6I"
        title="Crear tablas accesibles en HTML: uso correcto de TH, TD y estructura semántica"
        frameborder="0"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
        allowfullscreen>
</iframe>
</html>


|wcag_tipo_evaluacion=Semiautomática
|wcag_tipo_evaluacion=Semiautomática


|wcag_pasos_evaluacion=
|wcag_pasos_evaluacion=
Usa la herramienta de ''' [https://wave.webaim.org/ Wave].'''
<ol class="paso-list">
<ol class="paso-list">
<li>Usar WAVE y revisar “Details – Structural elements”.</li>
<li><span class="paso-badge">Paso 1.</span>  
<li>Comprobar que la tabla se marca como “data table”.</li>
Seleccionar '''Details – Structural elements'''.</li>
<li>Verificar que las celdas de encabezado utilizan &lt;th&gt;.</li>
<li><span class="paso-badge">Paso 2.</span>  
<li>Comprobar que las celdas de datos usan &lt;td&gt; y mantienen relaciones correctas.</li>
Comprobar que la información tabular se identifica en la herramienta mediante elementos '''data table'''.</li>
</ol>
</ol>


|wcag_resultado_evaluacion=
|wcag_resultado_evaluacion=
La información tabular está estructurada correctamente con &lt;table&gt;, &lt;tr&gt;, &lt;th&gt; y &lt;td&gt;.
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=
|wcag_ejemplo_evaluacion=
Ejemplo correcto:
<div class="accessibility-card">
Se presenta un codigo con etiquetas HTML correctas para incluir una tabla.
<pre class="wcag-codigo-html">
<pre class="wcag-codigo-html">
<table>
<table>
Línea 91: Línea 89:
</table>
</table>
</pre>
</pre>
 
</div>
Ejemplo incorrecto:
<pre class="wcag-codigo-html">
<p>Producto | Precio</p>
<p>Café | 2€</p>
</pre>


|wcag_otras_herramientas_evaluacion=
|wcag_otras_herramientas_evaluacion=
<ul>
<ul>
<li>WAVE</li>
<li>
<li>Inspección del navegador</li>
<strong> Bookmarklet </strong>
[https://a11y-tools.com/bookmarklets/#getTableData Get table data]
</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>
</ul>


}}
}}

Revisión del 06:04 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>,<tr>, <th>,<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
  • 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=3389»