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

De WCAG Wiki
← Edición anterior
VisualWikitexto
Sin resumen de edición
Sin resumen de edición
 
(No se muestran 2 ediciones intermedias del mismo usuario)
Línea 4: Línea 4:
|wcag_titulo_criterio=1.3.1-K. Evitar duplicar caption y summary
|wcag_titulo_criterio=1.3.1-K. Evitar duplicar caption y summary
|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 datos que contienen tanto el elemento &lt;caption&gt; como el atributo summary, el contenido de ambos no debe estar duplicado.
En las tablas de datos que contienen tanto el elemento <code><nowiki> <caption> </nowiki></code> como el atributo ''summary'', el contenido de ambos no debe estar duplicado.


|wcag_descripcion_resumida=
|wcag_descripcion_resumida=
Si una tabla incluye &lt;caption&gt; y el atributo `summary`, el texto de ambos no puede ser idéntico. El &lt;caption&gt; identifica la tabla y el `summary` describe su organización o cómo navegarla en caso de ser necesaria esa información.
Si una tabla incluye <code><nowiki> <caption> </nowiki></code> y el atributo ''summary'', el texto de ambos no puede ser idéntico.
<ul>
<li> <code><nowiki> <caption> </nowiki></code> identifica la tabla</li>
<li> ''summary'' describe su organización o cómo navegarla en caso de ser necesaria esa información</li>
</ul>


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


|wcag_importancia=
|wcag_importancia=
La duplicación del título y del resumen causa experiencias repetitivas para usuarios de lectores de pantalla, afectando la comprensión y la eficiencia en la navegación. El &lt;caption&gt; es breve; el `summary` debe aportar un contexto diferente y funcional.
La duplicación del título y del resumen causa experiencias repetitivas para usuarios de lectores de pantalla, afectando la comprensión y la eficiencia en la navegación.
<ul>
<li> <code><nowiki> <caption> </nowiki></code> ha de ser breve</li>
<li> ''summary'' debe aportar un contexto diferente y funcional</li>
</ul>


|wcag_referencias=
|wcag_referencias=
<ul>
<ul>
<li>H73: Using the summary attribute to describe the organization of data tables</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>
 
</ul>
</ul>


|wcag_recursos=
|wcag_recursos=
<strong> Consejos </strong>
<ul>
<ul>
<li>El atributo `summary` está obsoleto en HTML5, pero puede aparecer en contenido heredado</li>
<li>El atributo ''summary'' está obsoleto en HTML5, pero puede aparecer en contenido heredado</li>
<li>Usar &lt;caption&gt; para el título y descripción separada si es necesaria</li>
<li>Usar <code><nowiki> <caption> </nowiki></code> para el título y descripción separada si es necesaria</li>
</ul>
</ul>


<html>
<iframe width="100%" height="400"
        src="https://www.youtube.com/embed/8E4jh9qU_Js"
        title="Tabla accesible: diferencias entre caption y summary"
        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>Localizar tablas con &lt;caption&gt; y `summary`.</li>
<li><span class="paso-badge">Paso 1.</span>
<li>Revisar el contenido de ambos elementos.</li>
Localizar las tablas de datos que existan en la página.</li>
<li>Verificar que el `summary` aporta información adicional y no repite el &lt;caption&gt;.</li>
<li><span class="paso-badge">Paso 2.</span>  
Usando la herramienta de inspección de código del navegador, verificar que los atributos ''summary'' y la etiqueta <code><nowiki> <caption> </nowiki></code> no presentan contenidos duplicados.</li>
</ol>
</ol>


|wcag_resultado_evaluacion=
|wcag_resultado_evaluacion=
El contenido del &lt;caption&gt; y el `summary` no es idéntico. Cada uno cumple su función y aporta información distinta.
El contenido del <code><nowiki> <caption> </nowiki></code> y el ''summary'' no es idéntico. Cada uno cumple su función y aporta información distinta.


