Accesibilidad para temas
Cuando personalices el tema, elige diseños y contenido que te ayuden a que la tienda online sea accesible. Un sitio web accesible está diseñado para que cualquiera pueda usarlo, incluidas las personas con discapacidades. Tomar decisiones para la tienda online teniendo en cuenta la accesibilidad puede ayudarte a ofrecer una experiencia inclusiva para todos los 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 obtener más información acerca de la accesibilidad web visitando el sitio web de WCAG o consultando los recursos que se enumeran a continuación.
En esta página
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.
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 más fácilmente.
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 la página con el editor de texto enriquecido, es importante mantenerlos en orden secuencial (uno a seis). Las tecnologías de asistencia utilizan los títulos para comunicar cómo se organiza el contenido de la página. Omitir 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 omitir 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.
En el siguiente ejemplo, la alineación del texto está alineada, lo que crea un espaciado consistente entre las palabras.
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
Los enlaces de texto deben estar subrayados o tener otro estilo visualmente distinto en comparación con el texto normal. Debido a que algunos clientes tienen problemas para ver los colores, no deberías confiarte solo en un color distinto 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 nueva pestaña o ventana pueden causar confusión, especialmente en el móvil, donde la ventana anterior no es visible y no son inclusivas para los clientes, especialmente para aquellos que usan la captura de pantalla o que son menos técnicos.
Si editas la hoja de estilo de tu tema, asegúrate de no eliminar los estilos de enlace del texto. Usa las siguientes pautas:
- Los enlaces de texto están subrayados o tienen otro diferenciador visual que no solo es de color para que los clientes puedan diferenciar los enlaces 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 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:
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. Debido a esto, es importante que las presentaciones de diapositivas y los videos no se reproduzcan automáticamente y que el cliente pueda controlar la presentación de diapositivas con botones de control.
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, incluye controles de presentación de diapositivas que los clientes pueden usar para pausar, adelantar 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:
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 obtener más información 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
- Tamaño de fuente de 16 píxeles: Para el texto del cuerpo, menos de eso es un error costoso, un artículo de Smashing Magazine (en inglés).
- Alineación de texto, un artículo de Web AIM (en inglés)
- Apariencia del enlace, un artículo de Web AIM (en inglés)
- Cómo utilizar los títulos para estructurar el contenido, un artículo de Web AIM (en inglés)
Recursos de texto alternativo
- De texto a voz, un artículo de la Iniciativa para la Accesibilidad Web (en inglés).
- Texto alternativo, un artículo de Web AIM (en inglés).
- Consideraciones al escribir texto alternativo, un artículo sobre Medium (en inglés).
Recursos de presentaciones de diapositivas y videos
- Una guía para los trastornos vestibulares, un artículo de The A11Y Project (en inglés).
- De texto a voz, un artículo de la Iniciativa para la Accesibilidad Web (en inglés).
- Subtítulos de videos, un artículo de la Iniciativa para la Accesibilidad Web (en inglés).
- Cómo usar los subtítulos automáticos, un artículo de Ayuda de YouTube.
- Leyendas y subtítulos, un artículo del Centro de ayuda de Vimeo
- Carousel usability (Funcionalidad de los carruseles), un artículo del Nielsen Norman Group
Recursos de soporte de teclado
- Compatibilidad de teclados, un artículo de la Iniciativa para la Accesibilidad Web (en inglés).
- Introducción al foco, un artículo de Google Developers.