Cómo crear contenidos accesibles para tu sitio

Consejos sobre cómo crear contenidos claros y concisos para tu sitio.

Última actualización: 15 de julio de 2024

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.

Esta guía proporciona consejos sobre cómo redactar contenido y organizar tu sitio teniendo en cuenta la accesibilidad.

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.

Lenguaje claro y conciso

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, video y audio para ayudar a aclarar el significado.

Títulos

Lo primero que los lectores de pantalla comunican cuando los visitantes van a una nueva página web es un título. Si la página tiene un título de SEO, los lectores de pantalla lo leerán y se saltarán el título de la página. Si una página no tiene un título de 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 los 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”.
  • Para las páginas que forman parte de un proceso de varios pasos, incluye el paso actual en el título. Por ejemplo, “Elige el color de tu producto (Paso 2 de 3) - Empresa ABC”.

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.

  • Utiliza encabezados basados en la importancia del texto. Por ejemplo, utiliza el Encabezado 1 (H1) para los encabezados más importantes.
  • Crea un título/encabezado 1 por página.
  • Usa encabezados cortos para agrupar párrafos relacionados y describir claramente las secciones.
  • Utiliza la barra de herramientas de texto para dar formato al texto como encabezados.
No
  • Usa encabezados fuera de secuencia. Tus opciones de encabezados van desde H1-H6, y los lectores de pantalla las leen en orden.
  • Utiliza el texto insertado en las imágenes para transmitir significado a menos que también añadas texto alternativo.
  • Dependas de las negrita, cursivas u otro formato de diseño para crear una estructura.
  • Uses encabezados sin contenido asociado solo para darle estilo al texto. Hacerlo hace que la estructura de la página sea poco clara y más difícil de entender. 
  • Ajustes el estilo al texto para que parezca un encabezado si no pretendes que sea un encabezado. Hacerlo puede confundir a los visitantes y evitar que aquellos que usan tecnología de asistencia naveguen rápidamente por 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.

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:

“Para comunicarte, visita nuestra página de contacto”.
No “Para ponerte en contacto, haz clic aquí”.

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.
  • Usa listas numeradas cuando el orden del contenido sea importante.
No
  • Usa listas para contenido que no esté en una lista (como una tabla de datos o solo para fines de estilo).

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.

Agrupa colores con alto contraste.
No Combines colores que sean difíciles de diferenciar, como azul y púrpura.

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 de marcador de posición en nuestro foro.

Nota

Las modificaciones personalizadas del código están fuera del alcance de nuestro soporte. Esto significa que no podemos ayudarte más con la configuración o la solución de problemas. Además, con una solución basada en un código, no podemos garantizar su funcionamiento o la compatibilidad total con Squarespace. Esto incluye cómo funciona con nuestro diseño adaptable, en especial su aspecto en dispositivos móviles y sus funciones en todas las plantillas. El código personalizado también pueden ocasionar problemas de visualización con actualizaciones futuras de nuestra plataforma. Aunque no podemos ayudarte más, hay muchos recursos que te pueden orientar en la dirección correcta:

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.

Cómo crear contenidos accesibles para tu sitio