Diferencia entre revisiones de «Principio 1/1.3 Adaptable/1.3.1-I»
De WCAG Wiki
< Principio 1 | 1.3 Adaptable
Página creada con «aqui van ejemplos:» |
Sin resumen de edición |
||
| (No se muestran 8 ediciones intermedias del mismo usuario) | |||
| Línea 1: | Línea 1: | ||
{{CriterioWCAG | |||
|id_wcag_criterio=1.3.1 | |||
|id_wcag_subcriterio=1.3.1-I | |||
|wcag_titulo_criterio=1.3.1-I. Uso de caption en tablas de datos | |||
|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=Caption de tabla | |||
|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-moderada">Barrera moderada</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-moderada">Barrera moderada</span> | |||
</li> | |||
|wcag_lista_discapacidades= | |||
[[Categoría:Discapacidad visual total]] | |||
[[Categoría:Discapacidad sordoceguera]] | |||
|wcag_texto_criterioOAW= | |||
En las tablas de datos que disponen de un título, este se debe identificar mediante el elemento <code><nowiki> <caption> </nowiki></code> y dicho título debe identificar adecuadamente la tabla. | |||
|wcag_descripcion_resumida= | |||
Las tablas que incluyen un título deben marcarlo con <code><nowiki><caption></nowiki></code>. Este título debe ser conciso y describir el propósito o el contenido principal de la tabla. | |||
|wcag_objetivo= | |||
Permitir que los lectores de pantalla anuncien el título cuando la tabla recibe el foco, ayudando a las personas usuarias a comprender de inmediato su contenido y finalidad. | |||
|wcag_importancia= | |||
El <code><nowiki><caption></nowiki></code> ofrece una referencia clara del tema de la tabla. Para usuarios con lectores de pantalla es la primera información que escuchan, ayudando a contextualizar los datos rápidamente. | |||
|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> | |||
</ul> | |||
|wcag_recursos= | |||
<strong> Consejos </strong> | |||
<ul> | |||
<li>Incluir título visual antes de la tabla</li> | |||
<li>Título conciso que describa el propósito de la información de la tabla</li> | |||
</ul> | |||
|wcag_tipo_evaluacion=Semiautomática | |||
|wcag_pasos_evaluacion= | |||
Usa la herramienta de ''' [https://chromewebstore.google.com/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm?hl=es Web Developer Toolbar].''' | |||
<ol class="paso-list"> | |||
<li><span class="paso-badge">Paso 1.</span> | |||
Abrir Web Developer Toolbar → '''Outline table captions'''.</li> | |||
<li><span class="paso-badge">Paso 1.</span> | |||
Verificar que el título identifica correctamente a la tabla. | |||
</li> | |||
</ol> | |||
|wcag_resultado_evaluacion= | |||
La tabla presenta un título marcado mediante <code><nowiki><caption></nowiki></code> y este describe de forma adecuada su contenido. | |||
|wcag_ejemplo_evaluacion= | |||
<div class="accessibility-card"> | |||
Tabla de datos con un titulo que identifica su proposito. | |||
<pre class="wcag-codigo-html"> | |||
<table> | |||
<caption>Ventas trimestrales por producto</caption> | |||
<tr> | |||
<th>Producto</th><th>Q1</th><th>Q2</th> | |||
</tr> | |||
<tr> | |||
<td>Café</td><td>300</td><td>280</td> | |||
</tr> | |||
</table> | |||
</pre> | |||
</div> | |||
|wcag_otras_herramientas_evaluacion= | |||
<ul> | |||
<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, el titulo se lee y es adecuado a la información que contiene la tabla </li> | |||
</ul> | |||
}} | |||
Revisión actual - 09:38 5 nov 2025
1.3.1-I. Uso de caption en tablas de datos
- Nivel: A
- Versión: 2.0
- Principio: 1_Perceptible
- Pauta: 1.3_Adaptable
- Grupo: Estructura y relaciones
- Subgrupo: Caption de tabla
Discapacidades afectadas
Este criterio puede afectar a distintas personas con discapacidad. A continuación se indican las más relevantes.
-
Visual total –
Barrera moderada
-
Sordoceguera –
Barrera moderada
Enunciado del criterio (Observatorio de Accesibilidad Web)
- En las tablas de datos que disponen de un título, este se debe identificar mediante el elemento
<caption>y dicho título debe identificar adecuadamente la tabla.
Comprensión del criterio
Descripción resumida
Las tablas que incluyen un título deben marcarlo con
<caption>. Este título debe ser conciso y describir el propósito o el contenido principal de la tabla.Objetivo
Permitir que los lectores de pantalla anuncien el título cuando la tabla recibe el foco, ayudando a las personas usuarias a comprender de inmediato su contenido y finalidad.
Importancia de cumplir el criterio
El
<caption> ofrece una referencia clara del tema de la tabla. Para usuarios con lectores de pantalla es la primera información que escuchan, ayudando a contextualizar los datos rápidamente.Referencias WCAG
Recursos de apoyo
Consejos
- Incluir título visual antes de la tabla
- Título conciso que describa el propósito de la información de la tabla
Evaluación del criterio
Tipo de evaluación
Evaluación Semiautomática
Procedimiento de evaluación
Usa la herramienta de Web Developer Toolbar.
- Paso 1. Abrir Web Developer Toolbar → Outline table captions.
- Paso 1. Verificar que el título identifica correctamente a la tabla.
Resultado esperado
La tabla presenta un título marcado mediante
<caption> y este describe de forma adecuada su contenido.Ejemplo
Tabla de datos con un titulo que identifica su proposito.
<table> <caption>Ventas trimestrales por producto</caption> <tr> <th>Producto</th><th>Q1</th><th>Q2</th> </tr> <tr> <td>Café</td><td>300</td><td>280</td> </tr> </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, el titulo se lee y 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-I. Uso de caption en tablas de datos
Loading comments...
