Sin resumen de edición |
|||
| (No se muestran 79 ediciones intermedias del mismo usuario) | |||
| Línea 17: | Línea 17: | ||
<li> | <li> | ||
<span class="label">Versión:</span> | <span class="label">Versión:</span> | ||
<span class="value">2. | <span class="value">2.0</span> | ||
</li> | </li> | ||
| Línea 61: | Línea 61: | ||
</article> | </article> | ||
</html> | </html> | ||
[[Categoría: Visual total]] | |||
[[Categoría: Baja visión]] | |||
[[Categoría: Cognitiva]] | |||
[[Categoría: Contenido]] | |||
[[Categoría: Nivel-A]] | |||
[[Categoría: Versión-2.0]] | |||
=== Descripción y comprensión del criterio === | === Descripción y comprensión del criterio === | ||
<div class="wcag-info-criterio"> | |||
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. | |||
</div> | |||
==== Descripción resumida ==== | ==== Descripción resumida ==== | ||
<div class="wcag-info-criterio"> Todas las imágenes, iconos o gráficos deben tener un texto que explique qué muestran o para qué sirven. | <div class="wcag-info-criterio"> Todas las imágenes, iconos o gráficos deben tener un texto que explique qué muestran o para qué sirven. | ||
* '''Imágenes importantes:''' poner un texto corto con <code>alt</code> que explique la imagen o su función. | |||
* '''Imágenes decorativas:''' usar <code>alt=""</code> o CSS, para que no molesten al lector de pantalla. | |||
* '''Botones y formularios:''' darles un nombre que explique qué hacen. | |||
* '''Diagramas o mapas:''' hacer un texto largo que explique toda la información y ponerlo cerca del contenido. | |||
Así cualquier persona puede entenderlos, aunque no pueda verlos. | Así cualquier persona puede entenderlos, aunque no pueda verlos. | ||
| Línea 74: | Línea 94: | ||
<div class="wcag-info-criterio"> Que los lectores de pantalla y otras ayudas puedan decir o mostrar la información que aparece en imágenes y gráficos. | <div class="wcag-info-criterio"> Que los lectores de pantalla y otras ayudas puedan decir o mostrar la información que aparece en imágenes y gráficos. | ||
</div> | |||
==== Importancia de cumplir el criterio ==== | |||
<div class="wcag-info-criterio"> Sin alternativas textuales, las personas ciegas o con baja visión no pueden entender la información visual. </div> | |||
==== Referencias WCAG ==== | |||
<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> | |||
</div> | |||
==== Recursos de apoyo ==== | |||
<div class="wcag-info-criterio"> | |||
Puedes usar guías y herramientas para escribir textos alternativos: | |||
* Guías que enseñan a hacer descripciones claras. | |||
** [https://www.usableyaccesible.com/textosalternativosaccesibles/mapa_decision_texto_alternativo.php Mapa de decisión para proporcionar textos alternativos adecuados a las imágenes de tu web]. | |||
** [https://www.w3.org/WAI/tutorials/images/decision-tree/ Árbol de decisión de W3C (en inglés)]. | |||
Se indica un video con un ejemplo del criterio. | |||
<html> | |||
<iframe width="100%" height="400" | |||
src="https://www.youtube.com/embed/Ed8CNJrkm74?start=6114" | |||
title="Video de YouTube" | |||
frameborder="0" | |||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" | |||
allowfullscreen> | |||
</iframe> | |||
</html> | |||
</div> | </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 – Outline images without alt attributes''' y comprobar la página. Si hay alguna imagen resaltada, es un error y debe proporcionársele un atributo <code>alt</code>. | |||
<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> | </div> | ||
==== | ==== Ejemplo Accesible ==== | ||
<div class="wcag-info-criterio"> | |||
<p>El texto alternativo de la imagen se muestra en el atributo </p> | |||
<div class="accessibility-card"> | |||
<pre class="wcag-codigo-html"> | |||
<img src="imagen.jpg" alt="texto de la imagen"> | |||
</pre> | |||
</div> | |||
<div | </div> | ||
==== Ejemplo NO Accesible ==== | |||
</div> | <div class="wcag-info-criterio"> | ||
<p>No hay texto alternativo de la imagen </p> | |||
<div class="accessibility-card-error"> | |||
<pre class="wcag-codigo-html"> | |||
<img src="imagen.jpg"> | |||
</pre> | |||
</div> | |||
</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 una imagen, es comprensible. | |||
</div> | </div> | ||
=== Lista de ejemplos accesibles y no accesibles de este subcriterio === | |||
A continuación se listan ejemplos que alumnos de distintas universidades han creado dentro de un proyecto de innovación docente. | |||
{{#ask: | |||
[[Tiene subcriterio::1.1.1-A]] | |||
|?Modification date#F[d/m/Y]=Última modificación | |||
|format=table | |||
}} | |||
Usuarios más afectados
Personas con discapacidad visual total - Barrera grave
Personas con baja visión – Barrera moderada
Personas con discapacidad cognitiva – Barrera leve
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.
alt que explique la imagen o su función.alt="" o CSS, para que no molesten al lector de pantalla.Así cualquier persona puede entenderlos, aunque no pueda verlos.
Puedes usar guías y herramientas para escribir textos alternativos:
Se indica un video con un ejemplo del criterio.
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 – 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)
El texto alternativo de la imagen se muestra en el atributo
<img src="imagen.jpg" alt="texto de la imagen">
No hay texto alternativo de la imagen
<img src="imagen.jpg">
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 una imagen, es comprensible.
A continuación se listan ejemplos que alumnos de distintas universidades han creado dentro de un proyecto de innovación docente.
| Última modificación"Fecha de modificación <span style="font-size:small;">(Modification date)</span>" es una propiedad predefinida proporcionada por Semantic MediaWiki que corresponde con la fecha de la última modificación de un sujeto. | |
|---|---|
| 2025 26 UdL 1.1.1-A | 6 noviembre 2025 13:11:51 |
| 2526UFV1.1.1.-A-002 | 13 noviembre 2025 13:51:16 |
