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 14 ediciones intermedias del mismo usuario)
Línea 1: Línea 1:
== '''1.1.1-F. Incluir una alternativa larga cuando la corta no basta.''' ==
{{CriterioWCAG
<html>
|id_wcag_criterio=1.1.1
<!-- criterio 1.1.1-F -->
|id_wcag_subcriterio=1.1.1-F
<article class="wcag-card">
|wcag_titulo_criterio=1.1.1-F. Incluir una alternativa larga cuando la corta no basta
  <section class="wcag-info">
|wcag_nivel=A
    <ul>
|wcag_version=2.0
      <li><span class="label">Nivel:</span><span class="value">A</span></li>
|wcag_principio=1_Perceptible
      <li><span class="label">Versión:</span><span class="value">2.0</span></li>
|wcag_principio_url=Principio_1
      <li><span class="label">Principio:</span><span class="value">1. Perceptible</span></li>
|wcag_pauta=1.1_Textos_alternativos
      <li><span class="label">Pauta:</span><span class="value">1.1 Textos alternativos</span></li>
|wcag_pauta_url=Principio_1/1.1_Texto_Alternativo
      <li><span class="label">Categoría:</span><span class="value">Contenido</span></li>
|wcag_grupo=Contenido
      <li><span class="label">Subcategoría:</span><span class="value">No-texto</span></li>
|wcag_subgrupo=No-texto
    </ul>
  </section>
  <section class="wcag-users">
    <p>Usuarios más afectados</p>
    <ul>
      <li><img src="/images/4/4d/Sinvision.png" alt="Icono de una persona con discapacidad visual" />
      <span>Personas con discapacidad visual total - <span class="gravedad">Barrera grave</span></span></li>
        <li>
          <img src="/images/4/40/Cognitiva.png" alt="Icono discapacidad cognitiva" class="icono-discapacidad" />
          Personas con discapacidad cognitiva – <span class="gravedad">Barrera moderada</span>
        </li>
 
    </ul>
  </section>
</article>
</html>


[[Categoría: Visual total]]
|wcag_discapacidades=
[[Categoría: Cognitiva]]
<li class="discapacidad-item">
  [[Archivo:Sinvision.png|20px|class=icon-discapacidad|alt=Discapacidad visual total]]
  <span class="discapacidad-texto">[[:Categoría:Discapacidad visual total|Visual total]]</span> –
  <span class="gravedad gravedad-grave">Barrera grave</span>
</li>
<li class="discapacidad-item">
  [[Archivo:Cognitiva.png|20px|class=icon-discapacidad|alt=Discapacidad cognitiva]]
  <span class="discapacidad-texto">[[:Categoría:Discapacidad cognitiva|Cognitiva]]</span> –
  <span class="gravedad gravedad-moderada">Barrera moderada</span>
</li>


[[Categoría: Contenido]]
|wcag_lista_discapacidades=
[[Categoría: Nivel-A]]
[[Categoría:Discapacidad visual total]]
[[Categoría: Versión-2.0]]
[[Categoría:Discapacidad cognitiva]]


 
|wcag_texto_criterioOAW=
<html>
<!--
Análisis: 1.1.1-F
- Discapacidad: Personas con discapacidad visual total
- Problema: Cuando una alternativa corta no es suficiente, sin la alternativa larga, la información completa no se transmite.
- Gravedad: Grave
-->
</html>
 
=== Descripción y comprensión del criterio ===
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.
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.
==== Descripción resumida ====


<div class="wcag-info-criterio"> A veces una imagen, un gráfico o una infografía contiene mucha información.  
|wcag_descripcion_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 <code>alt</code> breve, se debe ofrecer una descripción extensa que explique todo el contenido visual y su interpretación.


Cuando eso ocurre, el texto alternativo corto (el que va en el atributo <code>alt</code>) no alcanza para explicarlo todo.
Esta descripción puede colocarse:
* Debajo de la imagen
* En otra parte de la página, enlazada claramente
* Mediante <code>aria-describedby</code>


En esos casos se necesita una descripción más larga, que explique '''todo lo que se ve''' y '''lo que significa'''.  
|wcag_objetivo=
Permitir que las personas que no pueden ver imágenes complejas accedan al mismo contenido informativo, incluyendo detalles, relaciones, comparaciones y conclusiones.


Esta descripción larga puede ponerse justo debajo de la imagen o en otra parte de la página, enlazada claramente.  
|wcag_importancia=
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.


</div>
|wcag_referencias=
<ul>
<li><span lang="en">[https://www.w3.org/WAI/WCAG22/Understanding/non-text-content.html Understanding Success Criterion 1.1.1: Non-text Content]</span></li>
</ul>


==== Objetivo ====
|wcag_recursos=
<ul>
<li>[https://www.w3.org/WAI/tutorials/images/complex/ Imágenes complejas – tutorial W3C]</li>
</ul>


<div class="wcag-info-criterio">
|wcag_tipo_evaluacion=Semiautomática
Que cualquier persona, aunque no pueda ver la imagen, pueda entender toda la información que contiene.


La descripción larga debe contar lo mismo que se muestra visualmente: datos, relaciones, colores o comparaciones, de una manera que todos puedan comprender.  
|wcag_pasos_evaluacion=
</div>
Usa la herramienta de ''' [https://chromewebstore.google.com/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm?hl=es Web Developer Toolbar].'''
<ol class="paso-list">
<li><span class="paso-badge">Paso 1.</span> Seleccionar '''Images – Display alt attributes'''</li>
<li><span class="paso-badge">Paso 2.</span>
Localizar las imágenes con un contenido complejo (ej. Infografías, gráficas, esquemas…)
</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>


==== Importancia de cumplir el criterio ====
<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>


<div class="wcag-info-criterio">
|wcag_resultado_evaluacion=
Imagina que hay un gráfico con las temperaturas de cada mes del año.  
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.


Un texto corto como “Gráfico de temperaturas anuales” no ayuda mucho.
|wcag_ejemplo_evaluacion=
<div class="accessibility-card">


Una persona ciega necesita una descripción larga que diga, por ejemplo: “En enero la temperatura media es de 8 °C, sube hasta 26 °C en julio y baja a 10 °C en diciembre”.
Uso de <code>aria-describedby</code> para asociar descripción extensa:
 
Así puede entender el mismo contenido que una persona que ve el gráfico.
</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 consultar el tutorial de W3C que explica como incluir texto alternativo en imágenes complejas.
 
[https://www.w3.org/WAI/tutorials/images/complex/ Imagenes complejas, tutorial de W3C (en inglés)]


<pre class="wcag-codigo-html">
<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>
</div>
 
</pre>
=== Evaluación del criterio ===
 
==== Tipo de comprobación ====
 
<div class="wcag-info-criterio">  
Comprobación '''Manual'''.
 
Es necesario revisar visualmente las imágenes y leer las descripciones para comprobar que la información esté completa.
</div>
</div>


==== Procedimiento de evaluación ====
|wcag_otras_herramientas_evaluacion=
 
<ul>
<div class="wcag-info-criterio">
<li>
<span class="paso-badge>Paso 1.</span>
<strong>Bookmarklet para inspeccionar ALT:</strong><br/>
Usa la herramienta de ''' [https://chromewebstore.google.com/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm?hl=es Web Developer Toolbar].'''
<html>
 
<div class="highlight-box">
<span class="paso-badge>Paso 2.</span>
Arrastra este botón a tu barra de marcadores y podrás ejecutarlo y ver los textos alternativos de otras páginas. <br>
Identifica las imágenes que contienen información compleja (gráficos, diagramas, mapas, infografías…).
<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);});})();">
<span class="paso-badge>Paso 3.</span>
Ver ALT de imágenes complejas
Seleccionar '''Images – Display alt attributes'''.  
</a>
Comprueba que tienen una descripción corta en el atributo <code>alt</code> que indique de qué trata la imagen.
 
