Accesibilidad en Shopify: los errores comunes y dónde se corrigen

Todos los sitios Shopify 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 Shopify. Donde dice "tema", es código, y el HTML corregido es lo que necesita tu desarrollador.

1. 1. Imágenes sin descripción

   Se arregla en el editor, sin código

   El 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 Shopify
   Sin desarrollador: Productos → producto → clic en la imagen → "Agregar texto alternativo". Para imágenes del tema: Tienda online → Temas → Personalizar → clic en la sección de la imagen → Texto alternativo.

   Cómo corregir: Imágenes sin descripción →

2. 2. Texto difícil de leer

   Se arregla en el editor, sin código

   Hay 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 Shopify
   Tienda online → Temas → Personalizar → Configuración del tema → Colores: elige un color de texto más oscuro para esa sección.

   Cómo corregir: Texto difícil de leer →

3. 3. Enlaces que no dicen a dónde llevan

   Se arregla en el editor, sin código

   Enlaces 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 Shopify
   Tienda online → Navegación → edita el texto del elemento del menú. Para enlaces de ícono, el tema necesita una etiqueta (código abajo).

   Cómo corregir: Enlaces que no dicen a dónde llevan →

4. 4. Campos de formulario sin etiqueta

   Se arregla en el editor, sin código

   En 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 Shopify
   Las etiquetas del formulario de contacto vienen del tema: Personalizar → sección Formulario de contacto, o código abajo.

   Cómo corregir: Campos de formulario sin etiqueta →

5. 5. La página no declara su idioma

   Se arregla en el editor, sin código

   El 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 Shopify
   Configuración → Idiomas → asegúrate de que el idioma predeterminado coincide con el contenido de tu tienda.

   Cómo corregir: La página no declara su idioma →

6. 6. La página no tiene título

   Se arregla en el editor, sin código

   La 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 Shopify
   Tienda online → Preferencias → Título de la página de inicio; por producto/página: baja a "Listado en motores de búsqueda" → Editar → Título de la página.

   Cómo corregir: La página no tiene título →

7. 7. Títulos fuera de orden

   Se arregla en el editor, sin código

   Los 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 Shopify
   Tienda online → Temas → Personalizar → cada sección tiene una opción de "tamaño/nivel del encabezado" en la mayoría de temas.

   Cómo corregir: Títulos fuera de orden →

8. 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 Shopify
   En Shopify esto está en el código del tema: Tienda online → Temas → ⋯ → Editar código. Envía el código de abajo a quien te hizo el tema, o usa el Editor de temas si existe el ajuste.

   Cómo corregir: Botones demasiado pequeños para tocar →

9. 9. Videos sin subtítulos

   Se arregla en el editor, sin código

   Los clientes sordos no reciben nada de tus videos.

   personas sordas

   Dónde en Shopify
   Sube el video con subtítulos a YouTube/Vimeo e incrústalo, o añade un archivo .vtt en Contenido → Archivos y referéncialo en el tema.

   Cómo corregir: Videos sin subtítulos →

10. 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 Shopify
    En Shopify esto está en el código del tema: Tienda online → Temas → ⋯ → Editar código. Envía el código de abajo a quien te hizo el tema, o usa el Editor de temas si existe el ajuste.

    Cómo corregir: El zoom está bloqueado en el celular →

11. 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 Shopify
    En Shopify esto está en el código del tema: Tienda online → Temas → ⋯ → Editar código. Envía el código de abajo a quien te hizo el tema, o usa el Editor de temas si existe el ajuste.

    Cómo corregir: Botones sin nombre →

12. 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 Shopify
    En Shopify esto está en el código del tema: Tienda online → Temas → ⋯ → Editar código. Envía el código de abajo a quien te hizo el tema, o usa el Editor de temas si existe el ajuste.

    Cómo corregir: La página no tiene un título principal →

Preguntas que hace la gente

¿Shopify 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 Shopify?

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 Shopify?

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.