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

De WCAG Wiki
← Edición anterior
VisualWikitexto
Sin resumen de edición
 
(No se muestran 104 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.2</span>
         <span class="value">2.0</span>
       </li>
       </li>


Línea 62: Línea 62:
</html>
</html>


=== Descripción y comprensión del criterio ===


==== Descripción resumida ====
[[Categoría: Visual total]]
<div class="wcag-info-criterio">
[[Categoría: Baja visión]]
Todo contenido que no sea texto (como imágenes, gráficos o iconos) debe tener un texto que explique su información o función.
[[Categoría: Cognitiva]]


Esto permite que cualquier persona pueda entenderlo, incluso si no puede verlo.
[[Categoría: Contenido]]
</div>
[[Categoría: Nivel-A]]
[[Categoría: Versión-2.0]]


==== Objetivo ====
<span class="wcag-info-criterio">
Hacer que toda la información sea comprensible para personas que usan lectores de pantalla o tecnologías de apoyo, transformando el contenido visual en voz, braille o texto ampliado.
</span>


==== Importancia de cumplir el criterio ====
=== Descripción y comprensión del criterio ===
<span class="wcag-info-criterio">
<div class="wcag-info-criterio">
Si una persona no puede ver la página, un lector de pantalla solo leerá lo que esté escrito en el código.
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.
Por ejemplo, un botón con un icono de carrito solo funcionará si tiene un texto alternativo como "Botón Comprar".
</div>
El texto alternativo funciona como los ojos del lector de pantalla y debe describir la información o función de manera clara.
==== Descripción resumida ====
</span>


==== Referencias WCAG / Técnicas ====
<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"> Formas de implementar textos alternativos: * **Imágenes informativas:** usar el atributo <code>alt</code> para describir la imagen o su función. * **Imágenes decorativas:** usar <code>alt=""</code> o CSS, para que los lectores de pantalla las ignoren. * **Botones y formularios:** los elementos interactivos deben tener nombres claros que expliquen su función. * **Contenido complejo:** diagramas o mapas necesitan un texto largo que explique toda la información, mediante un enlace cercano al contenido. * <span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/html/H37|H37: Using alt attributes on img elements]</span> </div>
* '''Imágenes importantes:''' poner un texto corto con <code>alt</code> que explique la imagen o su función.  


==== Recursos de apoyo ====
* '''Imágenes decorativas:''' usar <code>alt=""</code> o CSS, para que no molesten al lector de pantalla.


<div class="wcag-info-criterio"> Se pueden consultar guías y herramientas para aprender a escribir buenos textos alternativos: * Guías sobre cómo redactar textos alternativos claros y descriptivos. * Herramientas como **Web Developer Toolbar** permiten revisar si faltan textos alternativos o si las imágenes de fondo son solo decorativas. * Video ejemplo que muestra cómo implementar texto alternativo correctamente: <html> <iframe width="640" height="360" src="https://www.youtube.com/embed/Ed8CNJrkm74?start=4950" title="Ejemplo de texto alternativo en imágenes" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen> </iframe> </html> </div>
* '''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.
ELIMINAR
</div>


==== Objetivo ====
==== Objetivo ====
<span class="wcag-info-criterio">
El propósito principal de este criterio es asegurar que la información sea **perceptible** por todas las personas, sin importar cómo accedan a la página [4].


Queremos que el contenido no textual pueda ser "traducido" por el software (como un lector de pantalla) a otros formatos que la persona necesite, ya sea voz, braille, o texto ampliado [3]. Si la información se ofrece solo visualmente, una persona ciega o con baja visión se perdería ese contenido por completo [4].
<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.  
</span>
</div>


==== Importancia de cumplir el criterio ====
==== Importancia de cumplir el criterio ====
<span class="wcag-info-criterio">
Este es uno de los requisitos más importantes de la accesibilidad porque afecta a la capacidad de las personas para comprender y operar el contenido.


**Imagina la web sin poder verla:** Cuando una persona ciega utiliza un lector de pantalla, este software solo puede leer lo que está escrito en el código [4]. Si la página muestra un botón con el icono de un carrito de compra, pero el código solo dice `<img src="carrito.png">`, el lector de pantalla no sabrá qué anunciar. La persona se queda sin información sobre cómo interactuar.
<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>


El texto alternativo actúa como **los ojos** para el lector de pantalla [4]. Debe ser una descripción concisa que entregue la **misma información** o tenga el **mismo propósito** que el elemento visual.
</div>


Por ejemplo:
==== Recursos de apoyo ====
*  Si es la foto de un perro, el texto alternativo es: "Un labrador marrón jugando en el parque".
<div class="wcag-info-criterio">  
*  Si es un botón con un icono de lupa, el texto alternativo es: "Botón Buscar" [4].
*  Si es un gráfico de barras complejo, la descripción debe resumir los datos importantes y luego ofrecer un texto más largo (descripción larga) con todas las cifras y tendencias [5].
</span>


==== Referencias WCAG / Técnicas ====
Puedes usar guías y herramientas para escribir textos alternativos:
<div class="wcag-info-criterio">
 
Para proporcionar estas alternativas textuales, se utilizan diferentes técnicas de implementación:
* 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)].


*  **Imágenes informativas:** Se usa el atributo <code>alt</code> para ofrecer una descripción corta que transmita la misma información o propósito que el contenido visual [6, 7].
    *  <span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/html/H37|H37: Using alt attributes on img elements (en inglés)]</span>


*  **Imágenes decorativas:** Si la imagen es solo un adorno (como un espaciador o un borde visual), debe tener un atributo <code>alt=""</code> vacío, o bien implementarse mediante CSS, para que los lectores de pantalla la ignoren y no molesten al usuario con información irrelevante [6, 8, 9].
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>


*  **Controles y formularios:** Los campos de formulario y botones deben tener un nombre que describa claramente su propósito [4, 5]. Si son elementos complejos (como un carrusel), a menudo necesitan atributos **ARIA** (como `role="img"` o `aria-label`) para definir su función y nombre accesible, especialmente si no están construidos con etiquetas HTML nativas [5, 6].


*  **Contenido complejo:** Si la imagen es un diagrama o un mapa (contenido complejo), no basta con una descripción corta. Se requiere una **descripción larga** que detalle todo el significado, por ejemplo, utilizando un enlace inmediatamente adyacente al contenido no textual que lleve al texto completo [5, 10, 11].
</div>
</div>


==== Recursos de apoyo ====  
=== Evaluación del criterio ===
==== Tipo de comprobación ====
<div class="wcag-info-criterio">
<div class="wcag-info-criterio">
Si tiene dudas sobre cómo describir correctamente una imagen, puede consultar guías especializadas para generar textos alternativos adecuados. Por ejemplo, Olga Carreras ha desarrollado una guía y un mapa de decisión para ayudar en este proceso [8, 12].
Comprobación <strong>Manual</strong>
 
Herramientas como la **Web Developer Toolbar** permiten revisar la página para:
*  Comprobar si existen imágenes a las que les falta el atributo `alt` [13].
*  Visualizar directamente los textos alternativos existentes y verificar si su contenido es descriptivo [7].
*  Verificar si las imágenes de fondo (incluidas por CSS) son realmente solo decorativas y no transmiten información esencial [14].


Es necesario revisar visualmente las imágenes y leer las descripciones para comprobar que la información esté completa.
</div>
</div>
****


== EVALUACIÓN ==
==== Procedimiento de evaluación ====
=== HERRAMIENTAS DE APOYO ===


'''Nombre de la herramienta''': Web Developer Toolbar
<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].'''


=== PROCEDIMIENTO DE COMPROBACIÓN ===
<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>.


1. 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”.
<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]])