<span class="paso-badge>Paso 4.</span>  
Verifica que la descripción larga esté claramente asociada a la imagen. Esto puede hacerse de varias maneras:
* Usando el atributo <code>aria-describedby</code> para enlazar a la descripción.
* Colocando un enlace junto a la imagen que lleve a una página o sección con la explicación completa.
* Incluyendo la descripción detallada justo debajo de la imagen.
 
</div>
</div>
==== Ejemplo ====
<div class="wcag-info-criterio">
Asociar una descripción extensa de una imagen mediante el atributo <code>aria-describedby</code>:
<pre class="wcag-codigo-html">
&lt;img src="grafico-economia.jpg" alt="Gráfico del crecimiento económico 2023" aria-describedby="descEconomia" />
&lt;div id="descEconomia">
&lt;p>El gráfico muestra el crecimiento económico por trimestre. En el primer trimestre, el valor fue del 1,2 %. En el segundo trimestre, del 1,8 %, en el tercero, del 2,4 %, y en el cuarto, del 2,9 %.  La tendencia general es ascendente.&lt;/p>
&lt;/div>
</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 complejas
    </a>
  </div>
</html>
</html>
 
</li>
'''Lector de pantalla'''
<li>
 
<strong>Lector de pantalla:</strong> NVDA, JAWS, VoiceOver — confirmar comprensión completa
Uso de lectores de pantalla como JAWS, NVDA o VoiceOver, para comprobar que la información que se escucha al acceder a una imagen compleja, es comprensible.
</li>
 
<li>
'''Inspector del navegador'''
<strong>Inspector del navegador:</strong> comprobar <code>alt</code> y <code>aria-describedby</code>
 
</li>
Puedes usar la herramienta de inspección del navegador* para comprobar si una imagen compleja tiene los atributos <code>alt</code> y <code>aria-describedby</code>.
</ul>
 
}}
 
 
</div>

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»