Accesibilidad para temas

Cuando personalices tu tema, es una buena idea elegir diseños y contenido que te ayuden a mantener tu tienda online accesible. Un sitio web accesible está diseñado para que cualquiera pueda usarlo, incluidas las personas con discapacidades. La accesibilidad para tu tienda online es esencial a fin de brindar una experiencia inclusiva para tus clientes.

Las siguientes pautas se crearon teniendo en mente los Lineamientos de accesibilidad para el contenido web (WCAG). Para crear un sitio web accesible se deben considerar muchos factores, por lo que solo seguir estos lineamientos no garantiza que tu tienda online sea completamente accesible. Puedes leer más acerca de la accesibilidad web al visitar el sitio web de WCAG o al consultar los recursos que se enumeran a continuación.

Accesibilidad del texto

Es importante que el texto en tu tienda online sea legible para los clientes con discapacidad visual o que tienen dificultades para leer bloques de texto densos.

Contraste de colores

Cuando edites los colores para tu tienda online, asegúrate de que todo el texto sea accesible para clientes que son daltónicos o que tienen visión reducida. Estos clientes dependen de un contraste de colores adecuado para diferenciar visualmente un elemento de otro. Puedes usar una herramienta de relación de contraste online para verificar el contraste de las diferentes partes de tu tienda.

En el siguiente ejemplo, el texto tiene una relación de contraste de 2.4:1 con su fondo, que resulta difícil de leer para algunos clientes.

Un bloque de texto gris claro y un fondo totalmente blanco.

En el siguiente ejemplo, el texto tiene una relación de contraste de 4.8:1, por lo que la mayoría de los clientes pueden leerlo fácilmente

Un bloque de texto gris oscuro sobre un fondo totalmente blanco.

Prueba el contraste de todo el texto, incluidos el texto del cuerpo, los encabezados, los enlaces y los campos de los formularios. Usa las siguientes pautas:

  • El color del texto del cuerpo y del texto del botón tiene una relación de contraste de al menos 4.5:1 con respecto a su fondo.
  • El color de los encabezados y de otros textos grandes (tamaño de fuente de 24 px y más) tiene una relación de contraste de al menos 3:1 con respecto a su fondo.
  • El color de todo el texto sobre las imágenes, incluidas las presentaciones de diapositivas, los banners y los videos, tiene una relación de suficiente contraste sobre su fondo. Para textos grandes (tamaño de fuente a partir de 24 px), el contraste debe ser mínimo de 3:1. Para textos más pequeños, el contraste debe ser mínimo de 4.5:1.
  • El color de los elementos no textuales, incluidos los límites de entrada e iconos, tienen una relación de contraste de al menos 3:1 con respecto a su fondo.

Títulos de texto

Cuando agregas títulos a tu página con rich text editor, es importante mantenerlos en orden secuencial (1 a 6). Las tecnologías de asistencia utilizan los títulos para comunicar cómo se organiza el contenido de la página. Saltar niveles, como un título de nivel 2 seguido por un título de nivel 4, puede confundir a los usuarios. Utiliza el siguiente lineamiento:

  • Los títulos se utilizan en orden secuencial y no pueden saltar niveles.

Tamaño del texto y alineación

Cuando edites la configuración de la tipografía de tu tema, asegúrate de que tu texto sea lo suficientemente grande para que los clientes puedan leerlo sin problemas.

El texto debe tener un espaciado consistente entre palabras y letras para que sea fácil de leer. En el siguiente ejemplo, la alineación del texto está justificada, lo que crea un espaciado inconsistente entre las palabras.

Un bloque de texto justificado alineado. Cada línea de texto llena el espacio de un extremo a otro, forzando un espaciado diferente entre las palabras para que encajen.

En el siguiente ejemplo, la alineación del texto está alineada, lo que crea un espaciado consistente entre las palabras.

Un bloque de texto alineado a la izquierda. Hay espaciado consistente entre cada palabra.

Al personalizar el tamaño y la alineación del texto, aplica las siguientes pautas:

  • El tamaño de fuente mínimo para el texto del cuerpo es el equivalente a 16 px.
  • La alineación del texto no está justificada. El texto justificado crea un espaciado inconsistente entre las palabras.

Enlaces de texto

Cuando agregues enlaces a tu texto, asegúrate de que todos los clientes puedan identificarlos. Debido a que algunos clientes tienen problemas para ver los colores, no puedes depender únicamente de un cambio de color para diferenciar un enlace del texto normal. En el siguiente ejemplo, el texto Descubre nuestra historia está subrayado de tal manera que no depende del cambio de color para comunicar que el texto es un enlace:

Un mensaje de bienvenida que dice

Si editas la hoja de estilo de tu tema, asegúrate de no eliminar los estilos de enlace del texto. Utiliza el siguiente lineamiento:

  • Los enlaces de texto están subrayados o tienen otro diferenciador visual del texto normal.

Texto alternativo para imágenes

