Diferencia entre revisiones de «Principio 1/1.1 Texto Alternativo/1.1.1-A»

De WCAG Wiki
← Edición anteriorEdición siguiente →
VisualWikitexto
Sin resumen de edición
Sin resumen de edición
Línea 97: Línea 97:


<strong>Bookmarklet diagnóstico ALT:</strong><br>
<strong>Bookmarklet diagnóstico ALT:</strong><br>
<html>
<div class="highlight-box">
Arrastra este botón a tu barra de marcadores y podrás ejecutarlo y ver los textos alternativos de otras páginas.
Arrastra este botón a tu barra de marcadores y podrás ejecutarlo y ver los textos alternativos de otras páginas.


<html>
 
<a class="bookmarklet-button"
<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.padding='5px';label.style.fontSize='12px';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);});})();">
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.padding='5px';label.style.fontSize='12px';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);});})();">
Ver ALT de imágenes
Ver ALT de imágenes
</a>
</a>
</div>
</html>
</html>


Revisión del 11:22 4 nov 2025

1.1.1-A. Alternativa textual breve obligatoria

Discapacidades afectadas

Este criterio puede afectar a distintas personas con discapacidad. A continuación se indican las más relevantes.

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. Esto permite que los usuarios que no pueden ver los elementos visuales accedan igualmente a su significado.

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

<iframe width="100%" height="400" 

       src="https://www.youtube.com/embed/Ed8CNJrkm74?start=6114"
       title="Video de ejemplo sobre alternativa textual"
       frameborder="0"
       allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
       allowfullscreen>
</iframe>

Evaluación del criterio

Tipo de evaluación

Evaluación Manual

Procedimiento de evaluación

  1. Paso 1. Abrir la página web.
  2. Paso 2. Activar extensión Web Developer > Images > Outline images without alt attributes.
  3. Paso 3. Activar Images > Display alt attributes y verificar contenido del alt.
  4. Paso 4. 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

Ejemplo accesible y no accesible comparado mediante código HTML. 
<img src="imagen.jpg" alt="Paisaje de montaña al amanecer">

<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-00213 noviembre 2025 13:51:16
2025 26 UdL 1.1.1-A6 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...




Obtenido de «https://wikiwcag.udl.cat/index.php?title=Principio_1/1.1_Texto_Alternativo/1.1.1-A&oldid=3082»