|wcag_ejemplo_evaluacion=
|wcag_ejemplo_evaluacion=
Ejemplo correcto:
<div class="accessibility-card">
 
Codigo HTML con etiquetas <code><nowiki> <caption> </nowiki></code> y atributo ''summary". El contenido de cada una corresponde a concretar los datos presentes en la tabla.
<pre class="wcag-codigo-html">
<pre class="wcag-codigo-html">
<table summary="Esta tabla resume las compras mensuales por departamento.">
<table summary="Esta tabla resume las compras mensuales por departamento.">
Línea 89: Línea 86:
</table>
</table>
</pre>
</pre>
 
</div>
Ejemplo incorrecto:
<pre class="wcag-codigo-html">
<table summary="Compras por mes y departamento">
<caption>Compras por mes y departamento</caption>
...
</table>
</pre>


|wcag_otras_herramientas_evaluacion=
|wcag_otras_herramientas_evaluacion=
<ul>
<ul>
<li>Inspección del navegador</li>
<li>'''Inspección del navegador''': comprobar el código fuente que hay en elementos tabla, comprobar el contenido de <code><nowiki> <caption> </nowiki></code> y ''summary'' y observar si son distintos y se ajustan a los datos que contiene la tabla  </li>
<li>Lector de pantalla</li>
<li>'''Lector de pantalla''': (NVDA, JAWS, VoiceOver) Comprobar si el contenido del titulo y el resumen son distintos y se corresponden al contenido de la tabla.</li>
</ul>
</ul>


}}
}}

Revisión actual - 08:02 5 nov 2025

1.3.1-K. Evitar duplicar caption y summary

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 contienen tanto el elemento <caption> como el atributo summary, el contenido de ambos no debe estar duplicado.

Comprensión del criterio

Descripción resumida

Si una tabla incluye <caption> y el atributo summary, el texto de ambos no puede ser idéntico.
  • <caption> identifica la tabla
  • summary describe su organización o cómo navegarla en caso de ser necesaria esa información

Objetivo

Evitar que las tecnologías de apoyo anuncien información redundante, lo que puede provocar confusión y sobrecarga cognitiva. Cada elemento debe aportar información distinta y útil.

Importancia de cumplir el criterio

La duplicación del título y del resumen causa experiencias repetitivas para usuarios de lectores de pantalla, afectando la comprensión y la eficiencia en la navegación.
  • <caption> ha de ser breve
  • summary debe aportar un contexto diferente y funcional

Referencias WCAG

Recursos de apoyo

Consejos
  • El atributo summary está obsoleto en HTML5, pero puede aparecer en contenido heredado
  • Usar <caption> para el título y descripción separada si es necesaria

Evaluación del criterio

Tipo de evaluación

Evaluación Manual

Procedimiento de evaluación

  1. Paso 1. Localizar las tablas de datos que existan en la página.
  2. Paso 2. Usando la herramienta de inspección de código del navegador, verificar que los atributos summary y la etiqueta <caption> no presentan contenidos duplicados.

Resultado esperado

El contenido del <caption> y el summary no es idéntico. Cada uno cumple su función y aporta información distinta.

Ejemplo

Codigo HTML con etiquetas <caption> y atributo summary". El contenido de cada una corresponde a concretar los datos presentes en la tabla. 

<table summary="Esta tabla resume las compras mensuales por departamento.">
 <caption>Compras por mes y departamento</caption>
 ...
</table>

Otras herramientas de evaluación

  • Inspección del navegador: comprobar el código fuente que hay en elementos tabla, comprobar el contenido de <caption> y summary y observar si son distintos y se ajustan a los datos que contiene la tabla
  • Lector de pantalla: (NVDA, JAWS, VoiceOver) Comprobar si el contenido del titulo y el resumen son distintos y se corresponden al contenido de la tabla.










Ejemplos accesibles y no accesibles creados por alumnos

Comentarios

A continuación se muestran comentarios sobre el criterio 1.3.1-K. Evitar duplicar caption y summary

Loading comments...




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