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


<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. * **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. * <span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/html/H37|H37: Using alt attributes on img elements]</span> </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>
 
</div>


==== Recursos de apoyo ====
==== Recursos de apoyo ====
<div class="wcag-info-criterio">


<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>
Puedes usar guías y herramientas para escribir textos alternativos:  


***********
* Guías que enseñan a hacer descripciones claras.
ELIMINAR
** [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].


==== Objetivo ====
** [https://www.w3.org/WAI/tutorials/images/decision-tree/ Árbol de decisión de W3C (en inglés)].
<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].
</span>


==== Importancia de cumplir el criterio ====
Se indica un video con un ejemplo del 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.


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.
<html>
 
   <iframe width="100%" height="400"
Por ejemplo:
          src="https://www.youtube.com/embed/Ed8CNJrkm74?start=6114"
*   Si es la foto de un perro, el texto alternativo es: "Un labrador marrón jugando en el parque".
          title="Video de YouTube"
*  Si es un botón con un icono de lupa, el texto alternativo es: "Botón Buscar" [4].
          frameborder="0"
*  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].
          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
</span>
          allowfullscreen>
 
   </iframe>
==== Referencias WCAG / Técnicas ====
</html>
<div class="wcag-info-criterio">
Para proporcionar estas alternativas textuales, se utilizan diferentes técnicas de implementación:
 
*   **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].


*  **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»