Cuando agregas imágenes a tu tienda online, es importante hacerlas accesibles a los clientes ciegos o con capacidad visual reducida. Puedes hacer esto al agregar texto alternativo que describa con precisión cada imagen. Los clientes que usan lectores de pantalla dependen del texto alternativo para comunicar el contenido de las imágenes en tu tienda online.

Puedes agregar texto alternativo a las imágenes de tu producto desde el panel de control de Shopify. Puedes agregar texto alternativo a las otras imágenes en tu tema desde el editor de temas.

Cuando agregues texto alternativo a una imagen, una buena práctica es hacer de cuenta que uno le describe la imagen a alguien que tiene los ojos cerrados. Ayúdalo a crear una imagen en su mente. La forma en que describes una imagen también depende del contexto de tu página web. Por ejemplo, podrías describir una imagen de manera diferente si tu negocio es una agencia de viajes en vez de una tienda de artículos para excursionismo. Considera la siguiente imagen:

Dos amigos que llevan mochilas están abrazados, mirando el océano

Para una agencia de viajes, podrías referirte al país y la región en la que están viajando los dos amigos, y el nombre del océano o del mar que están mirando. Por otro lado, en el caso de una tienda de artículos de excursionismo, podrías enfocarte en las marcas y características de las mochilas de los dos amigos.

Si tu negocio es una agencia de viajes, un ejemplo de texto alternativo deficiente podría ser "Dos personas frente al océano". Para la misma agencia, un ejemplo de un texto alternativo adecuado podría ser "Dos amigos que viajan a Lagos, Portugal, miran la ensenada de Praia do Camilo en un día soleado".

Accesibilidad de diapositivas y videos

Cuando agregues videos a tu tienda online, asegúrate de tomar en cuenta las necesidades de los clientes con visión reducida, los clientes sordos o con problemas auditivos, y aquellos que puedan sufrir de trastornos vestibulares.

Algunos de estos clientes se valen de la capacidad de transformar texto a voz de los lectores de pantalla, que leen en voz alta los contenidos de una página web. El audio adicional de los videos y la música, especialmente cuando es inesperado, puede dificultar esta experiencia. Para los clientes sordos o con problemas auditivos, es una buena idea agregar subtítulos a los videos para que esos clientes puedan acceder al contenido.

Los clientes con trastornos vestibulares pueden experimentar mareos con el contenido en movimiento. Por ello es importante que las presentaciones de diapositivas y los videos no se reproduzcan automáticamente.

Presentaciones de diapositivas

Cuando agregues una presentación de diapositivas a tu tienda online, usa las siguientes pautas:

  • Las presentaciones de diapositivas no se reproducen automáticamente.
  • Si las presentaciones de diapositivas se reproducen automáticamente, incluyen una configuración que le permite a los clientes pausar o detener la presentación de diapositivas.

Videos

Cuando agregues un video a tu tienda online, utiliza las siguientes pautas:

  • Los videos no se reproducen automáticamente.
  • Si los videos se reproducen automáticamente, el audio se silenciará.
  • Para los videos que incluyen audio, el video es completamente visible y no se obstruye por otros elementos de la página. Esto permite que los subtítulos sean visibles.
  • Para los videos que incluyen diálogo, las transcripciones de texto están disponibles. Estas se incluyen en la página o en un enlace a otra página.

Estas pautas también se aplican a videos que están en una presentación de diapositivas.

Soporte de teclado

Los clientes con discapacidades visuales o motoras pueden usar un teclado para navegar y completar tareas online. Estos clientes dependen de un indicador visual para comunicar dónde se encuentra el foco del teclado en una página web. En el siguiente ejemplo, el campo Correo electrónico tiene un indicador de foco visual:

Una pantalla de inicio de sesión de cliente en una tienda online que muestra campos de formulario para el correo electrónico y la contraseña. El campo Correo electrónico tiene un contorno azul.

Si editas la hoja de estilo de tu tema, asegúrate de no eliminar el estilo de foco del teclado de ningún elemento de la página. Utiliza el siguiente lineamiento:

  • Todos los elementos interactivos de la página tienen un indicador visual claro cuando tienen el foco del teclado. Estos elementos incluyen enlaces, botones y campos de formulario.

Recursos

Para leer más acerca de la accesibilidad web para los temas tratados en este artículo, consulta los siguientes recursos.

Recursos de contraste de colores

  • Colores con buen contraste, un artículo de la Iniciativa para la Accesibilidad Web (en inglés).
  • Contrast Ratio, una herramienta online que puedes usar para encontrar la relación de contraste entre dos colores.
  • Color Contrast Analyzer, una aplicación de relación de contraste para descargar desarrollada por Paciello Group

Recursos de texto

Recursos de texto alternativo

Recursos de presentaciones de diapositivas y videos

Recursos de soporte de teclado

¿Estas listo(a) para comenzar a vender con Shopify?

Pruébala gratis