Nota: Si bien hemos traducido las guías más populares al español, algunas guías están disponibles solamente en inglés.

Hacer que tu sitio de Squarespace sea más accesible

Los sitios web accesibles permiten una experiencia más sencilla para las personas con discapacidad cuando utilizan lectores de pantalla y otras tecnologías de asistencia. Puedes personalizar muchos aspectos del sitio para facilitar la navegación.

Utiliza esta guía para conocer las prácticas recomendadas para diseñar y estructurar tu contenido.

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.

Títulos de página

Lo primero que los lectores de pantalla comunican cuando los usuarios van a una nueva página web es el título de la página. Dado que los títulos son importantes para la orientación, asegúrate de que cada página tenga un título que introduzca su tema o propósito y lo diferencie de otras páginas del sitio.

Texto

Títulos

Los lectores de pantalla utilizan código HTML en lugar de elementos visuales para comprender la estructura de una página. Cuando se utiliza un lector de pantalla, los visitantes pueden navegar por las páginas con mayor facilidad cuando cada sección de la página tiene un encabezado. Utiliza la barra de herramientas de texto para dar formato al texto como encabezados.

Para obtener más información sobre la estructura y los encabezados de una página, visita la Iniciativa para la Accesibilidad Web.

  • Utiliza encabezados según la importancia del texto. Por ejemplo, utiliza el Encabezado 1 (h1) para los encabezados más importantes.
Don't
  • Abuses de texto insertado en las imágenes para transmitir significado a menos que también añadas texto alternativo.
  • Rely on bolding, italics, or other design formatting to create structure.

Enlaces

Asegúrate de que los visitantes puedan encontrar el propósito de cada enlace únicamente en el texto del enlace. Este formato beneficia a los usuarios de lectores de pantalla que pueden querer pasar de un enlace a otro sin perder el contexto. Aplicar un formato correcto a los enlaces también ayuda a mejorar el SEO. No es necesario incluir la palabra enlace en el texto del enlace. La mayoría de los lectores de pantalla dicen enlace antes de cada enlace. Por ejemplo:

“To reach out, visit our contact page.”
Don't

“Para ponerte en contacto, haz clic aquí”.

Espacios

Asegúrate de que el texto tenga un interlineado adecuado. De esta forma, los visitantes pueden anularlo para adaptarse a sus necesidades y mejorar su experiencia de lectura si es necesario. Puedes controlar el espaciado entre letras y la altura de línea en Estilos del sitio.

Imágenes

Internet es un medio visual donde las imágenes pueden desempeñar un papel importante en la presentación del sitio. Asegúrate de que las imágenes sean accesibles para los visitantes, independientemente de sus habilidades. Es importante tener en cuenta elementos, como el texto alternativo y el formato de las imágenes animadas o .gifs.

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 los gráficos que separan el contenido o las imágenes abstractas de fondo, no requieren descripciones.

  • 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.
Don't
  • 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, tus visitantes pueden desactivar algunas funciones animadas a través de la configuración de su dispositivo. De esta forma, encontrarán menos movimiento cuando visiten tu sitio. Por ejemplo, si un usuario de Mac decide reducir el movimiento de la pantalla en su dispositivo, las animaciones que hayas activado para efectos de imagen de fondo o ilustraciones de fondo no aparecerán animadas para ese visitante.

Colores

Evita depender únicamente del color para transmitir información a los visitantes. Las diferencias de color pueden perderse en personas con deficiencias de visión o color, y el color por sí solo no transmite significado a los visitantes ciegos que utilizan lectores de pantalla. Para cambiar los colores del sitio, utiliza Estilos del sitio.

Puedes usar Developer Tools de Google Chrome o Accessibility Inspector de Firefox para simular cómo aparecen tus páginas para las personas con deficiencias comunes en la visión del color. Ten en cuenta que se trata de herramientas de terceros que quedan fuera del ámbito de soporte de Squarespace.

  • Group colors with high contrast.
Don't
  • Combines colores que sean difíciles de diferenciar, como azul y púrpura.

Videos

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

  • Agrega leyendas sincronizadas con las funciones integradas de leyenda opcionales para YouTube y Vimeo. De esta forma, los espectadores pueden activar o desactivar las leyendas del bloque de video. Visita YouTube y Vimeo para obtener más información sobre cómo agregar leyendas.
  • No agregues más de dos videos de fondo por página. Demasiado movimiento puede causar una experiencia poco grata 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 desees incluir transcripciones en páginas no vinculadas.

Preguntas frecuentes

Is my site accessible?

Los requisitos de accesibilidad difieren en todo el mundo. Eres responsable de asegurarte de que tu sitio cumpla con las leyes aplicables, incluidos los requisitos de accesibilidad locales. La mejor manera de entender la accesibilidad de tu sitio e identificar áreas para mejorar es consultar a un especialista en accesibilidad. También puedes revisar esta lista de comprobación preliminar de accesibilidad web. El soporte técnico de Squarespace no puede proporcionar asesoramiento sobre cómo hacer que tu sitio cumpla con leyes o decretos específicos de accesibilidad web.

Is Squarespace working to improve accessibility?

Sí. Squarespace se toma en serio la accesibilidad. Siempre buscamos mejorar, y este trabajo es continuo. Tenemos el compromiso de hacer que nuestros servicios sean más accesibles para usuarios de todas las capacidades. Estamos revisando nuestros servicios para mejorar la experiencia del usuario y facilitar a nuestros clientes la accesibilidad de sus sitios.

¿Puedo personalizar el contorno de enfoque?

Los sitios de Squarespace en la versión 7.1 tienen una función de delineado de enfoque integrada que resalta elementos de una página, como enlaces de navegación y campos de formulario. El delineado aparece cuando quienes visitan el sitio presionan Tab. La primera vez que presiones Tab, aparecerá el mensaje Saltar al contenido. Presiona la barra espaciadora para omitir el encabezado del sitio y la navegación e ir directamente al contenido del sitio o continúa presionando Tab para navegar a otro contenido. Este delineado de enfoque es estándar en todos los sitios y páginas, y no es posible personalizar el color o el grosor de la línea.

Encabezado de navegación de página con un contorno alrededor de uno de los elementos del menú

¿Fue útil este artículo?
Usuarios a los que les pareció útil: 212 de 265
Hacer que tu sitio de Squarespace sea más accesible