Diferencia entre revisiones de «Principio 1/1.1 Texto Alternativo/1.1.1-A»
De WCAG Wiki
Sin resumen de edición |
Sin resumen de edición |
||
| Línea 44: | Línea 44: | ||
Todas las imágenes, iconos o gráficos deben tener un texto que explique qué muestran o para qué sirven. | Todas las imágenes, iconos o gráficos deben tener un texto que explique qué muestran o para qué sirven. | ||
* '''Imágenes informativas''': texto alternativo descriptivo con `alt`. | * '''Imágenes informativas''': texto alternativo descriptivo con `alt`. | ||
* '''Imágenes decorativas''': | * '''Imágenes decorativas''': <code>alt="" </code> o presentadas con CSS. | ||
* '''Botones e iconos funcionales''': nombre accesible claro. | * '''Botones e iconos funcionales''': nombre accesible claro. | ||
* '''Diagramas/mapas''': descripción larga disponible junto al contenido. | * '''Diagramas/mapas''': descripción larga disponible junto al contenido. | ||
| Línea 65: | Línea 65: | ||
</ul> | </ul> | ||
Se incluye un video que explica como evaluar este criterio | |||
<html> | <html> | ||
<iframe width="100%" height="400" | <iframe width="100%" height="400" | ||
| Línea 94: | Línea 95: | ||
|wcag_ejemplo_evaluacion= | |wcag_ejemplo_evaluacion= | ||
Se muestra un código HTML con una imagen y un texto alternativo que la describe. | |||
<div class="accessibility-card"> | <div class="accessibility-card"> | ||
<pre class="wcag-codigo-html"> | <pre class="wcag-codigo-html"> | ||
| Línea 101: | Línea 102: | ||
</div> | </div> | ||
El código HTML muestra una imagen pero no presenta ninguna etiqueta texto alternativo <code>alt="" </code> y el usuario no puede saber su contenido | |||
<div class="accessibility-card-error"> | <div class="accessibility-card-error"> | ||
Revisión del 17:44 4 nov 2025
1.1.1-A. Alternativa textual breve obligatoria
- Nivel: A
- Versión: 2.0
- Principio: 1_Perceptible
- Pauta: 1.1_Textos_alternativos
- Grupo: Contenido
- Subgrupo: No-texto
Discapacidades afectadas
Este criterio puede afectar a distintas personas con discapacidad. A continuación se indican las más relevantes.
-
Visual total –
Barrera grave
-
Baja visión –
Barrera moderada
-
Cognitiva –
Barrera leve
Enunciado del criterio (Observatorio de Accesibilidad Web)
- Todo contenido no textual debe disponer de una alternativa breve que proporcione la misma información o cumpla el mismo propósito que el contenido no textual.
Comprensión del criterio
Descripción resumida
Todas las imágenes, iconos o gráficos deben tener un texto que explique qué muestran o para qué sirven.
- Imágenes informativas: texto alternativo descriptivo con `alt`.
- Imágenes decorativas:
alt=""o presentadas con CSS. - Botones e iconos funcionales: nombre accesible claro.
- Diagramas/mapas: descripción larga disponible junto al contenido.
Objetivo
Permitir que los lectores de pantalla y otras ayudas técnicas transmitan la misma información que se presenta visualmente, asegurando acceso equitativo.
Importancia de cumplir el criterio
Sin alternativas textuales, las personas ciegas o con baja visión no pueden entender la información visual. Este problema genera barreras graves y deja inaccesibles funciones críticas o contenido informativo.
Referencias WCAG
Recursos de apoyo
Se incluye un video que explica como evaluar este criterio
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.
Seleccionar Images – Outline images without alt attributes y comprobar la página. Si hay alguna imagen resaltada, es un error y debe proporcionársele un atributo
alt. - Paso 2. Seleccionar Images – Display alt attributes. Verificar que el texto alternativo se ajusta a la imagen. (Consulta la sección de Recursos de apoyo)
- Otra opción es usar lector de pantalla y confirmar que la descripción tiene sentido en contexto.
Resultado esperado
Cada imagen tiene el atributo alt correcto y refleja fielmente la información visual, o se marca como decorativa si aplica.
Ejemplo
Se muestra un código HTML con una imagen y un texto alternativo que la describe.
<img src="imagen.jpg" alt="Paisaje de montaña al amanecer">
El código HTML muestra una imagen pero no presenta ninguna etiqueta texto alternativo alt="" y el usuario no puede saber su contenido
<img src="imagen.jpg">
Otras herramientas de evaluación
-
Bookmarklet diagnóstico ALT:
Arrastra este botón a tu barra de marcadores y podrás ejecutarlo y ver los textos alternativos de otras páginas.
Ver ALT de imágenes - Lectores recomendados: JAWS, NVDA, VoiceOver.
Ejemplos accesibles y no accesibles creados por alumnos
| Última modificación | |
|---|---|
| 2526UFV1.1.1.-A-002 | 13 noviembre 2025 13:51:16 |
| 2025 26 UdL 1.1.1-A | 6 noviembre 2025 13:11:51 |
Comentarios
A continuación se muestran comentarios sobre el criterio 1.1.1-A. Alternativa textual breve obligatoria
Loading comments...
