Ayuda
Iniciar sesión

Accesibilidad en los temas

Cuando personalizas el tema, toma decisiones de diseño y de contenido que ayuden a mantener la tienda online accesible. Un sitio web accesible está diseñado para que lo pueda usar cualquier persona, incluidas las personas con discapacidad. Tener en cuenta la accesibilidad al tomar decisiones para la tienda online puede ayudarte a brindar una experiencia inclusiva a todos los clientes.

Las pautas siguientes se crearon teniendo en cuenta las Web Content Accessibility Guidelines (WCAG). Como hay muchos factores que considerar al crear un sitio web accesible, seguir solo estas pautas no garantiza que la tienda online sea totalmente accesible. Puedes obtener más información sobre accesibilidad web visitando el sitio de WCAG o consultando los resources listed below.

En esta página

Accesibilidad del texto

Es importante que el texto de la tienda online sea legible para clientes con discapacidad visual o con dificultad para leer bloques de texto densos.

Contraste de color

Cuando edites los colores de la tienda online, asegúrate de que todo el texto sea accesible para clientes con daltonismo u otra discapacidad visual. Estas personas dependen de un contraste de color adecuado para diferenciar visualmente los elementos. Puedes usar una contrast ratio tool online para comprobar el contraste en las distintas partes de la tienda.

En el ejemplo siguiente, el texto tiene una relación de contraste de 2,4:1 con el fondo y es difícil de leer para algunos clientes.

Un bloque de texto gris claro y un fondo blanco sólido.

En el siguiente ejemplo, el texto tiene una relación de contraste de 4,8:1 y es más fácil de leer para muchos clientes.

Un bloque de texto gris oscuro sobre un fondo blanco sólido.

Prueba el contraste de todo el texto, incluidos los párrafos, los encabezados, los enlaces y los campos de formulario. Sigue estas pautas:

  • El color del texto de párrafo y del texto de los botones tiene una relación de contraste de al menos 4,5:1 con el fondo.
  • El color de los encabezados y de otros textos grandes (tamaño de fuente de 24 px o más) tiene una relación de contraste de al menos 3:1 con el fondo.
  • El color de todo el texto sobre imágenes, incluidas las presentaciones de diapositivas, los banners y los videos, presenta relaciones de contraste suficientes con el fondo. Para el texto grande (tamaño de fuente de 24 px o más), el contraste es de al menos 3:1. Para el texto más pequeño, el contraste es de al menos 4,5:1.
  • El color de los elementos no textuales, incluidos los bordes de los campos de entrada y los íconos, tiene una relación de contraste de al menos 3:1 con el fondo.

Encabezados de texto

Cuando agregues encabezados a una página con el rich text editor, mantén el orden secuencial (1-6). Las tecnologías de asistencia usan los encabezados para comunicar cómo se organiza el contenido de la página. Saltarse niveles, como un encabezado de nivel 2 seguido por uno de nivel 4, puede resultar confuso. Sigue esta pauta:

  • Usa los encabezados en orden secuencial y no saltes niveles.

Tamaño y alineación del texto

Cuando edites la configuración de tipografía del tema, asegúrate de que el texto sea lo suficientemente grande para que los clientes lo lean con comodidad.

El texto también debe tener un espaciado uniforme entre palabras y letras para facilitar la lectura. En el siguiente ejemplo, el texto está justificado, lo que crea un espaciado inconsistente entre palabras.

Bloque de texto con alineación justificada. Cada línea de texto llena el espacio de extremo a extremo, lo que obliga a variar el espaciado entre palabras para que encaje.

En el siguiente ejemplo, el texto está alineado a la izquierda, lo que crea un espaciado uniforme entre palabras.

Bloque de texto alineado a la izquierda. Hay un espaciado uniforme entre cada palabra.

Cuando personalices el tamaño y la alineación del texto, sigue estas pautas:

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

Enlaces de texto

Los enlaces de texto deben estar subrayados o tener otro estilo visual distinto al del texto normal. Como algunas personas tienen dificultades para ver los colores, no puedes basarte solo en un cambio de color para diferenciar un enlace del texto normal.

Los enlaces de texto deben abrirse en la misma pestaña. Los enlaces que se abren en una pestaña o ventana nueva pueden causar confusión, especialmente en dispositivos móviles donde la ventana anterior no es visible, y no son inclusivos, sobre todo para clientes que usan ampliación de pantalla o tienen menos conocimientos técnicos.

Si editas la hoja de estilo del tema, asegúrate de no quitar los estilos de los enlaces de texto. Sigue estas pautas:

  • Los enlaces de texto están subrayados o tienen otro diferenciador visual que no sea solo el color, para que los clientes puedan distinguirlos del texto normal.
  • Los enlaces de texto se abren en la misma pestaña cuando se hace clic.

