Accesibilidad en Squarespace: los errores comunes y dónde se corrigen
Todos los sitios Squarespace que escaneamos comparten el mismo puñado de fallos. Aquí va cada uno: qué es, a quién deja fuera y dónde se corrige en Squarespace. Donde dice "tema", es código, y el HTML corregido es lo que necesita tu desarrollador.
1. Imágenes sin descripción
Se arregla en el editor, sin códigoEl lector de pantalla de una persona ciega dice "imagen" y nada más. Si la imagen es un producto, una promo o un botón, esa persona no sabe qué es.
personas ciegas (lector de pantalla)
Dónde en Squarespace
Edita la página → clic en la imagen → Editar → "Texto alternativo de la imagen" (o el pie de foto en algunos bloques).2. Texto difícil de leer
Se arregla en el editor, sin códigoHay textos demasiado claros sobre su fondo. Personas con baja visión, clientes mayores y cualquiera con el celular al sol no los pueden leer. Es el hallazgo más común en demandas de accesibilidad.
personas con baja visión · quien entra desde el celular
Dónde en Squarespace
Diseño → Estilos del sitio → Colores: elige un color de texto más oscuro para el tema de esa sección.3. Enlaces que no dicen a dónde llevan
Se arregla en el editor, sin códigoEnlaces tipo "clic aquí" o una imagen sin texto se leen como "enlace". Quien usa lector de pantalla navega saltando entre enlaces, así que estos son callejones sin salida.
personas ciegas (lector de pantalla)
Dónde en Squarespace
Edita la página → clic en el enlace o botón → cambia el texto para que diga a dónde lleva.4. Campos de formulario sin etiqueta
Se arregla en el editor, sin códigoEn tus formularios (compra, contacto, registro) hay campos que no dicen qué va ahí. Un cliente ciego escucha "cuadro de texto" y no puede terminar la compra.
personas ciegas (lector de pantalla) · personas con discapacidad cognitiva
Dónde en Squarespace
Edita el bloque de formulario → cada campo → Etiqueta. Desactiva "ocultar etiqueta".5. La página no declara su idioma
Se arregla en el editor, sin códigoEl lector de pantalla adivina el idioma y lee el español con voz en inglés (o al revés): no se entiende nada.
personas ciegas (lector de pantalla)
Dónde en Squarespace
Ajustes → Idioma y región → Idioma del sitio.6. La página no tiene título
Se arregla en el editor, sin códigoLa pestaña del navegador sale vacía y el lector de pantalla no puede decir en qué página está. También perjudica en Google.
personas ciegas (lector de pantalla) · personas con discapacidad cognitiva
Dónde en Squarespace
Páginas → engranaje de la página → SEO → Título SEO; para todo el sitio: Ajustes → Título del sitio.7. Títulos fuera de orden
Se arregla en el editor, sin códigoLos títulos saltan niveles (como un documento que pasa del capítulo 1 a la sección 1.1.1). El esquema de la página deja de tener sentido para el lector de pantalla.
personas ciegas (lector de pantalla) · personas con discapacidad cognitiva
Dónde en Squarespace
Edita el bloque de texto → selecciona el título → elige Título 2 / 3 en orden.8. Botones demasiado pequeños para tocar
Necesita el tema (código)Algunos botones o enlaces son más pequeños que la yema de un dedo. Clientes mayores y personas con temblor no aciertan.
personas que no pueden usar el mouse · quien entra desde el celular
Dónde en Squarespace
En Squarespace esto necesita CSS personalizado (Diseño → CSS personalizado) o inyección de código. Pega ahí el código de abajo, o envíaselo a tu diseñador.9. Videos sin subtítulos
Necesita el tema (código)Los clientes sordos no reciben nada de tus videos.
personas sordas
Dónde en Squarespace
En Squarespace esto necesita CSS personalizado (Diseño → CSS personalizado) o inyección de código. Pega ahí el código de abajo, o envíaselo a tu diseñador.10. El zoom está bloqueado en el celular
Necesita el tema (código)Tu sitio prohíbe agrandar con los dedos. Quien necesita ver más grande no puede.
personas con baja visión · quien entra desde el celular
Dónde en Squarespace
En Squarespace esto necesita CSS personalizado (Diseño → CSS personalizado) o inyección de código. Pega ahí el código de abajo, o envíaselo a tu diseñador.11. Botones sin nombre
Necesita el tema (código)Los botones que son solo un ícono (menú, carrito, cerrar) se leen como "botón" y ya. Un cliente ciego no distingue el carrito del botón de cerrar.
personas ciegas (lector de pantalla) · personas que no pueden usar el mouse
Dónde en Squarespace
En Squarespace esto necesita CSS personalizado (Diseño → CSS personalizado) o inyección de código. Pega ahí el código de abajo, o envíaselo a tu diseñador.12. La página no tiene un título principal
Necesita el tema (código)Las personas ciegas navegan por títulos; sin uno principal la página no tiene punto de partida.
personas ciegas (lector de pantalla) · personas con discapacidad cognitiva
Dónde en Squarespace
En Squarespace esto necesita CSS personalizado (Diseño → CSS personalizado) o inyección de código. Pega ahí el código de abajo, o envíaselo a tu diseñador.
Preguntas que hace la gente
- ¿Squarespace es accesible de fábrica?
- La plataforma en sí sigue las pautas razonablemente bien; los fallos vienen del tema, de las apps o plugins y del contenido (fotos subidas sin descripción). Un escaneo de tu propio sitio te dice cuáles.
- ¿Necesito un desarrollador para arreglar la accesibilidad en Squarespace?
- Para la mayoría no: texto alternativo, títulos de página, encabezados, texto de enlaces, colores y etiquetas de formulario son ajustes. Los menús que ignoran el teclado, las ventanas que atrapan el foco y los iconos-enlace sin nombre viven en el tema; para eso hace falta el código corregido.
- ¿Una app o widget de accesibilidad arregla Squarespace?
- No. Un widget cambia lo que ve el visitante en el navegador; el tema y las fotos siguen como estaban, y las demandas citan el código.