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

De WCAG Wiki
← Edición anteriorEdición siguiente →
VisualWikitexto
Sin resumen de edición
Línea 107: Línea 107:


* Herramientas como ''' [https://chromewebstore.google.com/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm?hl=es Web Developer Toolbar].''' ayudan a ver si faltan textos alternativos o si las imágenes de fondo son solo decorativas.
* Herramientas como ''' [https://chromewebstore.google.com/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm?hl=es Web Developer Toolbar].''' ayudan a ver si faltan textos alternativos o si las imágenes de fondo son solo decorativas.
== EVALUACIÓN ==
=== HERRAMIENTAS DE APOYO ===
'''Nombre de la herramienta''': Web Developer Toolbar
=== PROCEDIMIENTO DE COMPROBACIÓN ===
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.
== REFERENCIA WCAG 2.1 ==
* 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>
  <div class="accessibility-card">
    <h3>Ejemplo accesible 1</h3>
    <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>
  <div class="accessibility-card-error">
    <h3>Exemple NO accesible 2</h3>
    <p>El texto del atributo alt que describe la imagen no corresponde a la información visual de la imagen</p>
    <img src="https://lh5.googleusercontent.com/proxy/8-AB-4UXoIzHeQoPkomtNag9DdpaD7YELws70s0zUKMFPsOZev_UrCppjwF8leWBd2ZSFuJYVm4tQ_DSq3t0Xzece5t1k8C1mZ2uSBLRhcE7tz7mE3tDnB83_AiR-6njAbfIE2uBfReSMqWxzes9ZZwl" alt="image123">
    <pre>alt=""</pre>
  </div>
</html>
[[Archivo:Videocall.png|alt=imagen accesible|borde|sinmarco]]<br />
En esta imagen se puede observar como correctamente hay un atributo alt
{{sust:discutido}}
<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>
{{ORDENAR:Principio 1/1.1 Texto Alternativo/1.1.1- A2}}
[[Special:RecentChanges|Cambios recientes]]

Revisión del 00:26 22 oct 2025

1.1.1- A. Alternativa textual breve obligatoria

  • Nivel: A
  • Versión: 2.2
  • 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

Descripción resumida

Todas las imágenes, iconos o gráficos deben tener un texto que explique qué muestran o para qué sirven.

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.

Cómo hacerlo:

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

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

Referencias WCAG / Técnicas

Recursos de apoyo

Puedes usar guías y herramientas para escribir textos alternativos:
  • Herramientas como Web Developer Toolbar. ayudan a ver si faltan textos alternativos o si las imágenes de fondo son solo decorativas.
Obtenido de «https://wikiwcag.udl.cat/index.php?title=Principio_1/1.1_Texto_Alternativo/1.1.1-_A&oldid=1203»