Texto alternativo para imágenes

Cuando agregas imágenes a la tienda online, es importante que sean accesibles para clientes ciegos o con baja visión. Para lograrlo, agrega texto alternativo que describa con precisión cada imagen. Quienes usan lectores de pantalla dependen del texto alternativo para conocer el contenido de las imágenes en la tienda online.

Desde el panel de control de Shopify puedes add alt text to your product images. Desde el editor de temas puedes add alt text to the other images in your theme.

Cuando agregues texto alternativo a una imagen, una buena práctica es imaginar que se la describes a alguien con los ojos cerrados. Ayúdale a crear una imagen en su mente. La forma de describir una imagen también depende del contexto de la página web. Por ejemplo, puedes describirla de manera diferente si tu negocio es una agencia de viajes que si es una tienda de artículos para actividades al aire libre. Considera la siguiente imagen:

Dos personas con mochilas, abrazadas por los hombros, mirando hacia el océano

Si se trata de una agencia de viajes, podrías mencionar el país y la región por donde viajan las dos personas, y el nombre del océano o mar que están mirando. En cambio, para una tienda de artículos para actividades al aire libre, podrías enfocarte en las marcas y las características de las mochilas de las dos personas.

Si tu negocio es una agencia de viajes, un mal ejemplo de texto alternativo podría ser: "Dos personas frente al océano". Para la misma agencia, un buen ejemplo podría ser: "Dos personas amigas viajando en Lagos, Portugal, mirando hacia la cala arenosa de Praia do Camilo en un día soleado".

Accesibilidad de presentaciones de diapositivas y videos

Cuando agregues videos a la tienda online, asegúrate de tener en cuenta las necesidades de clientes con baja visión, clientes sordos o con pérdida auditiva, o clientes que podrían ser susceptibles a vestibular disorders.

Algunos de estos clientes dependen de the text to speech capability of screen readers, que leen en voz alta el contenido de una página web. El audio adicional de videos y música, especialmente cuando es inesperado, puede dificultar esta experiencia. Para clientes sordos o con pérdida auditiva, conviene agregar subtítulos ocultos a los videos para que puedan acceder al contenido.

Las personas con trastornos vestibulares pueden experimentar mareos con contenido en movimiento. Por eso es importante que las presentaciones de diapositivas y los videos no se reproduzcan automáticamente y que el cliente pueda controlar la presentación con botones.

Presentaciones de diapositivas

Cuando agregues una presentación de diapositivas a la tienda online, sigue estas pautas:

  • Las presentaciones de diapositivas no se reproducen automáticamente.
  • Si las presentaciones de diapositivas se reproducen automáticamente, incluyen controles que los clientes pueden usar para pausar, avanzar o detener la presentación.

Videos

Cuando agregues un video a la tienda online, sigue estas pautas:

  • Los videos no se reproducen automáticamente.
  • Si los videos se reproducen automáticamente, su audio está silenciado.
  • En los videos que incluyen audio, el video debe ser totalmente visible y no estar obstruido por otros elementos de la página. Esto permite que los subtítulos ocultos permanezcan visibles.
  • En los videos con diálogo, deben estar disponibles transcripciones de texto. Se incluyen en la página o mediante un enlace a otra página.

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

Compatibilidad con teclado

Los clientes con discapacidad visual o motora pueden usar un teclado para navegar y completar tareas online. Estas personas dependen de un indicador visual para saber dónde está el foco del teclado en una página web. En el siguiente ejemplo, el campo de Correo electrónico tiene un indicador de foco visual:

Pantalla de inicio de sesión de clientes en una tienda online que muestra los campos del formulario Correo electrónico y Contraseña. El campo Correo electrónico está delineado en azul.

Si editas la hoja de estilo del tema, asegúrate de no quitar el estilo de foco del teclado de ningún elemento de la página. Sigue esta pauta:

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

Recursos

Para obtener más información sobre la accesibilidad web de los temas tratados en este artículo, consulta los siguientes recursos.

Recursos sobre contraste de color

  • Colors with Good Contrast, un artículo de la Web Accessibility Initiative
  • Contrast Ratio, una herramienta online que puedes usar para calcular la relación de contraste entre dos colores
  • Color Contrast Analyzer, una aplicación para descargar que calcula la relación de contraste, desarrollada por Paciello Group

Recursos sobre texto

Recursos sobre texto alternativo

Recursos sobre presentaciones de diapositivas y videos

Recursos sobre compatibilidad con teclado

En esta sección