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 98 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 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 73: Línea 93:
==== Objetivo ====
==== Objetivo ====


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


<div class="wcag-info-criterio"> Si una persona no puede ver la página, solo escuchará lo que haya en el código.  
<div class="wcag-info-criterio"> Sin alternativas textuales, las personas ciegas o con baja visión no pueden entender la información visual. </div>


Por ejemplo, un botón con un carrito debe decir "Botón Comprar", para que la persona sepa qué hace.  
==== Referencias WCAG  ====
</div>
 
<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>


==== Referencias WCAG / Técnicas ====
</div>


==== Recursos de apoyo ====
<div class="wcag-info-criterio">  
<div class="wcag-info-criterio">  
Cómo hacerlo:
* '''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.
Puedes usar guías y herramientas para escribir textos alternativos:


* '''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.  
* 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].


* <span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/html/H37|H37: Using alt attributes on img elements]</span> </div>
** [https://www.w3.org/WAI/tutorials/images/decision-tree/ Árbol de decisión de W3C (en inglés)].


==== 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. * Herramientas como **Web Developer Toolbar** ayudan a ver si faltan textos alternativos o si las imágenes de fondo son solo decorativas. * Video ejemplo mostrando cómo escribir textos alternativos: <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>
Se indica un video con un ejemplo del criterio.


***********
ELIMINAR


==== Objetivo ====
<html>
<span class="wcag-info-criterio">
  <iframe width="100%" height="400"
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].
          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>


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


==== Importancia de cumplir el criterio ====
</div>
<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.
=== Evaluación del criterio ===
==== Tipo de comprobación ====
<div class="wcag-info-criterio">
Comprobación <strong>Manual</strong>


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.  
Es necesario revisar visualmente las imágenes y leer las descripciones para comprobar que la información esté completa.
</div>


Por ejemplo:
==== Procedimiento de evaluación ====
*  Si es la foto de un perro, el texto alternativo es: "Un labrador marrón jugando en el parque".
*  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 ====
<div class="wcag-info-criterio">
<div class="wcag-info-criterio">
Para proporcionar estas alternativas textuales, se utilizan diferentes técnicas de implementación:
<span class="paso-badge>Paso 1.</span>
Usa la herramienta de ''' [https://chromewebstore.google.com/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm?hl=es Web Developer Toolbar].'''


*  **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 class="paso-badge>Paso 2.</span>
    *  <span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/html/H37|H37: Using alt attributes on img elements (en inglés)]</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>.


*  **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].
<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]])


*  **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 ====  
==== Ejemplo Accesible ====  
<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].
<p>El texto alternativo de la imagen se muestra en el atributo  </p>
 
<div class="accessibility-card">
Herramientas como la **Web Developer Toolbar** permiten revisar la página para:
    <pre class="wcag-codigo-html">
*  Comprobar si existen imágenes a las que les falta el atributo `alt` [13].
<img src="imagen.jpg" alt="texto de la imagen">
*  Visualizar directamente los textos alternativos existentes y verificar si su contenido es descriptivo [7].
    </pre>
*  Verificar si las imágenes de fondo (incluidas por CSS) son realmente solo decorativas y no transmiten información esencial [14].
</div>


</div>
</div>
****


== EVALUACIÓN ==
==== Ejemplo NO Accesible ====  
=== HERRAMIENTAS DE APOYO ===


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


=== PROCEDIMIENTO DE COMPROBACIÓN ===
</div>
 
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”.
 
2. Seleccionar “Images – Display alt attributes”. Comprobar la página valorando si el texto de dicho atributo describe el cometido de la imagen.


==== Otras herramientas de evaluación ====
<div class="wcag-info-criterio">
'''Herramienta de inspección con un Bookmarklet'''


== REFERENCIA WCAG 2.1 ==
Al mostrar la información con el bookmarklet, comprobar que el texto de cada imagen corresponde a la imagen.
 
* G94: Providing short text alternative for non-text content that serves the same purpose and presents the same information as the non-text content
* 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"
 
 
== LISTA DE EJEMPLOS ACCESIBLES Y NO ACCESIBLES ==
Se listan diferentes ejemplos
 
=== EJEMPLO ACCESIBLE ===


<html>
<html>
  <div class="accessibility-card">
<div class="highlight-box">
    <h3>Ejemplo accesible 1</h3>
    <strong>Arrastra este botón a tu barra de marcadores:</strong>
    <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>
 
 
=== EJEMPLO NO ACCESIBLE ===
<HTML>
  <div class="accessibility-card-error">
    <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»