Escribir texto alternativo con fines de accesibilidad

El texto alternativo es una copia breve y descriptiva que ayuda a los usuarios a comprender el propósito de una imagen, fotografía, ilustración, GIF u otro contenido visual en una página web. Esta copia puede ser captada por dispositivos de asistencia o cuando una imagen no se carga (por ejemplo, debido al bajo ancho de banda).

Incluir texto alternativo en tu sitio web hace que los videos, las imágenes, los GIF y los íconos sean más accesibles para todos, tengan discapacidades o no.

Las razones por las que alguien podría necesitar el texto alternativo incluyen:

• Ceguera o baja visión

• Iluminación brillante

• Deficiencia auditiva

• Entorno ruidoso

• Internet lento

Cómo escribir un buen texto alternativo

Las descripciones de las imágenes deben ser de alta calidad y tu audiencia debe entenderlas fácilmente. Sigue estas prácticas recomendadas al escribir tu propio texto alternativo.

1. Garantiza que esté bien redactado.Haz tu mejor esfuerzo para escribir texto alternativo en oraciones, y seguir las reglas gramaticales y de puntuación. 

2. Redacta un texto breve.Recomendamos mantener el texto alternativo en menos de 250 caracteres.Enfócate en los detalles contextuales más importantes que alguien necesita saber, en lugar de simplemente describir la imagen en sí.

3. Sé descriptivo.Da la información necesaria para entender la intención de tu imagen.Al vincular texto, explica a qué estás vinculando: “Lee nuestro informe” vs. “Haz clic aquí”.

4. Considera con las tecnologías alternativas.Piensa en cómo funciona la tecnología de asistencia.Por ejemplo, los dispositivos de asistencia dicen “imagen de” antes de leer texto alternativo, así que los usuarios de lectores de pantalla no necesitan que la incluyas en tu copia. 

5. Sigue practicando.Haz que sea un hábito agregar texto alternativo a cualquier imagen que publiques.Cuanto más practiques, más rápido y mejor podrás describir el contenido de la imagen.

Finalmente, evita usar IA para generar texto alternativo para ti. En este punto, los generadores de IA no siempre identifican con precisión qué información necesita saber el lector sobre una imagen.

Contenido decorativo frente a contenido esencial

No necesariamente necesitas escribir texto alternativo para cada imagen en tu sitio web. Para identificar qué imágenes lo necesitan, decide cuáles son las imágenes decorativas y cuáles son esenciales.

El contenido decorativo no es necesario para entender el significado o el uso de tu página web y no necesita texto alternativo. Por ejemplo, un divisor de sección no lo necesita. 

El contenido esencial es cualquier cosa que sea necesaria para entender o usar la página. Las imágenes esenciales necesitan texto alternativo.

Una manera fácil de diferenciar entre los dos tipos de imágenes es preguntarte: “Si elimino esto de la página, ¿cambia el significado?” 

Nombres de archivo

También usa las mejores prácticas de texto alternativo de imagen para nombres de archivos. Un nombre de archivo accesible es descriptivo de la imagen a la que está adjunto, en lugar de ser vago o generado automáticamente. Por ejemplo, usa “Personacomiendouva.jpg” en lugar de “IMG4729.jpg”.

Esto tiene dos ventajas adicionales: los archivos de imagen son más fáciles de organizar para ti y puedes configurarlos mejor para el SEO. Aparecer en las búsquedas de imágenes es otra excelente manera de dirigir el tráfico de los motores de búsqueda a tu sitio web.

Ejemplos de texto alternativo de imágenes

Nota: Esta guía está disponible como un recurso para ayudarte a empezar, pero no debe interpretarse ni considerarse como asesoramiento legal. Squarespace no puede proporcionar consejos sobre cómo hacer que tu sitio cumpla con leyes, regulaciones o estándares específicos de accesibilidad.

Aquí te damos dos ejemplos de texto alternativo eficaz para imágenes. Ten en cuenta que el texto alternativo es específico del contexto; si es apropiado en una situación, no necesariamente se aplicará a la misma foto utilizada en otra.

Imagina que esta foto apareció en un listículo sobre los tipos básicos de cámaras. En ese contexto, un buen ejemplo de texto alternativo para esta imagen podría ser: “Una cámara DSLR y una lente en una funda de transporte abierta”.

En ese contexto, un ejemplo de texto alternativo que necesita mejorar sería: “Imagen de una cámara sobre un fondo gris”. 

En este ejemplo se usa “imagen de”, que los dispositivos de asistencia ya dicen antes de leer el texto alternativo. Tampoco da detalles importantes sobre la cámara u otros objetos en la imagen que serían útiles para alguien que lee sobre tipos de cámara.

Un ejemplo de buen texto alternativo para esta imagen podría ser: “Un conjunto de coloridos sobres tamaño carta”.

En un contexto en el que esta imagen se usa para dividir la página visualmente sin agregar ninguna información necesaria, podrías omitir escribir texto alternativo.

Consulta nuestra página de accesibilidad para obtener más información

Cómo hacer que las imágenes complejas sean accesibles

Si bien el texto alternativo es útil y necesario, puede ser difícil ajustar toda la información necesaria en 250 caracteres o menos. Este es especialmente el caso de imágenes más complejas como tablas, gráficos, infografías y videos largos que pueden necesitar descripciones mucho más largas para obtener la información más importante.

En esos casos, puedes:

• Describir el contenido en detalle en el cuerpo del texto.Escribe una descripción más larga para la imagen que resalte los puntos clave y los ponga en contexto.Puedes usar el texto alternativo para agregar una descripción rápida y agregar un párrafo justo al lado o debajo de la imagen con una descripción más larga.

• Usa un leyenda de imagen.Agrega una leyenda visible a tu imagen que explique los detalles y el contexto de la imagen.

El texto y la accesibilidad web son esenciales, no solo “agradables” para tu sitio web. Cuanto más accesible sea tu sitio web, más visitantes podrán usarlo, independientemente de sus circunstancias. 

Lee nuestra guía completa sobre accesibilidad web