2. Seleccionar “Images – Display alt attributes”. Comprobar la página valorando si el texto de dicho atributo describe el cometido de la imagen.


</div>


== REFERENCIA WCAG 2.1 ==
==== 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>


* G94: Providing short text alternative for non-text content that serves the same purpose and presents the same information as the non-text content
</div>
* H35: Providing text alternatives on applet elements
* H37: Using alt attributes on img elements
* H53: Using the body of the object element
* F13: Failure of Success Criterion 1.1.1 and 1.4.1 due to having a text alternative that does not include information that is conveyed by color differences in the image
* F30: Failure of Success Criterion 1.1.1 and 1.2.1 due to using text alternatives that are not alternatives (e.g., filenames or placeholder text)
* F65: Failure of Success Criterion 1.1.1 due to omitting the alt attribute or text alternative on img elements, area elements, and input elements of type "image"


==== Ejemplo NO Accesible ====


== LISTA DE EJEMPLOS ACCESIBLES Y NO ACCESIBLES ==
<div class="wcag-info-criterio">
Se listan diferentes ejemplos
    <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>


=== EJEMPLO ACCESIBLE ===
</div>


<html>
==== Otras herramientas de evaluación ====
  <div class="accessibility-card">
<div class="wcag-info-criterio">
    <h3>Ejemplo accesible 1</h3>
'''Herramienta de inspección con un Bookmarklet'''
    <p>Esta imagen es accesible porque tiene un atributo "alt" y se muestra un texto alternativo que describe la imagen de forma correcta. Es una imagen que complementa la información textual y por ello necesita una descripción para comunicar en texto su contenido</p>
    <img src="https://www.wikiwcag.udl.cat/images/thumb/c/cf/Atributo-alt.png/450px-Atributo-alt.png" alt="image123">
    <pre>alt="Atributo alt con un texto descriptivo y adecuado a la imagen"</pre>
  </div>
