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

De WCAG Wiki
← Edición anteriorEdición siguiente →
VisualWikitexto
Línea 145: Línea 145:
</div>
</div>


==== Ejemplo ====  
==== Ejemplo Accesible ====  
<div class="wcag-info-criterio">
<div class="wcag-info-criterio">
El texto alternativo de la imagen se muestra en el atributo
<code>alt</code>.


<pre class="wcag-codigo-html">
<html>
<img src="imagen.jpg" alt="texto de la imagen">
<div class="accessibility-card">
</pre>
    <p>El texto alternativo de la imagen se muestra en el atributo  </p>
    <pre class="wcag-codigo-html">
      <img src="imagen.jpg" alt="texto de la imagen">
    </pre>


</div>
</div>
</html>
==== Ejemplo NO Accesible ====
<div class="accessibility-card-error">
    <p>No hay texto alternativo de la imagen< </p>
    <pre class="wcag-codigo-html">
      <img src="imagen.jpg">
    </pre>
  </div>
</html>


==== Otras herramientas de evaluación ====
==== Otras herramientas de evaluación ====

Revisión del 09:43 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.
  • 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 

      texto de la imagen

Ejemplo NO Accesible

No hay texto alternativo de la imagen< 

      <img src="imagen.jpg">

</html>

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.

Obtenido de «https://wikiwcag.udl.cat/index.php?title=Principio_1/1.1_Texto_Alternativo/1.1.1-_A&oldid=1431»