Accesibilidad y rendimiento
Tenora está pensado para que todas las personas puedan usarlo y para cargar rápido en teléfonos. Esta página explica lo que el tema hace por ti y lo que puedes hacer para mantener tu tienda accesible y rápida.
Lo que hace el tema por la accesibilidad
Tenora se evaluó según las Pautas de Accesibilidad para el Contenido Web (WCAG) 2.2, nivel AA, con comprobaciones automáticas y pruebas de teclado en todas las plantillas.
Uso con teclado
- Todos los enlaces, botones, menús, cajones y formularios se pueden usar solo con el teclado.
- Los cajones (menú, carrito, filtros, puntos de retiro, país e idioma) mantienen el foco del teclado dentro mientras están abiertos. La tecla Esc los cierra y el foco vuelve a donde estaba.
- Los puntos de Compra el espacio, el formulario "¿Cabe?", el zoom de imagen y el selector cm/in funcionan con el teclado.
- Cuando un cliente elimina un artículo del carrito, el foco pasa al siguiente artículo o al título del carrito.
Foco visible
Cuando un cliente recorre la página con la tecla Tab, el elemento con el foco tiene un contorno claro. El orden del foco sigue el orden de la página.
Enlace para saltar al contenido
La primera vez que un cliente pulsa Tab, aparece el enlace Ir al contenido. Salta el encabezado y lleva al contenido principal de la página.
Movimiento reducido
Algunas personas activan la opción "reducir movimiento" en su dispositivo. Para estos clientes, el tema:
- desactiva las animaciones y las transiciones, como la aparición gradual de las secciones
- detiene la rotación automática de la barra de anuncios
- desactiva el desplazamiento suave
Contraste de color
- Todos los colores de texto y de fondo de los ajustes preestablecidos Tenora, Terrace y Lantern cumplen una relación de contraste de al menos 4.5:1 (WCAG AA). Los bordes y los íconos cumplen al menos 3:1.
- Los mensajes de error y de confirmación usan el color de texto del esquema de colores con un ícono de color. Se leen bien en cualquier esquema de colores.
- Si cambias los colores, mantén una relación de contraste de al menos 4.5:1 entre el texto y el fondo. Puedes revisar un par de colores con cualquier verificador de contraste en línea.
Lectores de pantalla
- Las páginas usan títulos y puntos de referencia (landmarks) correctos, como el encabezado, el contenido principal y el pie de página.
- Los precios, los precios unitarios, los precios de oferta y los estados de inventario tienen etiquetas claras para los lectores de pantalla.
- Se anuncian los resultados de "¿Cabe?" y el número de países que encuentra la búsqueda de países.
- Los botones y los campos de formulario tienen etiquetas, también en los 30 idiomas traducidos.
- Las áreas táctiles miden al menos 24 x 24 píxeles.
Dirección del texto e idioma
El idioma de la página y la dirección del texto dependen del idioma de la tienda. Los idiomas de derecha a izquierda se reflejan automáticamente. Consulta Vender a nivel internacional.
Lo que puedes hacer: texto alternativo
El texto alternativo describe una imagen para las personas que no pueden verla. Los lectores de pantalla lo leen en voz alta y los buscadores lo usan.
Dónde agregar texto alternativo
- Imágenes de producto: abre un producto en el panel de control de Shopify, selecciona una imagen y selecciona Agregar texto alternativo (Add alt text).
- Imágenes de secciones y archivos: ve a Contenido → Archivos, selecciona la imagen y edita su texto alternativo.
- Imágenes de colección: abre la colección en el panel de control de Shopify y edita la imagen.
Cómo escribir un buen texto alternativo
- Describe lo que muestra la imagen y por qué es importante. Por ejemplo: "Mesa de comedor de roble con seis sillas de lino en una habitación luminosa".
- Sé breve, normalmente una frase.
- No empieces con "Imagen de" o "Foto de".
- Incluye detalles que ayuden a elegir, como el color, el material o el tamaño.
- No repitas el título del producto si la imagen no aporta nada nuevo. En su lugar, describe la vista, por ejemplo "Vista lateral con las finas patas de roble".
Lo que hace el tema automáticamente
- En la galería del producto, las imágenes de producto sin texto alternativo usan el título del producto.
- Algunas imágenes son decorativas, como las imágenes de material de las tarjetas de Materiales y cuidados y la imagen de la muestra junto a su título. El tema las oculta a los lectores de pantalla, porque el texto que las acompaña ya las nombra.
- El logo usa el nombre de la tienda cuando la imagen del logo no tiene texto alternativo.
Lo que hace el tema por la velocidad
- Las páginas se generan en el servidor. El tema usa poco JavaScript, y cada sección carga su propio script solo cuando la sección está en la página. Por ejemplo, el script de "¿Cabe?" solo se carga en productos con medidas.
- Los estilos específicos de cada página, como los de la página de producto y los de los filtros, solo se cargan en las páginas que los usan.
- Las imágenes se cargan en varios tamaños, así que cada dispositivo descarga el tamaño que necesita. Las imágenes que están debajo de la primera pantalla solo se cargan cuando el cliente se desplaza cerca de ellas.
- La primera imagen grande de la página (por ejemplo, el banner con imagen) se carga primero, para que la página parezca lista antes.
- Los videos de YouTube y Vimeo solo se cargan cuando el cliente los reproduce.
- Los productos relacionados se cargan cuando el cliente se desplaza cerca de ellos.
- Las fuentes vienen de la biblioteca de fuentes de Shopify y muestran el texto de inmediato mientras se carga la fuente.
Lo que puedes hacer: mantener tu tienda rápida
Usa los tamaños de imagen adecuados
Shopify ajusta el tamaño de las imágenes para cada dispositivo, pero una buena imagen original ayuda. Usa estos tamaños:
| Dónde | Tamaño recomendado |
|---|---|
| Banner con imagen | .jpg de 2400 x 1350px |
| Banner con imagen, imagen para móviles (opcional) | .jpg de 1080 x 1350px |
| Imagen con texto | .jpg de 1500 x 1875px |
| Compra el espacio | Formato 3:2, por ejemplo .jpg de 2400 x 1600px |
| Promoción del megamenú | Formato 4:3 |
| Imagen de portada del video | Formato 16:9 |
| Imágenes de producto | Al menos 2000px en el lado más largo, todas con la misma forma |
| Lista de logos | .png o .svg transparente |
| Favicon | .png de 32 x 32px |
Consejos
- Usa .jpg para fotos y .png o .svg para logos.
- Comprime las fotos antes de subirlas. Intenta que cada foto pese menos de 500 KB.
- Define un punto focal en las imágenes importantes. En el editor de temas, selecciona la imagen y elige el punto focal. Tenora lo usa cuando recorta la imagen.
Instala menos aplicaciones
Muchas aplicaciones agregan sus propios scripts y estilos a todas las páginas, aunque no los veas. Esto puede hacer más lenta tu tienda.
- Tenora ya incluye medidas, "¿Cabe?", materiales, muestras, detalles de entrega y Compra el espacio. No necesitas una aplicación para estas funciones.
- Elimina las aplicaciones que no uses. Después de desinstalar una aplicación, comprueba que no haya dejado código en tu tema. Si lo dejó, ponte en contacto con el desarrollador de la aplicación.
- Antes de instalar una aplicación, revisa la velocidad de tu tienda. Vuelve a revisarla después de la instalación.
Usa los videos con cuidado
- Agrega una Imagen de portada a la sección Video. La imagen de portada se muestra hasta que el cliente reproduce el video, y el reproductor solo se carga en ese momento.
- Mantén cortos los videos alojados en Shopify y usa un tamaño de archivo razonable.
- No uses un video como primer elemento de la página de inicio si una imagen cumple la misma función. Las imágenes cargan más rápido.
Mantén la página de inicio enfocada
Cada sección agrega contenido que hay que descargar. Usa las secciones que más ayudan a los clientes y elimina las que no necesites.
Revisa tu velocidad
En el panel de control de Shopify, ve a Tienda online → Temas y consulta el informe de velocidad de tu tienda. Revísalo después de cambios importantes, como nuevas aplicaciones o nuevas secciones en la página de inicio.