</html>


Al mostrar la información con el bookmarklet, comprobar que el texto de cada imagen corresponde a la imagen.


=== EJEMPLO NO ACCESIBLE ===
<html>
<HTML>
<div class="highlight-box">
  <div class="accessibility-card-error">
    <strong>Arrastra este botón a tu barra de marcadores:</strong>
    <h3>Exemple NO accesible 1</h3>
    <p>Falta etiqueta alt en la imagen</p>
    <img src="https://lh5.googleusercontent.com/proxy/8-AB-4UXoIzHeQoPkomtNag9DdpaD7YELws70s0zUKMFPsOZev_UrCppjwF8leWBd2ZSFuJYVm4tQ_DSq3t0Xzece5t1k8C1mZ2uSBLRhcE7tz7mE3tDnB83_AiR-6njAbfIE2uBfReSMqWxzes9ZZwl" alt="image123">
    <pre>alt=""</pre>
  </div>
</html>


<HTML>
    <a class="bookmarklet-button"
  <div class="accessibility-card-error">
      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);    }); })();">
     <h3>Exemple NO accesible 2</h3>
      Haz clic para ver los textos alternativos de las imágenes
    <p>El texto del atributo alt que describe la imagen no corresponde a la información visual de la imagen</p>
     </a>
    <img src="https://lh5.googleusercontent.com/proxy/8-AB-4UXoIzHeQoPkomtNag9DdpaD7YELws70s0zUKMFPsOZev_UrCppjwF8leWBd2ZSFuJYVm4tQ_DSq3t0Xzece5t1k8C1mZ2uSBLRhcE7tz7mE3tDnB83_AiR-6njAbfIE2uBfReSMqWxzes9ZZwl" alt="image123">
     <pre>alt=""</pre>
   </div>
   </div>
</html>
</html>


'''Lector de pantalla'''


[[Archivo:Videocall.png|alt=imagen accesible|borde|sinmarco]]<br />
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.
En esta imagen se puede observar como correctamente hay un atributo alt


</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.


{{sust:discutido}}
{{#ask:
 
[[Tiene subcriterio::1.1.1-A]]
<ref>{{Cita web |url=http://www.ejemplo.com |título=Ejemplo de título |autor=Nombre del autor |fecha=Fecha de publicación |editor=Nombre del editor }}</ref>
|?Modification date#F[d/m/Y]=Última modificación
 
|format=table
{{ORDENAR:Principio 1/1.1 Texto Alternativo/1.1.1- A2}}
}}
 
[[Special:RecentChanges|Cambios recientes]]

Revisión actual - 12:01 8 ene 2026

1.1.1- A. Alternativa textual breve obligatoria

  • Nivel: A
  • Versión: 2.0
  • Principio: 1. Perceptible
  • Pauta: 1.1 Textos alternativos
  • Categoría: Contenido
  • Subcategoría: No-texto

Usuarios más afectados

  • Icono de una persona con discapacidad visual Personas con discapacidad visual total - Barrera grave
  • Icono baja visión Personas con baja visión – Barrera moderada
  • Icono discapacidad cognitiva Personas con discapacidad cognitiva – Barrera leve


Descripción y comprensión del 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.

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 importantes: poner un texto corto con alt que explique la imagen o su función.
  • Imágenes decorativas: usar alt="" 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.

Objetivo

Que los lectores de pantalla y otras ayudas puedan decir o mostrar la información que aparece en imágenes y gráficos.

Importancia de cumplir el criterio

Sin alternativas textuales, las personas ciegas o con baja visión no pueden entender la información visual.

Referencias WCAG

Recursos de apoyo

Puedes usar guías y herramientas para escribir textos alternativos:


Se indica un video con un ejemplo del criterio.



Evaluación del criterio

Tipo de comprobación

Comprobación Manual

Es necesario revisar visualmente las imágenes y leer las descripciones para comprobar que la información esté completa.

Procedimiento de evaluación

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)


Ejemplo Accesible

El texto alternativo de la imagen se muestra en el atributo 

<img src="imagen.jpg" alt="texto de la imagen">

Ejemplo NO Accesible

No hay texto alternativo de la imagen 

 <img src="imagen.jpg">

Otras herramientas de evaluación

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.

Arrastra este botón a tu barra de marcadores: Haz clic para ver los textos alternativos de las imágenes

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.

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.

 Ú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-A6 noviembre 2025 13:11:51
2526UFV1.1.1.-A-00213 noviembre 2025 13:51:16
Obtenido de «https://wikiwcag.udl.cat/index.php?title=Principio_1/1.1_Texto_Alternativo/1.1.1-_A&oldid=4226»