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

De WCAG Wiki
← Edición anterior
VisualWikitexto
Sin resumen de edición
Sin resumen de edición
 
(No se muestran 9 ediciones intermedias del mismo usuario)
Línea 25: Línea 25:


|wcag_lista_discapacidades=
|wcag_lista_discapacidades=
[[Categoría:Visual total]]
[[Categoría:Discapacidad visual total]]
[[Categoría:Cognitiva]]
[[Categoría:Discapacidad cognitiva]]


|wcag_texto_criterioOAW=
|wcag_texto_criterioOAW=
Cuando una imagen contiene información compleja que no puede describirse adecuadamente con una alternativa breve, debe proporcionarse además una alternativa larga que explique todos los detalles relevantes y su significado.
Si una alternativa breve no transmite toda la información, se ofrece además una alternativa larga que cumpla el propósito completo del contenido.


|wcag_descripcion_resumida=
|wcag_descripcion_resumida=
Línea 36: Línea 36:


Esta descripción puede colocarse:
Esta descripción puede colocarse:
 
* Debajo de la imagen
- Debajo de la imagen
* En otra parte de la página, enlazada claramente
 
* Mediante <code>aria-describedby</code>
- En otra parte de la página, enlazada claramente
 
- Mediante <code>aria-describedby</code>


|wcag_objetivo=
|wcag_objetivo=
Línea 61: Línea 58:
</ul>
</ul>


|wcag_tipo_evaluacion=Manual
|wcag_tipo_evaluacion=Semiautomática


|wcag_pasos_evaluacion=
|wcag_pasos_evaluacion=
Usa la herramienta de ''' [https://chromewebstore.google.com/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm?hl=es Web Developer Toolbar].'''
<ol class="paso-list">
<ol class="paso-list">
<li><span class="paso-badge">Paso 1.</span> Identificar imágenes complejas (gráficos, diagramas, mapas, infografías…)</li>
<li><span class="paso-badge">Paso 1.</span> Seleccionar '''Images – Display alt attributes'''</li>
<li><span class="paso-badge">Paso 2.</span> Revisar que existe un alt breve describiendo la imagen de forma general</li>
<li><span class="paso-badge">Paso 2.</span>  
<li><span class="paso-badge">Paso 3.</span> Confirmar que hay una descripción larga asociada correctamente</li>
Localizar las imágenes con un contenido complejo (ej. Infografías, gráficas, esquemas…)
<li><span class="paso-badge">Paso 4.</span> Verificar relación clara (localización cercana, enlace o <code>aria-describedby</code>)</li>
</li>
<li><span class="paso-badge">Paso 3.</span>  
Verificar que tienen una alternativa textual con una breve descripción del contenido
</li>
<li><span class="paso-badge">Paso 4.</span>  
Verificar que disponen de una descripción larga cumpliendo uno de los siguientes supuestos:
<li>
<ul>
<li>
Verificar que dispone de un atributo “longdesc” con un enlace a la descripción textual de la imagen. Comprobar que el enlace es operativo.
</li>
<li>
Verificar que existe en cuerpo de la página una descripción textual de la imagen.
</li>
<li>
Verificar que inmediatamente antes o después de la imagen se proporciona un enlace a otra página que contiene la descripción textual de la imagen. Comprobar que el enlace es operativo.
</li>
</ul>
</li>
 
<li><span class="paso-badge">Paso 5.</span>  
En cualquiera de los supuestos anteriores, comprobar que la descripción textual contiene toda la información que proporciona la imagen.
</li>
</ol>
</ol>


Línea 75: Línea 95:


|wcag_ejemplo_evaluacion=
|wcag_ejemplo_evaluacion=
<div class="accessibility-card">
Uso de <code>aria-describedby</code> para asociar descripción extensa:
Uso de <code>aria-describedby</code> para asociar descripción extensa:


Línea 84: Línea 106:
</div>
</div>
</pre>
</pre>
</div>


|wcag_otras_herramientas_evaluacion=
|wcag_otras_herramientas_evaluacion=
<strong>Bookmarklet para inspeccionar ALT:</strong><br>
<ul>
<li>
<strong>Bookmarklet para inspeccionar 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. <br>
<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 complejas
Ver ALT de imágenes complejas
</a>
</a>
 
