Mejora la usabilidad de tu sitio para las personas con deficiencias.

Puedes personalizar muchos aspectos de tu sitio para hacerlo más accesible y fácil de navegar para todos los visitantes, incluidos los que tienen discapacidades o emplean lectores de pantalla y otras tecnologías de asistencia.

Usa esta guía para aprender las mejores prácticas para diseñar y estructurar tu contenido.

También prueba: Haz que tu sitio sea accesible con funciones integradas

Nota: Esta guía es un recurso, pero no constituye un asesoramiento legal. Squarespace no ofrece asesoramiento sobre leyes o estándares de accesibilidad específicos aplicables a tu sitio o negocio, como se establece en nuestras Condiciones de Uso.

Diseño

Crear tu sitio web con un diseño claro es importante para las personas con baja visión o con discapacidades cognitivas. Sin embargo, un diseño sencillo y congruente también puede beneficiar a los visitantes que no tienen muchas habilidades con las computadoras o a los visitantes que ven tu sitio en una pantalla más pequeña, como un dispositivo móvil. Las diferentes partes de tu sitio web, como los menús de navegación, los enlaces y las secciones de texto, deben ser claramente identificables.

Navegación por teclado

Algunos visitantes pueden usar un teclado para navegar por tu sitio en lugar de un mouse. La accesibilidad del teclado también es importante para ciertas tecnologías de asistencia, como el reconocimiento de voz y los lectores de pantalla. Te recomendamos que pruebes la accesibilidad de tu sitio tratando de navegar por él usando solo el teclado.

Personalización del delineado de enfoque

Aunque los sitios en la versión 7.1 de Squarespace tienen una función de delineado de foco que destaca los elementos de una página (como los enlaces de navegación y los campos de formularios) el delineado del foco es estándar en todos los sitios y las páginas. 

No es posible personalizar el color ni el grosor de la línea. El delineado aparece cuando los visitantes presionan Tab en su teclado. 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.

Nota: verifica que tu navegador esté actualizado para evitar problemas con la función de delineado de enfoque. Sigue estos pasos para actualizar la versión de tu navegador.

Atajos de teclado de Squarespace

Obtén más información sobre los atajos de teclado que puedes usar al gestionar y editar tu sitio.

Editor dinámico

Al editar las secciones de Editor dinámico, ten en cuenta estas prácticas recomendadas:

• Si los bloques se solapan, verifica que los usuarios puedan seguir viendo y usando el contenido de todos los bloques.
• Piensa en cómo podrían interactuar los distintos bloques. Por ejemplo, si tienes un bloque de formulario, es posible que no quieras colocar un bloque de botones encima, porque los visitantes no sabrán qué botón sirve para enviar el formulario.
• Si vas a colocar texto sobre otro tipo de contenido, asegúrate de que sea legible. Esto podría significar agregar un fondo de color a un bloque, cambiar el color del texto para que destaque en una imagen o mover el texto a un lugar donde aún se pueda leer.

Lenguaje claro y conciso

Al crear contenido del sitio, es importante tener en cuenta la accesibilidad. Esto abarca el idioma que usas, la estructura del texto y la forma en que organizas el contenido de tu sitio. Un texto bien organizado, breve y claro es útil para todos los visitantes, especialmente aquellos con discapacidad.

Cuando redactes para tu sitio, considera los siguientes consejos:

• Usa un lenguaje y un formato claros.
• Escribe frases y párrafos concisos.
• Evita usar jerga y palabras y frases innecesariamente complejas.
• Explica los acrónimos en el primer uso. Por ejemplo, Dominio de nivel superior (TLD).
• Usa listas con viñetas cuando sea apropiado.
• Considera usar imágenes, videos y audios para ayudar a aclarar el significado.

Títulos

Lo primero que comunican los lectores de pantalla cuando los visitantes van a una nueva página web es un título. Si la página tiene un título para SEO, los lectores de pantalla lo leerán y omitirán el título de la página. Si una página no tiene un título para SEO, los lectores de pantalla leerán el título de la página.

Proporcionar un título de página breve, específico y único ayuda a los usuarios que navegan mediante la tecnología de asistencia a comprender rápidamente el contenido y el propósito de una página web.

Mejores prácticas para títulos

Al redactar tus títulos, puedes considerar lo siguiente:

• Presenta el tema y el propósito de la página.
• El título de cada página debe ser único y diferenciar la página de otras páginas de tu sitio.
• Pon primero la información única y más relevante. Por ejemplo, “Guía de accesibilidad” en lugar de “Una guía sobre accesibilidad”.

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. Los motores de búsqueda también utilizan encabezados para comprender mejor tus contenidos, así que utilizarlos es una buena idea para impulsar la SEO de tu sitio.

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

Listas

Organiza el diseño de tu texto usando listas y encabezados. Las listas ayudan a mostrar cuándo partes del contenido están relacionadas entre sí, como un grupo de enlaces o una serie de ejemplos. Formatear tu texto como una lista:

• Hará que sea más fácil navegar por tu contenido.
• Ayudará a los visitantes con discapacidades cognitivas a entender tu contenido.

Enlaces

Describe claramente el propósito de cada enlace en el texto del enlace para que los visitantes con lectores de pantalla puedan saltar entre enlaces sin perder contexto. Aplicar un formato correcto a los enlaces también ayuda a mejorar la 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:

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.

Colores

Puedes personalizar los colores de tu sitio usando estilos del sitio. Sin embargo, evita depender únicamente del color para transmitir información a tus visitantes. Las personas con poca visión o deficiencias de color pueden pasar por alto las diferencias de color. Además, el color por sí solo no transmite significado a los visitantes ciegos que usan lectores de pantalla.

Puedes usar las Herramientas de desarrollo de Google Chrome o Accessibility Inspector de Firefox para simular cómo aparecen tus páginas para las personas con los trastornos para ver los colores más comunes.

Nota: ten en cuenta que se trata de herramientas de terceros que quedan fuera del ámbito de atención al cliente de Squarespace.

Formularios

Los formularios pueden ser un desafío para algunos visitantes. Es importante asegurarse de que cada campo esté claramente etiquetado y que el formulario sea fácil de navegar. Usa un bloque de texto para incluir instrucciones breves que informen a los visitantes exactamente lo que necesitan saber para completar el formulario de manera apropiada.

Puedes incluir marcadores de posición con texto que aparezca en los campos del formulario como ejemplo para los visitantes. De esta manera, los visitantes tienen una mejor idea de cómo deben completar el formulario. Ten en cuenta que el texto del marcador de posición no debería reemplazar el texto de la etiqueta. Puedes leer más sobre el texto del marcador de posición en nuestro foro.