Hacer que el audio, las imágenes y los videos sean más accesibles

Consejos sobre cómo presentar tu contenido multimedia en diferentes formatos.

Última actualización: 12 de junio de 2023

Agregar audio, imágenes y contenido de video, también llamado contenido multimedia, es una excelente manera de mejorar tu sitio. Sin embargo, considera cómo van a experimentar esta información los visitantes que no pueden ver o escuchar completamente el contenido.

Usa esta guía para obtener más información sobre las formas alternativas de presentar tu contenido multimedia a los visitantes.

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.

Imágenes

Internet es un medio visual donde las imágenes pueden desempeñar un papel importante en la presentación del sitio. Es importante tener en cuenta elementos como el texto alternativo y el formato de las imágenes animadas o .gif.

Texto alternativo

Al escanear una página, los lectores de pantalla identifican las imágenes y leen el texto descriptivo (texto alternativo) a los que visitan el sitio. Al agregar texto alternativo, considera por qué utilizaste la imagen en primera instancia. Por ejemplo, ¿es para transmitir información o es decorativa? ¿Qué necesitan saber las personas con discapacidad visual que visitan el sitio sobre la imagen para acceder a toda la información disponible para las personas sin discapacidad?

Una práctica recomendada es describir brevemente la imagen como lo harías con un amigo por teléfono. Las imágenes meramente decorativas, como gráficos que separan contenido o imágenes abstractas de fondo, no requieren descripciones. Es importante recordar que el texto alternativo es contenido en una página. Debe estar bien redactado y ser conciso.

  • Considera el propósito de la imagen y trata de transmitir ese significado en 125 caracteres o menos.
  • Si la imagen tiene una URL clickthrough o cualquier otro uso funcional, describe la función. Por ejemplo, el texto alternativo para una imagen de una pareja comprometida riendo que vincula a una página con fotos de compromiso podría ser "Pareja comprometida riendo. Enlaces a fotos del compromiso".
  • Para las imágenes que requieran descripciones detalladas, como cuadros, gráficas o gráficos complejos, incluye una descripción de la imagen cerca en el texto de tu sitio. Como alternativa, puedes agregar una página independiente que contenga una descripción de la imagen, para luego agregar una URL clickthrough de la imagen a esa página.
 
No
  • Incluye frases como “una imagen de” o “una foto de” en el texto alternativo. Las tecnologías de asistencia las identifican automáticamente como imágenes.
 

.gifs animados

Puedes agregar imágenes animadas o .gifs a la mayoría de las áreas de tu sitio. Asegúrate de que los .gifs animados no parpadeen tres o más veces en un segundo. Se sabe que este tipo de contenido causa convulsiones o reacciones físicas.

Consejo

Si tu sitio está en la versión 7.1, los visitantes pueden desactivar algunas funciones animadas a través de la configuración de su dispositivo. De esta manera, encontrarán menos movimiento cuando visites tu sitio. Por ejemplo, si un usuario de Mac elige reducir el movimiento de la pantalla en su dispositivo, las animaciones que hayas habilitado para efectos de imagen de fondo o fondos personalizados no aparecerán animadas para esa persona.

Videos

Cuando agregas videos a tu sitio, ten en cuenta estos consejos:

  • Agrega subtítulos sincronizados con las funciones integradas de subtítulos opcionales para YouTube y Vimeo. De esta forma, los que vean los videos pueden activar o desactivar los subtítulos del bloque de video. Visita YouTube y Vimeo para obtener más información sobre cómo agregar subtítulos.
  • Agrega no más de dos videos de fondo por página. Demasiado movimiento puede ser un problema para las personas con sensibilidad al movimiento.
  • Evita el contenido que parpadee tres o más veces en un segundo.

Audio

Puedes ayudar a los visitantes con deficiencias auditivas a acceder al contenido de audio, como podcasts, añadiendo una transcripción. Para mantener las páginas organizadas, es posible que quieras incluir transcripciones en páginas no enlazadas.

Movimiento

El movimiento y la animación pueden hacer que tu sitio sea más interactivo y llamativo. Sin embargo, es importante asegurarse de que no desorienta a los visitantes. Las elecciones de diseño, especialmente las que involucran movimiento, pueden afectar negativamente a aquellas personas con sensibilidad al movimiento. Los siguientes son elementos de diseño que quizás quieras usar de una manera sutil o evitar totalmente para garantizar que tu sitio sea completamente accesible.

Efecto parallax

Un efecto parallax es cuando los elementos de fondo se mueven a diferentes velocidades que los elementos en primer plano mientras se desplaza el cursor. Cuando uses este tipo de efectos, considera las necesidades de las personas con trastornos vestibulares.

Los efectos parallax pueden causar más problemas cuando:

  • Ocupan mucho espacio
  • Aparecen detrás o cerca del texto
  • Ocurren varias veces en una página

Para desactivar cualquier efecto de imagen de fondo, sigue los pasos de Imágenes de fondo de sección. Asegúrate de elegir Ninguno como efecto de imagen. Si usas efectos parallax, considera limitarlos a uno por página y minimizar el tamaño y la profundidad de cada efecto.

Para obtener más información sobre cómo disminuir el movimiento y la animación en tu sitio, visita Animaciones para todo el sitio.

Destellos

El contenido con destellos o colores que cambian rápidamente puede causar convulsiones en visitantes susceptibles. Cuando sea posible, evita usar contenido con destellos o que cambie de color rápidamente y considera implementar las siguientes pautas:

  • El destello debe aparecer un máximo de tres veces en un segundo.
  • Está por debajo de los umbrales de intermitencia general y de intermitencia roja.

Los umbrales de destello son diferentes para cada color. Las personas se ven más afectadas por los destellos rojos que cualquier otro color.

Puedes usar Photosensitive Epilepsy Analysis Tool de Trace Center para evaluar el riesgo de convulsiones y los umbrales de destello.

Footer Image
  • Recibe ayuda de nuestra comunidad

  • Recibe la ayuda de nuestra comunidad para personalizaciones avanzadas.

  • Contrata a un Squarespace Expert

  • Destácate en línea con la ayuda de un diseñador o desarrollador con experiencia.

Hacer que el audio, las imágenes y los videos sean más accesibles