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 le muestra una vista preliminar del contenido, y le brinda los comentarios detallados y el soporte para que pueda 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 instancia 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.

Alternative Text on Images

Writing good descriptions

Follow these best practices to write good alternative text descriptions for your images:

  • Describe the image based on the page context. Convey the full meaning of the image.
  • Avoid saying "image of" or "picture of". Screen readers automatically announce images as images.
  • Be concise.
  • Write narratives for complex images like infographics. Put this narrative on the page immediately following the infographic. Include an anchor link at the top of the page to view the text alternative. See an example of an infographic with a text alternative.
  • Avoid images of text. If you can't avoid it, copy the text into the alternative description.
  • Say something new. Don't repeat alternative descriptions on the same page. Don't repeat what is already said on the page.
  • Identify images that don't represent relevant content as decorative.

What is a decorative image?

An image is decorative when it doesn't add to the information on the page. For example, art work used to separate topics or a photo of someone on the phone when discussing communication skills.

They are valuable in their visual appeal but may not need to be read by screen readers.

More on decorative images on the web accessibility initiative website

Why are alternative image descriptions important?

There are many reasons to use alternative descriptions with your images.

  • Alternative descriptions, or text, are in the WCAG 2.2 guidelines
  • Students can search for an image
  • Students with visual impairments have difficulty perceiving images
  • Student with a poor network connection may have difficulty perceiving images
  • Screen readers can't read images
  • Some students learn better from descriptions than images
  • Text scales better than most images when the screen or page is enlarged

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:

<drupal-entity data-embed-button="media_browser" data-entity-embed-display="view_mode:media.embedded" data-entity-type="media" data-entity-uuid="2961e3a2-8fbe-4e3f-baeb-953d69f70750"></drupal-entity>

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

<drupal-entity 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"></drupal-entity>

Si no ve 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.