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 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.
Texto alternativo en imágenes
Cómo redactar descripciones adecuadas
A la hora de redactar descripciones de texto alternativas adecuadas para sus imágenes, siga estas prácticas recomendadas:
- Describa la imagen basándose en el contexto de la página. Transmita el significado completo de la imagen.
- Evite decir "imagen de" o "fotografía de". Los lectores de pantalla anuncian las imágenes como tales de forma automática.
- Sea conciso.
- Escriba narraciones para imágenes complejas, como infografías. Coloque esta narración en la página inmediatamente después de la infografía. Incluya un enlace de anclaje en la parte superior de la página para ver la alternativa de texto. Vea un ejemplo de una infografía con una alternativa de texto.
- Evite las imágenes de texto. En caso de no ser posible, copie el texto en la descripción alternativa.
- Diga algo nuevo. No repita descripciones alternativas en la misma página. No repita lo que ya se dijo en la página.
- Identifique las imágenes que no representan contenido relevante como decorativas.
¿Qué es una imagen decorativa?
Una imagen es decorativa cuando no aporta a la información de la página. Por ejemplo, un trabajo artístico que se utiliza para separar temas o una fotografía de alguien al teléfono al hablar sobre habilidades de comunicación.
Son valiosas visualmente, pero no es necesario que los lectores de pantalla las lean.
¿Por qué son importantes las descripciones alternativas de imágenes?
Hay muchas razones para utilizar descripciones alternativas con sus imágenes.
- Las descripciones alternativas, o los textos, están en las pautas de WCAG 2.2.
- Los estudiantes pueden buscar una imagen.
- Los estudiantes con problemas de visión tienen dificultad para percibir imágenes.
- Los estudiantes con una conexión de red deficiente pueden tener dificultades para percibir imágenes.
- Los lectores de pantalla no pueden leer imágenes.
- Algunos estudiantes aprenden mejor con las descripciones que con las imágenes.
- Cuando se agranda la pantalla o la página, el texto se ajusta mejor que la mayoría de las imágenes.
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.
