Qué señalan de verdad las reclamaciones de accesibilidad contra tiendas Shopify.

La lista corta

Lee cien cartas de reclamación (demand letters) y salen siempre las mismas cosas, porque se encuentran escaneando y el escaneo encuentra lo que puede contar. Más o menos por orden de frecuencia:

1. Imágenes sin texto alternativo (alt text). Cada foto de producto, cada banner. El fallo que más se nombra.
2. Enlaces sin nombre accesible. Muestras de color y de metal, enlaces en imágenes, “leer más”, iconos de redes sociales. Para un lector de pantalla, cada uno es la palabra “enlace” y nada más.
3. Botones sin nombre accesible. El icono del carrito, el de búsqueda, el menú de hamburguesa, los botones de cerrar de las ventanas emergentes.
4. Campos de formulario sin etiqueta. Cajas de búsqueda, altas de newsletter, campos de cantidad.
5. Poco contraste de color. Texto gris sobre blanco, y cualquier texto encima de una foto.
6. Trampas de teclado y foco invisible. Un menú o un panel del carrito en el que entras con el tabulador y no puedes salir, o un contorno de foco que el tema ha desactivado.
7. Sin enlace para saltar el menú, sin regiones (landmarks) de página. Quien usa el teclado tiene que pasar por toda la cabecera en cada página.
8. Controles demasiado pequeños para tocarlos. Muestras e iconos por debajo de 24 píxeles.
9. Sin declaración de accesibilidad. No es un fallo del código, pero su ausencia se nota.

Por qué los temas de Shopify los tienen

No porque Shopify lo haga mal. Los temas principales salen en un estado decente. Los fallos llegan después, de tres sitios.

• La personalización. Muestras, etiquetas, secciones a medida y el botón de “añadir rápido” que alguien copió de un tutorial. Cada uno es una oportunidad de crear un control sin nombre.
• Las aplicaciones. Reseñas, listas de deseos, ventanas emergentes, chats y guías de tallas meten su propio código, y sus propios fallos, en cada página.
• El contenido. Nadie escribe el texto alternativo de 2,000 imágenes de producto un martes cualquiera. Así que el campo se queda vacío, o le ponen el nombre del archivo.

¿De quién es el código? En casi todos los planes de Shopify el checkout es código de Shopify y no lo puedes cambiar. Todo lo anterior al checkout es tuyo: tema, secciones, aplicaciones, contenido. Una reclamación nombrará los dos. Tu abogado necesita saber cuál es cuál, y una auditoría se lo dice.

Nuestro consejoEscribe a cada proveedor de aplicaciones al que pagas y pídele su declaración de accesibilidad. Los que responden en un día suelen estar bien. El silencio te dice qué aplicación probar primero.

Cómo comprobarlo esta noche

1. Haz la revisión gratuita. Pega la dirección de tu tienda y obtén las trece comprobaciones automáticas con sus cuentas. Tarda cerca de un minuto.
2. Suelta el ratón. En una página de producto, pulsa el tabulador varias veces. ¿Ves dónde estás? ¿Puedes llegar al botón de añadir al carrito, abrir el carrito y volver a salir?
3. Enciende el lector de pantalla del móvil. VoiceOver en iPhone, TalkBack en Android. Abre una página de colección y desliza por los productos. Escucha si suena la palabra “enlace” sin nada detrás.
4. Amplía al 200 por ciento. ¿Se solapa algo, desaparece o deja de funcionar?
5. Abre cinco imágenes de producto y lee su texto alternativo. En el panel de Shopify, cada imagen tiene un campo para eso. Vacío es vacío.

Nuestro consejoHaz la prueba del móvil en la página de tu producto más vendido y en su colección, no en la de inicio. Son las páginas que una reclamación tiene más probabilidades de nombrar, porque es adonde van también los escáneres. Y pruébalo con el panel del carrito abierto; ahí es donde viven las trampas de teclado.

Si las dos primeras encuentran problemas, la revisión automática también los encontrará, y ya tienes una lista. Si no encuentran nada, vas por delante de la mayoría de tiendas, y lo que queda es el trabajo manual que cubre una auditoría.

Qué los arregla

Un nombre para cada enlace y cada botón, en las plantillas del tema. Una etiqueta para cada campo. Texto alternativo para cada imagen, escrito una vez y subido en bloque. Una revisión de contraste del texto sobre fotos. Un enlace para saltar el menú y regiones, que son cambios pequeños. Después, volver a probar con teclado y lector de pantalla, y una página de declaración que diga qué se hizo y cómo avisar de un problema. Nunca un widget de accesibilidad (overlay): no cambian el código que señala una reclamación.

Nuestro consejoArregla primero la plantilla de la tarjeta de producto. Se repite en cada página de colección, así que un solo cambio cierra cientos de hallazgos de golpe. En la tienda de nuestro primer caso, una línea en esa plantilla llevó 490 enlaces sin nombre a cero.