- 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 baja visión - Barrera moderada
Diferencia entre revisiones de «Principio 1/1.1 Texto Alternativo/1.1.1-C»
De WCAG Wiki
Sin resumen de edición |
|||
| Línea 28: | Línea 28: | ||
- Gravedad: Moderado | - Gravedad: Moderado | ||
--> | --> | ||
</html> | |||
=== Evaluación del criterio === | |||
==== Tipo de comprobación ==== | |||
<span class="wcag-info-criterio">Comprobación <strong>Semiautomática</strong> </span> | |||
==== Procedimiento de evaluación ==== | |||
<div class="wcag-info-criterio"> | |||
<span class="paso-badge>Paso 1.</span> | |||
Usa la herramienta de ''' [https://chromewebstore.google.com/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm?hl=es Web Developer Toolbar].''' | |||
<span class="paso-badge>Paso 2.</span> | |||
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”. | |||
<span class="paso-badge>Paso 3.</span> | |||
Seleccionar '''Images – Display alt attributes'''. Verificar que el texto alternativo se ajusta a la imagen. (Consulta la sección de [[#Recursos_de_apoyo|Recursos de apoyo]]) | |||
</div> | |||
==== Ejemplo ==== | |||
<div class="wcag-info-criterio"> | |||
El texto alternativo de la imagen se muestra en el atributo <strong><code><nowiki>alt</nowiki></code> </strong> | |||
<pre class="wcag-codigo-html"> | |||
<img src="imagen.jpg" alt="texto de la imagen"> | |||
</pre> | |||
</div> | |||
==== Herramientas recomendadas ==== | |||
<div class="wcag-info-criterio"> | |||
'''Herramienta de inspección con un Bookmarklet''' | |||
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 imagenes | |||
</a> | |||
</div> | |||
</html> | </html> | ||
Revisión del 01:27 22 oct 2025
1.1.1- C. Imágenes CSS solo decorativas
Evaluación del criterio
Tipo de comprobación
Comprobación Semiautomática
Procedimiento de evaluación
Paso 1. Usa la herramienta de Web Developer Toolbar.
Paso 2. 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 3. Seleccionar Images – Display alt attributes. Verificar que el texto alternativo se ajusta a la imagen. (Consulta la sección de Recursos de apoyo)
Ejemplo
El texto alternativo de la imagen se muestra en el atributo alt
<img src="imagen.jpg" alt="texto de la imagen">
Herramientas recomendadas
Herramienta de inspección con un Bookmarklet
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 imagenes
