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.
Las descripciones de imágenes suelen llamarse descripciones alternativas, texto alternativo y texto alternativo. Las descripciones de imágenes proporcionan una alternativa descriptiva basada en texto a la imagen. Para los estudiantes con discapacidad visual, las descripciones de imágenes que expliquen el contenido de una imagen son cruciales para su aprendizaje. 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. Ally comprueba las imágenes de una página web o de un archivo adjunto.
Los problemas se clasifican en graves, importantes y menores.
Problema grave. Estos problemas son 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 corregir los problemas de accesibilidad de 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.
Sugerencia
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. Utiliza la pestaña Mayores en la tabla Problemas de accesibilidad para ver la lista de los problemas principales. Seleccione los problemas de imágenes sin descripción.
Sugerencia
Si comienza en la pestaña Descripción general, seleccione el problema y, a continuación, el dominio que lo presenta.
Sugerencia
Los problemas de descripción de imagen pueden comenzar con el nombre Imagen, Documento o HTML en la lista.
Desde la lista de problemas de descripciones de imágenes en el dominio, selecciona 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
Importante
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. Estos comentarios se organizan en un árbol de decisiones. Solo debe leer las instrucciones y responder a cada indicación. Podrá saber cuál es el problema, conocer su importancia y aprender a corregirlo adecuadamente.
Seleccione Cómo agregar descripciones y siga los pasos.
Escribir buenas descripciones
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.
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: Los pasos guiados de Ally te guían por cómo encontrar y editar descripciones de imágenes en HTML. Solo debe buscar la página web con la imagen. Editar la página. Actualiza el código HTML de la imagen para incluir un atributo de texto alternativo. Guardar la página.
Configuración de imagen: La mayoría de los CMS ofrecen una forma de editar texto alternativo en la configuración de 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.
Sugerencia
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 común de añadir imágenes a una página web es con el atributo HTML img src. Img src es un atributo HTML que utiliza la URL del archivo de imagen para colocar la imagen 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 ves img src en el HTML, intenta usar las herramientas CMS para editar la configuración de imagen. Busque la imagen en la página web o en el repositorio de archivos del CMS. Usa las herramientas CMS para abrir la configuración de 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.