Skip to main content

Cómo agregar descripciones de imágenes

Las descripciones de imágenes, también llamadas texto alternativo, son una manera fácil de hacer que >x< sea accesible para las personas con discapacidad. Al igual que los posts, las descripciones de imágenes deben respetar las Reglas de >x<.

La descripción de imágenes beneficia a las personas ciegas, a las que tienen problemas de visión, a las que utilizan tecnología de asistencia, a las que viven en áreas con poco ancho de banda o a las que desean tener más contexto. Sin descripciones, los lectores no sabrán qué contienen tus imágenes o por qué estas son importantes. Esta ausencia de información impide que las personas interactúen con tu post.

Puedes agregar descripciones de imágenes en cuatro pasos.

Agregar descripciones de imagen
  1. 1. Después de cargar una imagen en un post, selecciona el botón +ALT en la imagen. ("ALT" es la abreviatura de "texto alternativo", que corresponde al nombre técnico de la descripción de imágenes).

    [@portabletext/react] Unknown block type "__pendingImage", specify a component for it in the `components.types` prop

    2. Escribe una descripción de la imagen en el cuadro de texto. La descripción de esta imagen es: “Una pequeña taza blanca con una diminuta asa circular, con un shot de espresso marrón intenso y crema marrón claro en la parte superior. La taza se encuentra sobre un pequeño plato blanco en una mesa de madera de color pardo. En la esquina del cuadro de texto está el conteo de caracteres. Hemos utilizado 226 caracteres de los 1000 disponibles.

    [@portabletext/react] Unknown block type "__pendingImage", specify a component for it in the `components.types` prop

    3. Selecciona Listo. Aparecerá una insignia de ALT en la esquina de la imagen. El símbolo + ya no aparece en la insignia ahora que se ha agregado la descripción.

    [@portabletext/react] Unknown block type "__pendingImage", specify a component for it in the `components.types` prop

    4. Selecciona Escribir post. La insignia de ALT aparece en la imagen del post publicado. Cuando alguien selecciona la insignia de ALT, la descripción de la imagen aparece en la pantalla de abajo hacia arriba.

    [@portabletext/react] Unknown block type "__pendingImage", specify a component for it in the `components.types` prop
    [@portabletext/react] Unknown block type "__pendingImage", specify a component for it in the `components.types` prop
Agregar varias imágenes
  1. Si agregas más de una imagen a tu post en iOS, las imágenes aparecerán en un desplazamiento horizontal. Selecciona la insignia de +ALT en cada imagen para agregar las descripciones de la imagen.

    [@portabletext/react] Unknown block type "__pendingImage", specify a component for it in the `components.types` prop

    Después de agregar las descripciones de las imágenes, verás que aparece la insignia de ALT en las imágenes que tienen una descripción. Las personas que ven tu post podrán seleccionar la insignia de ALT en cada imagen para leer las descripciones de la imagen.