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

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-J. Uso de summary en tablas de datos
|wcag_titulo_criterio=1.3.1-J. Uso de summary en tablas de datos
|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-moderada">Barrera moderada</span>
</li>
</li>


<li class="discapacidad-item">
<li class="discapacidad-item">
   [[Archivo:Bajavision.png|20px|class=icon-discapacidad|alt=Baja visión]]
   [[Archivo:Sordoceguera.png|20px|class=icon-discapacidad|alt=Discapacidad sordoceguera]]
   <span class="discapacidad-texto">[[:Categoría:Discapacidad baja visión|Baja visión]]</span> –
   <span class="discapacidad-texto">[[:Categoría:Discapacidad sordoceguera|Sordoceguera]]</span> –
   <span class="gravedad gravedad-moderada">Barrera moderada</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>
</li>


|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 datos que disponen de un atributo summary, dicho atributo debe describir la organización de la tabla o explicar cómo se usa.
En las tablas de datos que disponen de un atributo ''summary'', dicho atributo debe describir la organización de la tabla o explicar cómo se usa.


|wcag_descripcion_resumida=
|wcag_descripcion_resumida=
Si una tabla incluye el atributo `summary` (obsoleto en HTML5), este debe proporcionar una descripción clara de cómo están organizados los datos o cómo se debe navegar por la tabla.
Si una tabla incluye el atributo ''summary'' (obsoleto en HTML5), este debe proporcionar una descripción clara de cómo están organizados los datos o cómo se debe navegar por la tabla.


|wcag_objetivo=
|wcag_objetivo=
Línea 46: Línea 39:


|wcag_importancia=
|wcag_importancia=
Un `summary` adecuado orienta a los usuarios sobre la estructura de una tabla compleja, facilitando su comprensión y navegación cuando se accede con tecnologías de apoyo.
Un ''summary'' adecuado orienta a los usuarios sobre la estructura de una tabla compleja, facilitando su comprensión y navegación cuando se accede con tecnologías de apoyo.


|wcag_referencias=
|wcag_referencias=
<ul>
<ul>
<li>H73: Using the summary attribute of the table element to give an overview of data tables</li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/html/H73 H73:Using the summary attribute of the table element to give an overview of data tables]</span></li>
</ul>
</ul>


|wcag_recursos=
|wcag_recursos=
<strong> Consejo </strong>
<ul>
<ul>
<li>Simplificar la tabla si es posible</li>
<li>Incluir en el atributo ''summary'' una descripción adecuada al contenido de la tabla de datos</li>
<li>El atributo summary está obsoleto en HTML5</li>
<li>Usarlo únicamente si existe en código heredado</li>
</ul>
</ul>


<html>
<iframe width="100%" height="400"
        src="https://www.youtube.com/embed/8E4jh9qU_Js"
        title="Tablas accesibles y atributos de ayuda: resumen para navegación"
        frameborder="0"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
        allowfullscreen>
</iframe>
</html>


|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 complejas en la página.</li>
<li><span class="paso-badge">Paso 1.</span>
<li>Si existe el atributo `summary`, inspeccionar su contenido.</li>
Identificar tablas complejas en la página.</li>
<li>Comprobar que describe la estructura de la tabla o la forma de navegarla.</li>
<li><span class="paso-badge">Paso 2.</span>  
Usando la herramienta de inspección de código del navegador, comprobar que, si existe el atributo ''summary'' , éste proporciona una descripción de cómo se organizan los datos o de cómo se usa o navega por la tabla.</li>
</ol>
</ol>


|wcag_resultado_evaluacion=
|wcag_resultado_evaluacion=
Si el atributo `summary` está presente, proporciona una descripción adecuada de la estructura de la tabla o de su uso.
Si el atributo ''summary'' está presente, proporciona una descripción adecuada de la información que contiene la tabla o de su uso.


|wcag_ejemplo_evaluacion=
|wcag_ejemplo_evaluacion=
Ejemplo correcto:
<div class="accessibility-card">
Tabla con atributo ''summary''.
<pre class="wcag-codigo-html">
<pre class="wcag-codigo-html">
<table summary="Esta tabla muestra las ventas trimestrales organizadas por producto y región.">
<table summary="Esta tabla muestra las ventas trimestrales organizadas por producto y región.">
  ...
  (aqui el código html de la tabla)
</table>
</pre>
 
Ejemplo incorrecto:
<pre class="wcag-codigo-html">
<table summary="Tabla de datos">
...
</table>
</table>
</pre>
</pre>
</div>


|wcag_otras_herramientas_evaluacion=
|wcag_otras_herramientas_evaluacion=
<ul>
<ul>
<li>Inspección del navegador</li>
<li>'''Inspección del navegador''': comprobar el codigo fuente que hay en elementos tabla </li>
<li>'''Lector de pantalla''': (NVDA, JAWS, VoiceOver) Comprobar si al leer una tabla, se indica un resumen y este es adecuado a la información que contiene la tabla </li>
</ul>
</ul>
}}
}}

Revisión actual - 07:19 5 nov 2025

1.3.1-J. Uso de summary en tablas de datos

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 datos que disponen de un atributo summary, dicho atributo debe describir la organización de la tabla o explicar cómo se usa.

Comprensión del criterio

Descripción resumida

Si una tabla incluye el atributo summary (obsoleto en HTML5), este debe proporcionar una descripción clara de cómo están organizados los datos o cómo se debe navegar por la tabla.

Objetivo

Proporcionar una visión general para ayudar a las personas usuarias, especialmente quienes utilizan lectores de pantalla, a entender la estructura y organización de una tabla compleja antes de interactuar con ella.

Importancia de cumplir el criterio

Un summary adecuado orienta a los usuarios sobre la estructura de una tabla compleja, facilitando su comprensión y navegación cuando se accede con tecnologías de apoyo.

Referencias WCAG

Recursos de apoyo

Consejo
  • Incluir en el atributo summary una descripción adecuada al contenido de la tabla de datos

Evaluación del criterio

Tipo de evaluación

Evaluación Manual

Procedimiento de evaluación

  1. Paso 1. Identificar tablas complejas en la página.
  2. Paso 2. Usando la herramienta de inspección de código del navegador, comprobar que, si existe el atributo summary , éste proporciona una descripción de cómo se organizan los datos o de cómo se usa o navega por la tabla.

Resultado esperado

Si el atributo summary está presente, proporciona una descripción adecuada de la información que contiene la tabla o de su uso.

Ejemplo

Tabla con atributo summary. 

<table summary="Esta tabla muestra las ventas trimestrales organizadas por producto y región.">
 (aqui el código html de la tabla)
</table>

Otras herramientas de evaluación

  • Inspección del navegador: comprobar el codigo fuente que hay en elementos tabla
  • Lector de pantalla: (NVDA, JAWS, VoiceOver) Comprobar si al leer una tabla, se indica un resumen y este es adecuado a la información que contiene la tabla










Ejemplos accesibles y no accesibles creados por alumnos

Comentarios

A continuación se muestran comentarios sobre el criterio 1.3.1-J. Uso de summary en tablas de datos

Loading comments...




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