Sin resumen de edición |
|||
| Línea 56: | Línea 56: | ||
<div class="wcag-info-criterio"> <pre class="wcag-codigo-html"> <img src="separador.gif" alt=""> </pre> </div> | <div class="wcag-info-criterio"> <pre class="wcag-codigo-html"> <img src="separador.gif" alt=""> </pre> </div> | ||
=== Evaluación del criterio === | |||
==== Tipo de comprobación ==== | |||
<div class="wcag-info-criterio"> | |||
Comprobación <strong>Manual</strong> | |||
Es necesario revisar visualmente las imágenes y leer las descripciones para comprobar que la información esté completa. | |||
</div> | |||
==== 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 – Display alt attributes'''. | |||
<span class="paso-badge>Paso 3.</span> | |||
Verificar que los contenidos de esta categoría (audio, vídeo, multimedia, tests o ejercicios que podrían ser inválidos si se muestran como texto, o contenido cuya función principal es producir una experiencia sensorial específica) disponen de una alternativa textual adecuada (una etiqueta descriptiva breve) | |||
</div> | |||
==== Ejemplo ==== | |||
<div class="wcag-info-criterio"> | |||
<pre class="wcag-codigo-html"> | |||
<img src="test_musical.jpg" alt="Ejercicio: Identificar notas musicales"> | |||
</pre> </div> | |||
==== Otras herramientas de evaluación ==== | |||
<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 imágenes | |||
</a> | |||
</div> | |||
</html> | |||
'''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 el texto alternativo de imagenes sensoriales </code>. | |||
</div> | |||
Usuarios más afectados
Personas con baja visión - Barera moderada
Personas con discapacidad cognitiva – Barrera leve
alt="" o insértalas con CSS. <img src="separador.gif" alt="">
Comprobación Manual
Es necesario revisar visualmente las imágenes y leer las descripciones para comprobar que la información esté completa.
Paso 1. Usa la herramienta de Web Developer Toolbar.
Paso 2. Seleccionar Images – Display alt attributes.
Paso 3. Verificar que los contenidos de esta categoría (audio, vídeo, multimedia, tests o ejercicios que podrían ser inválidos si se muestran como texto, o contenido cuya función principal es producir una experiencia sensorial específica) disponen de una alternativa textual adecuada (una etiqueta descriptiva breve)
<img src="test_musical.jpg" alt="Ejercicio: Identificar notas musicales">
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.
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 el texto alternativo de imagenes sensoriales .
