Agregar texto alternativo a imágenes

Agregar una descripción completa a las imágenes y los gráficos para mejorar la comprensión

Las imágenes pueden ser muy útiles para interactuar con sus visitantes y comunicar ideas complejas.

Con frecuencia, las descripciones de imágenes se denominan "descripciones alternativas" o "texto alternativo", ya que brindan una alternativa descriptiva y textual a la imagen.Las descripciones de las imágenes que explican su contenido son fundamentales para el proceso de aprendizaje de los estudiantes con problemas de visión. En general, las descripciones textuales pueden brindar un contexto más detallado que facilite la comprensión para todos los estudiantes.

Ally verifica la existencia de descripciones donde hay imágenes y revisa las imágenes en una página web o en un archivo adjunto.

Los problemas se clasifican en graves, importantes y menores.

  • Problema grave: Estos problemas representan el mayor riesgo para la accesibilidad y requieren la mayor atención.
  • Problema importante: Estos problemas afectan la accesibilidad y, si bien no son graves, requieren atención.
  • Problema menor: Estos problemas deben tenerse en cuenta para obtener una mejor puntuación de accesibilidad.

Las imágenes que no tienen texto alternativo representan un problema importante.

Usar Ally para encontrar imágenes sin descripción

Use el informe de accesibilidad de Ally para detectar y solucionar los problemas de accesibilidad en su sitio. Use el enlace proporcionado para el informe e inicie sesión. Abra el informe y mire la lista de problemas en la tabla Problemas de accesibilidad.

La tabla Problemas de accesibilidad se encuentra en las pestañas Descripción general y Dominio. Comience en la pestaña Dominio para ver los problemas específicos de un dominio. 

Las imágenes sin texto alternativo ni descripciones representan un problema importante. Use la pestaña Importante en la tabla Problemas de accesibilidad para ver la lista de los problemas importantes. Seleccione los problemas de imágenes sin descripción.

Si comienza por la pestaña Descripción general, seleccione el problema y, a continuación, el dominio que lo presenta.

Los problemas de descripción de imagen pueden comenzar con el nombre Imagen, Documento o HTML en la lista.

En la lista de problemas de descripción de imagen en el dominio, seleccione el indicador de puntuación junto a un elemento con el problema. Se abrirá el panel de comentarios del editor de contenido.

Vista preliminar de las imágenes sin descripciones

El panel de comentarios de Ally muestra una vista preliminar del contenido, así como la ayuda y los comentarios detallados para corregir los problemas de accesibilidad. Use la vista preliminar para ver las imágenes sin descripciones.

En la vista preliminar, se destaca en qué partes del documento hay problemas de accesibilidad específicos. La información destacada muestra cada repetición de un tipo de problema a la vez. Por ejemplo, si sus imágenes no tienen descripciones alternativas, se muestra cada lugar en el que ocurre este problema específico.

Herramientas de vista preliminar

Use las herramientas de la vista preliminar para analizar los problemas del documento.

  • Desplácese por la vista preliminar página por página.
  • Vea cuántas veces aparece un problema determinado.
  • Recorra los distintos problemas resaltados.
  • Oculte o muestre la información destacada.
  • Acerque o aleje el contenido de la vista preliminar.
  • Si el problema se encuentra en un documento adjunto, descargue el archivo original.

Siga las instrucciones de Ally para agregar descripciones a las imágenes

Se asume que usted tiene conocimiento básico sobre HTML y sabe cómo usar su Sistema de gestión de contenido (CMS). Para seguir las instrucciones, debe saber cómo editar una página web en HTML o el código fuente de su CMS.

Junto con la vista preliminar, Ally le ofrece una guía detallada para corregir el problema. Además, organiza estos comentarios en un árbol de decisiones.Solo debe leer las instrucciones y seguir todas las indicaciones. Podrá saber cuál es el problema, conocer su importancia y aprender a corregirlo adecuadamente.

Seleccione Cómo agregar descripciones y siga los pasos.

Formas de agregar descripciones de imágenes en las páginas web

Hay más de una forma de agregar o editar descripciones de imágenes en las páginas web.

  • HTML: las instrucciones de Ally le indicarán cómo buscar y editar descripciones de imágenes en HTML. Solo debe buscar la página web con la imagen, editar la página. actualizar el código HTML de la imagen para incluir un atributo de texto alternativo y guarde la página.
  • Configuración de imágenes: la mayoría de los CMS proporcionan una forma de editar el texto alternativo en los ajustes de la imagen. Busque la imagen en la página web o en el repositorio de archivos del CMS. Use las herramientas del CMS para editar la imagen. Agregue la descripción de la imagen en el campo de texto alternativo. Guarde la imagen.

Visite w3schools para obtener más información sobre HTML y CSS

¿Por qué no veo el atributo "img src" en mi HTML?

La forma más habitual de agregar imágenes a una página web es con el atributo img src de HTML. Img src utiliza la URL del archivo de imagen para ubicarla en la página web. Pero cada CMS es diferente. Es posible que su sitio use un código o atributos diferentes. 

Por ejemplo, en Drupal, puede encontrar algo como esto:

Agregue el texto alternativo al inicio del atributo. Por ejemplo,

alt="add image description here" data-embed-button="media_browser" data-entity-embed-display="view_mode:media.embedded" data-entity-embed-display-settings="" data-entity-type="media" data-entity-uuid="2961e3a2-8fbe-4e3f-baeb-953d69f70750">

Si no aparece el atributo img src en el código HTML, utilice las herramientas del CMS para editar los ajustes de imagen.Busque la imagen en la página web o en el repositorio de archivos del CMS. Use las herramientas del CMS para abrir los ajustes de la imagen. Agregue la descripción de la imagen en el campo de texto alternativo. Guarde la imagen.

Si aún no sabe cómo continuar, póngase en contacto con el desarrollador o el administrador del sitio web. Solicite instrucciones sobre cómo se agregan las imágenes a sus páginas web y cómo agregar texto alternativo.