Accesibilidad

Enlaces destacados

1. Documentación de W3C sobre las Pautas de Accesibilidad para el Contenido Web
2. Documentación de Shopify sobre accesibilidad para temas
3. Documentación para desarrolladores de Shopify sobre accesibilidad de temas
4. Relación de contraste
5. Documentación de Shopify sobre el editor de texto enriquecido
6. Documentación de Shopify sobre cómo añadir texto alternativo a las imágenes de productos
7. Documentación de Shopify sobre cómo añadir texto alternativo a las imágenes del tema
8. Artículo de The A11Y Project sobre los trastornos vestibulares
9. Documentación de W3C sobre texto a voz

Videos útiles

Artículo del Centro de ayuda de Vimeo sobre subtítulos

Cuando personalizas Align en Shopify y añades contenido a la tienda, las decisiones de diseño accesible ayudan a que más clientes puedan usar tu tienda online, incluidas las personas con discapacidades.

Estas recomendaciones se basan en las Pautas de Accesibilidad para el Contenido Web (WCAG). La accesibilidad depende de muchos factores, por lo que seguir únicamente estas pautas no garantiza que tu tienda sea totalmente accesible. Para obtener orientación adicional, consulta los recursos de accesibilidad de Shopify.

Consejo

Para obtener orientación avanzada sobre la accesibilidad de los temas, visita Shopify.dev

Accesibilidad del texto

El texto claro y legible ayuda a los clientes con visión reducida y a quienes tienen dificultades para leer contenido denso.

Contraste de color

Usa un contraste suficiente entre el texto y su fondo para que los clientes puedan distinguir el contenido, incluidas las personas daltónicas o con visión reducida. Comprueba las combinaciones de colores con una herramienta de relación de contraste online.

Por ejemplo, un texto con una relación de contraste de 2.4:1 puede ser difícil de leer para algunos clientes, mientras que una relación de 4.8:1 es más fácil de leer para muchas personas. Comprueba el texto del cuerpo, los encabezados, los enlaces, los campos de formulario y el texto colocado sobre imágenes.

1. Usa una relación de contraste de al menos 4.5:1 para el texto del cuerpo y el texto de los botones.
2. Usa una relación de contraste de al menos 3:1 para los encabezados y otros textos grandes de 24 px o más.
3. Asegúrate de que el texto sobre imágenes, presentaciones, banners y videos cumpla la relación adecuada: al menos 3:1 para texto grande y 4.5:1 para texto más pequeño.
4. Usa una relación de contraste de al menos 3:1 para elementos que no sean texto, como bordes de campos de entrada e iconos.

Consejo

Si Align incluye una opción de superposición de imagen para el contenido que estás editando, úsala detrás del texto sobre una imagen para mejorar el contraste y la legibilidad.

Encabezados de texto

Usa los niveles de encabezado en secuencia cuando añadas encabezados con el editor de texto enriquecido. Las tecnologías de asistencia usan los encabezados para comunicar cómo está organizada una página, por lo que pasar del nivel de encabezado 2 al nivel 4 puede resultar confuso.

1. Usa los niveles de encabezado en orden secuencial sin omitir niveles.

Tamaño y alineación del texto

Elige tamaños de texto que los clientes puedan leer cómodamente y mantén un espaciado uniforme entre palabras y letras. Evita la alineación justificada, ya que puede crear espacios irregulares entre las palabras.

1. Establece el texto del cuerpo en un tamaño equivalente a un mínimo de 16 px.
2. Usa texto alineado a la izquierda en lugar de texto justificado.

Nota

Las familias tipográficas pueden parecer más grandes o más pequeñas con el mismo tamaño. Si una fuente parece más pequeña que otras fuentes de 16 px, elige un tamaño mayor.

Enlaces de texto

Haz que los enlaces sean identificables sin depender únicamente del color. Subrayar los enlaces o usar otra distinción visual clara respecto al texto normal ayuda a los clientes que tienen dificultades para percibir los cambios de color.

1. Subraya los enlaces de texto o dales otro diferenciador visual claro respecto al texto que los rodea.

Texto alternativo para imágenes

El texto alternativo ayuda a los clientes ciegos o con visión reducida a comprender el contenido de las imágenes mediante lectores de pantalla. Añade texto alternativo preciso a cada imagen significativa.

Puedes añadir texto alternativo a las imágenes de productos en el panel de control de Shopify. Puedes añadir texto alternativo a otras imágenes del tema en el editor de temas.

Escribe el texto alternativo como si describieras la imagen a alguien con los ojos cerrados. Describe los detalles importantes en el contexto de la página y de tu negocio. Por ejemplo, una agencia de viajes podría describir la ubicación y el paisaje de una imagen, mientras que una tienda de equipamiento para actividades al aire libre podría centrarse en las marcas y las características de las mochilas que aparecen.

Para una agencia de viajes, “Dos personas frente al océano” ofrece pocos detalles útiles. “Dos amigos de viaje en Lagos, Portugal, contemplando la cala de arena de Praia do Camilo en un día soleado” es más descriptivo.

Añadir texto alternativo a las imágenes del tema

1. Desde el panel de control de Shopify, ve a Online Store > Themes
2. Busca el tema Align que quieres editar y haz clic en Customize.
3. En la barra lateral del editor de temas, selecciona la sección que contiene la imagen.
4. Selecciona Edit en la imagen.
5. Introduce el texto alternativo en el cuadro de diálogo y haz clic en Save.
6. Haz clic de nuevo en Save para guardar los cambios del tema.

Accesibilidad de presentaciones y videos

Ten en cuenta a los clientes con visión reducida, a los clientes sordos o con dificultades auditivas y a los clientes que puedan ser susceptibles a trastornos vestibulares al añadir presentaciones y videos.

Algunos clientes usan la función de texto a voz de los lectores de pantalla, y el audio o la música inesperados de un video pueden dificultar el uso de una página. Los subtítulos ayudan a los clientes sordos o con dificultades auditivas a acceder al contenido de video. El contenido en movimiento puede causar mareos a los clientes con trastornos vestibulares.

Presentaciones

1. No configures las presentaciones para que se reproduzcan automáticamente.
2. Si una presentación se reproduce automáticamente, proporciona un ajuste que los clientes puedan usar para pausarla o detenerla.

Videos

1. No configures los videos para que se reproduzcan automáticamente.
2. Si un video se reproduce automáticamente, silencia su audio.
3. Mantén los videos con audio completamente visibles y sin obstrucciones para que los subtítulos permanezcan visibles.
4. Proporciona transcripciones de texto para los videos con diálogo, ya sea en la página o mediante un enlace a una página independiente.
5. Aplica estas pautas también a los videos incluidos en las presentaciones.

Compatibilidad con el teclado

Los clientes con discapacidades visuales o motrices pueden usar un teclado para navegar y completar tareas. Un indicador visual claro de enfoque muestra qué elemento de la página está seleccionado en ese momento, como un campo de Email.

1. Asegúrate de que cada elemento interactivo tenga un indicador visual claro del enfoque mediante el teclado, incluidos los enlaces, los botones y los campos de formulario.