</div>
</html>
</li>
<li>
<strong>Lector de pantalla:</strong> NVDA, JAWS, VoiceOver — confirmar comprensión completa
<strong>Lector de pantalla:</strong> NVDA, JAWS, VoiceOver — confirmar comprensión completa
 
</li>
<li>
<strong>Inspector del navegador:</strong> comprobar <code>alt</code> y <code>aria-describedby</code>
<strong>Inspector del navegador:</strong> comprobar <code>alt</code> y <code>aria-describedby</code>
 
</li>
</ul>
}}
}}

Revisión actual - 17:51 4 nov 2025

1.1.1-F. Incluir una alternativa larga cuando la corta no basta

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)

  • Si una alternativa breve no transmite toda la información, se ofrece además una alternativa larga que cumpla el propósito completo del contenido.

Comprensión del criterio

Descripción resumida

Algunas imágenes incluyen mucha información —como gráficos, mapas o infografías— y un texto alternativo corto no basta para transmitirla.

En estos casos, además del alt breve, se debe ofrecer una descripción extensa que explique todo el contenido visual y su interpretación.

Esta descripción puede colocarse:

  • Debajo de la imagen
  • En otra parte de la página, enlazada claramente
  • Mediante aria-describedby

Objetivo

Permitir que las personas que no pueden ver imágenes complejas accedan al mismo contenido informativo, incluyendo detalles, relaciones, comparaciones y conclusiones.

Importancia de cumplir el criterio

Un simple “Gráfico de temperaturas anuales” no transmite la información real.

Las personas ciegas necesitan acceso completo a los datos visuales.

La descripción larga proporciona contexto y detalles, asegurando equidad informativa.

Referencias WCAG

Recursos de apoyo

Evaluación del criterio

Tipo de evaluación

Evaluación Semiautomática

Procedimiento de evaluación

Usa la herramienta de Web Developer Toolbar.
  1. Paso 1. Seleccionar Images – Display alt attributes
  2. Paso 2. Localizar las imágenes con un contenido complejo (ej. Infografías, gráficas, esquemas…)
  3. Paso 3. Verificar que tienen una alternativa textual con una breve descripción del contenido
  4. Paso 4. Verificar que disponen de una descripción larga cumpliendo uno de los siguientes supuestos:
    • Verificar que dispone de un atributo “longdesc” con un enlace a la descripción textual de la imagen. Comprobar que el enlace es operativo.
    • Verificar que existe en cuerpo de la página una descripción textual de la imagen.
    • Verificar que inmediatamente antes o después de la imagen se proporciona un enlace a otra página que contiene la descripción textual de la imagen. Comprobar que el enlace es operativo.
  6. Paso 5. En cualquiera de los supuestos anteriores, comprobar que la descripción textual contiene toda la información que proporciona la imagen.

Resultado esperado

La imagen cuenta con un alt breve informativo y una descripción larga accesible y correctamente asociada, que cubre todo el contenido visual y su interpretación.

Ejemplo

Uso de aria-describedby para asociar descripción extensa: 

<img src="grafico-economia.jpg" alt="Gráfico del crecimiento económico 2023" aria-describedby="descEconomia">

<div id="descEconomia">
<p>El gráfico muestra el crecimiento económico por trimestre. En el primer trimestre el valor fue del 1,2 %, en el segundo del 1,8 %, en el tercero del 2,4 %, y en el cuarto del 2,9 %. La tendencia general es ascendente.</p>
</div>

Otras herramientas de evaluación

  • Bookmarklet para inspeccionar 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 complejas
  • Lector de pantalla: NVDA, JAWS, VoiceOver — confirmar comprensión completa
  • Inspector del navegador: comprobar alt y aria-describedby










Ejemplos accesibles y no accesibles creados por alumnos

Comentarios

A continuación se muestran comentarios sobre el criterio 1.1.1-F. Incluir una alternativa larga cuando la corta no basta

Loading comments...




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