- Nivel:A
- Versión:2.2
- Principio:1. Perceptible
- Pauta:1.1 Textos alternativos
- Categoría:Contenido
- Subcategoría:No-texto
Usuarios más afectados
Personas con discapacidad visual total - Barrera grave
Diferencia entre revisiones de «Principio 1/1.1 Texto Alternativo/1.1.1-I»
De WCAG Wiki
| Línea 35: | Línea 35: | ||
==== Descripción resumida ==== | ==== Descripción resumida ==== | ||
<div class="wcag-info-criterio"> Si el contenido no puede describirse completamente (una obra musical o un vídeo artístico), debe incluir al menos una breve etiqueta textual que indique de qué trata. </div> | <div class="wcag-info-criterio"> | ||
Si el contenido no puede describirse completamente (una obra musical o un vídeo artístico), debe incluir al menos una breve etiqueta textual que indique de qué trata. | |||
</div> | |||
==== Objetivo ==== | ==== Objetivo ==== | ||
<div class="wcag-info-criterio"> Permitir que el usuario sepa qué tipo de contenido hay, incluso si no puede experimentarlo. </div> | <div class="wcag-info-criterio"> | ||
Permitir que el usuario sepa qué tipo de contenido hay, incluso si no puede experimentarlo. | |||
</div> | |||
==== Importancia de cumplir el criterio ==== | ==== Importancia de cumplir el criterio ==== | ||
<div class="wcag-info-criterio"> Garantiza que el usuario pueda decidir si quiere consumir el contenido o buscar una alternativa accesible. </div> | <div class="wcag-info-criterio"> | ||
Garantiza que el usuario pueda decidir si quiere consumir el contenido o buscar una alternativa accesible. | |||
</div> | |||
==== Referencias WCAG ==== | ==== Referencias WCAG ==== | ||
<div class="wcag-info-criterio"> * <span lang="en">[https://www.w3.org/WAI/WCAG22/Techniques/general/G100 Técnica G100 – Alternativa textual corta]</span> </div> | <div class="wcag-info-criterio"> | ||
* <span lang="en">[https://www.w3.org/WAI/WCAG22/Understanding/non-text-content.html| Comprender el criterio 1.1.1 (en inglés)]</span> | |||
* <span lang="en">[https://www.w3.org/WAI/WCAG22/Techniques/general/G100 Técnica G100 – Alternativa textual corta]</span> | |||
</div> | |||
==== Ejemplo ==== | ==== Ejemplo ==== | ||
<div class="wcag-info-criterio"> <pre class="wcag-codigo-html"> <img src="test_musical.jpg" alt="Ejercicio: Identificar notas musicales"> </pre> </div> | <div class="wcag-info-criterio"> | ||
<pre class="wcag-codigo-html"> | |||
<img src="test_musical.jpg" alt="Ejercicio: Identificar notas musicales"> | |||
</pre> </div> | |||
| Línea 57: | Línea 69: | ||
<div class="wcag-info-criterio"> | <div class="wcag-info-criterio"> | ||
Al mostrar la información con el bookmarklet, comprobar que el texto de cada imagen corresponde a la imagen. | |||
<html> | |||
<div class="highlight-box"> | |||
<strong>Arrastra este botón a tu barra de marcadores:</strong> | |||
<a class="bookmarklet-button" | |||
href="javascript:(function() { document.querySelectorAll('img').forEach(img => { let altText = img.getAttribute('alt'); if (altText) { img.style.border = '2px solid blue'; } else { img.style.border = '2px solid red'; altText = 'Sin texto alternativo'; } let label = document.createElement('div'); label.textContent = `[ALT: ${altText}]`; label.style.position = 'absolute'; label.style.background = 'yellow'; label.style.color = 'black'; label.style.padding = '5px'; label.style.border = '1px solid black'; label.style.fontSize = '12px'; label.style.zIndex = '1000'; label.style.whiteSpace = 'nowrap'; let rect = img.getBoundingClientRect(); label.style.top = `${window.scrollY + rect.top - 20}px`; label.style.left = `${window.scrollX + rect.left}px`; document.body.appendChild(label); }); })();"> | |||
Haz clic para ver los textos alternativos de las imágenes | |||
</a> | |||
</div> | |||
</html> | |||
'''Lector de pantalla''' | '''Lector de pantalla''' | ||
Revisión del 08:42 22 oct 2025
1.1.1-I. Alternativa breve para contenido sensorial
Descripción y comprensión del criterio
Descripción resumida
Si el contenido no puede describirse completamente (una obra musical o un vídeo artístico), debe incluir al menos una breve etiqueta textual que indique de qué trata.
Objetivo
Permitir que el usuario sepa qué tipo de contenido hay, incluso si no puede experimentarlo.
Importancia de cumplir el criterio
Garantiza que el usuario pueda decidir si quiere consumir el contenido o buscar una alternativa accesible.
Referencias WCAG
Ejemplo
<img src="test_musical.jpg" alt="Ejercicio: Identificar notas musicales">
Otras herramientas de evaluación
Al mostrar la información con el bookmarklet, comprobar que el texto de cada imagen corresponde a la imagen.
Arrastra este botón a tu barra de marcadores:
Haz clic para ver los textos alternativos de las imágenes
Lector de pantalla
Uso de lectores de pantalla como JAWS, NVDA o VoiceOver, para comprobar que la información que se escucha al acceder a un codigo ASCII, u de otro tipo.
Inspector del navegador
Puedes usar la herramienta de inspección del navegador para comprobar si un codigo ASCII u de otro tipo contiene una descripción comprensible .
