Un sitio web bien diseñado y optimizado es clave para convertir en ventas todo el tráfico que estás generando y rentabilizarlo. Además, en sectores donde la competencia es alta, es fundamental que tu sitio web comunique de manera efectiva lo que tu empresa tiene para ofrecer a diferencia del resto de competidores.

Aquí es donde entra en juego la «propuesta de valor». En este artículo, exploraremos en profundidad la importancia de la propuesta de valor y cómo puedes utilizarla para alcanzar el éxito en la optimización de tu sitio web.

Antes de profundizar en la propuesta de valor, es crucial entender qué es el modelo LIFT de WiderFunnel ya que la propuesta de valor es el principal pilar de este modelo y cuando se trata de optimizar tu sitio web desde el modelo Lift, la propuesta de valor es una herramienta fundamental para medir el impacto de tus estrategias.

La Propuesta de Valor y el Modelo Lift

Este modelo se usa para evaluar los 6 factores que influyen en el proceso de conversión. Viene a señalar que la propuesta de valor es el vehículo hacia la conversión. Agregar elementos de urgencia (sin abusar de ellos) la impulsará. La relevancia y claridad son elementos clave para que tanto la propuesta de valor como el resto de la información se comprendan y lleguen al usuario. Por otro lado, elementos que distraigan o causen cierta ansiedad tendrán el efecto contrario.

En el siguiente post lo explicamos un poco más detallado y como lo aplica booking para mejorar la tasa de conversión.

¿Qué es la Propuesta de Valor?

La propuesta de valor es la promesa que haces a tus visitantes o clientes potenciales sobre los beneficios y el valor que obtendrán al interactuar o comprar tus productos o servicios. Es la razón principal por la que alguien debería elegir tu negocio en lugar de la competencia.

Una propuesta de valor es una declaración concisa que comunica los beneficios clave que los visitantes obtendrán al interactuar con tu negocio o al utilizar tus productos o servicios. Es una declaración única que te diferencia de la competencia y resalta lo que haces mejor. Una propuesta de valor efectiva responde a la pregunta «¿Por qué debería elegirte a ti en lugar de a otros?».

Define tu Propuesta de Valor

Identifica lo que hace que tu negocio sea único y cuáles son los principales beneficios que ofreces a tus clientes, y lo que más valoran en tu oferta, así como aquello que te diferencia de la competencia.

Para definir tu propuesta de valor puedes usar un lienzo de propuesta de valor como el que te mostramos de la comunidad de Figma.

Un lienzo de propuesta de valor también conocido como «Business Model Canvas», fue creado por Alexander Osterwalder e Yves Pigneur. Se trata de una herramienta visual ampliamente utilizada en el mundo empresarial para comprender y comunicar de manera efectiva la propuesta de valor de un producto o servicio. Su función es ayudar a las empresas a identificar y destacar los beneficios que ofrecen a sus clientes de una manera clara y concisa. El lienzo de propuesta de valor se basa en la idea de que una propuesta de valor efectiva es fundamental para atraer a los clientes y lograr el éxito.

Un lienzo de propuesta de valor consta de dos partes principales:

• Perfil del cliente: Esta sección se enfoca en comprender quiénes son los clientes objetivo y cuáles son sus necesidades y deseos. Incluye elementos como los segmentos de clientes, los problemas que enfrentan y la solución que buscan.
• Propuesta de valor: Aquí se describe cómo el producto o servicio resuelve los problemas o satisface las necesidades de los clientes. Incluye detalles sobre los beneficios específicos, cómo se ofrece el producto o servicio, los canales de distribución, la relación con el cliente y las fuentes de ingresos.

Elementos Clave de una Propuesta de Valor Efectiva

Para diseñar una propuesta de valor efectiva en tu sitio web, debes tener en cuenta varios elementos clave a la hora de desarrollarla y comunicarla:

1. Claridad y Comprensión

Tu propuesta de valor debe ser clara y fácil de entender. Haz que sea lo más simple posible para que cualquier visitante pueda comprender de inmediato lo que ofreces.

Cuando los visitantes ven claramente el valor que recibirán, es más probable que conviertan ya que una propuesta de valor bien comunicada les dará la confianza y la motivación para suscribirse a la newsletter, completar una compra o ponerse en contacto contigo.

2. Captura de la Atención

Debe ser atractiva para capturar la atención de los usuarios. Esto es especialmente importante en la página de inicio, donde a menudo se toma la primera impresión.

3. Beneficios para el Cliente

Enfócate en los beneficios que tu producto o servicio proporciona a los clientes, cómo mejora sus vidas o resuelve sus problemas.

3. Diferenciación

¿Qué te diferencia de la competencia? Puede ser la calidad de tu producto, precios asequibles, tu servicio al cliente o tu enfoque en la sostenibilidad. Resaltar lo que te hace único o por qué eres la mejor opción puede ayudar a atraer a los clientes que buscan algo especial.

5. Retención de Clientes

También es importante para mantener a los clientes que ya tienes. Cuando entregas lo que prometes, los clientes se sienten satisfechos, vuelven o incluso te recomiendan. Una propuesta de valor honesta contribuirá a la lealtad y a la retención del cliente a largo plazo.

Cómo Mostrar Visualmente tu Propuesta de Valor en la Web

La forma en que presentas tu propuesta de valor puede marcar la diferencia entre capturar la atención de tus usuarios o perderlos en cuestión de segundos. ¿Cómo debería de mostrarse en tu web?

Los elementos indispensables que deberían de tener una propuesta de valor sería:

• Título principal donde se describa de forma claro los beneficios del cliente
• Descripción donde se explique un poco más de forma detallada la propuesta de valor aplicando con algo más de información. No más de tres líneas
• Apoyo gráfico que represente de forma clara lo que quieres comunicar. Utiliza iconos y elementos de diseño gráfico para resaltar los beneficios clave de tu propuesta de valor. Por ejemplo, si tu propuesta es «Entrega rápida en 24 horas,» puedes usar un icono de reloj para representar visualmente la rapidez de tu servicio.
• Utiliza bullets points. Por ejemplo en el bloque de propuesta de valor o en la top bar mostrándolo por diferentes puntos o bloques.
• Utiliza un CTA destacado de llamada a la acción si lo mostramos en una zona principal de la página, por ejemplo el slide de la home.

En el caso de usar impulsores de nuestro servicio que apoyen la propuesta de valor como Envío gratis, envío en 24 horas, devoluciones gratis en un plazo de 30 días, configuración e instalación gratis etc, estas deberían de seguir la misma dinámica destacando con un icono e imagen que lo represente, un título y descripción

Según la investigación de CXL los usuarios:

• Captaron la propuesta de valor más rápidamente cuando tenía más texto ya que ocupaba más espacio en la página.
• Recordaron más servicios y ventajas del sitio web cuando se enumeraban más o había más disponibles
• Preferían la información en forma de listas con viñetas

Otros elementos claves en la propuesta de valor y cómo destacarla serían:

• Utiliza un Encabezado Llamativo: Utiliza un tamaño de fuente grande y colores contrastantes para que destaque de inmediato. Asegúrate de que sea lo primero que los visitantes vean cuando lleguen a tu sitio web.
• Gráficos y Elementos Visuales: Si vendes productos físicos, muestra imágenes de alta calidad que destaquen los beneficios de tus productos. Si ofreces servicios, utiliza imágenes que representen visualmente lo que haces.
• Videos Explicativos: Los videos son una excelente forma de mostrar visualmente tu propuesta de valor. Puedes crear videos cortos que expliquen en detalle cómo tus productos o servicios benefician a los usuarios.
• Infografías y Gráficos: Si tienes datos o estadísticas que respaldan tu propuesta de valor, considera la posibilidad de presentarlos de manera visual a través de infografías o gráficos. Esto ayudaría a ganar credibilidad sobre la propuesta.
• Utiliza Social Proof para apoyar tu propuesta: Respalda tu propuesta de valor. Muestra cómo tu producto o servicio ha beneficiado a clientes anteriores y proporciona pruebas tangibles de que puedes cumplir tus promesas. ¿Quieres que la gente crea en tu propuesta de valor? Muéstrales ejemplos de cómo has ayudado a otros.
• Diseño Responsive: Asegúrate de que tu propuesta se adapta de forma correcta a mobile. Los usuarios deben poder ver y entender tu propuesta de valor sin problemas, independientemente del dispositivo que utilicen. Por ejemplo, en una top bar en desktop con 4 bullets, cuando lo trasladamos a versión mobile, deberían de mostrarse cada mensaje de forma individual cada 4 segundos, manteniendo la estética de la top bar.
• Destacar con Espacios en Blanco: El uso estratégico de espacios en blanco en tu diseño puede ayudar a que tu propuesta de valor se destaque. Asegúrate de que haya suficiente espacio alrededor de tu mensaje para que no compita con otros elementos en la página.

Cómo Integrar una Propuesta de Valor en tu Sitio Web

1. Destácala en la página de Inicio

La página de inicio es el lugar principal para mostrar tu propuesta de valor. Utiliza encabezados llamativos, imágenes atractivas y mensajes concisos para transmitir de inmediato lo que ofreces. Un ejemplo de esto es el sitio web de Slack, que comunica claramente su propuesta de valor en su página de inicio: «Pensado para las personas. creado para la productividad” o como el caso de Shopify: “la plataforma de comercio internacional”

Usa palabras y gráficos para mostrar tu propuesta de valor de manera destacada. Haz que sea lo primero que los visitantes vean.

2. Bloque de propuesta de valor

Crea un bloque de propuesta de valor donde no solo destaques tu principal ventaja competitiva, sino impulsores del servicio que apoyen la propuesta de valor como Envío gratis, envío en 24 horas, devoluciones gratis en un plazo de 30 días, configuración e instalación gratis etc,

Un ejemplo sería el de Platanomelón, donde combina en un bloque de propuesta de valor en la home, el valor principal de sus propuesta, la discreción en la entrega, junto con el resto de beneficios impulsores del servicio.

3. Incluye tu propuesta en una Top Bar

Esto te permitirá tenerla siempre visible incluso cuando haces scroll en la página y que te acompañe en la navegación.

4. Mantén la Consistencia en Todo el Sitio
Tu propuesta de valor no debe limitarse a la página de inicio. Debe reflejarse en todas las páginas de tu sitio web. La consistencia ayudará a reforzar tu mensaje y a consolidar la percepción de tu marca.

Testa tu propuesta de valor

Para evaluar tu propuesta de valor de manera efectiva te recomendamos que la pruebes y realices pruebas A/B.

Haz pruebas de diferentes enfoques de la propuesta de valor, número de bullets o el orden de estos. Identifica qué mensajes atraen más a tus usuarios.
Prueba diferentes localizaciones y formatos, por ejemplo un bloque de propuesta de valor, en la top bar, o en el slide principal. Prueba en diferentes páginas y posiciones.

Google Optimize: la herramienta de AB Testing de Google, tiene los días contados. Tal como anunció recientemente Google, dejará de dar servicio el 30 de septiembre de 2023. Mientras llega la fecha, sus experimentos y personalizaciones pueden seguir ejecutándose, pero es interesante ir buscando las mejores plataformas de optimización para vuestros tests A/B.

En este post vamos a compartir los motivos que han llevado a cabo a Google desactivar este servicio de tan solo 5 años de vida, su utilidad para iniciarse al A/B Testing y las alternativas más potentes en el mercado.

¿Por qué se está desactivando Google Optimize?

Según comunicó Google, han decidido desactivar Optimize debido a que no estaba cumpliendo las necesidades actuales de sus clientes. Su nueva propuesta es invertir en soluciones que sean más efectivas y en estos momentos tienen el foco de inversión en integraciones de A/B testing de terceros para GA4.

Nuestra percepción es que Optimize NO ha conquistado 100% el mercado. Su importancia ha radicado en la conexión con Google Analytics, y por el hecho de ser gratuita. La poca rentabilidad que ha sacado Google de Optimize, y el cambio a GA4 (así como otros grandes retos que tiene Google a nivel de buscador: ChatGPT en Bing, TikTok para las nuevas generaciones… y muchos otros) han terminado por dar la puntilla a Optimize (por tener que enfocarse a su core-business). ¡Este año 2023 va a ser movidito! 

Por ello, nos parece lógico que siendo que es una herramienta que no les genera mucho negocio, pleguen velas y se centren es su core-business.

Cuáles son las ventajas de Optimize de Google

En viva! siempre hemos pensado que Google Optimize es una buena opción para iniciarse en el mundo del CRO.

Estas son algunas de las características que han hecho de Optimize una buena opción para testar con el objetivo de optimizar la tasa de conversión:

• Es de Google y eso garantiza una comunidad de soporte bastante potente.
• Se integra con Analytics y  Google Tag Manager con solo 2 pasos.
• Dispone de un editor WYSIWYG (What you see is what you get) sencillo pero muy útil.

Puede interesarte este artículo: Google Optimize, la herramienta de CRO para Analytics

¿Qué alternativas ofrece Google?

Optimize permanecerá disponible hasta septiembre de 2023. Mientras tanto, Google está colaborando con integraciones con las siguientes plataformas de testeo A/B:

• AB Tasty
• Optimizely
• VWO

En los próximos meses estarán disponibles sus API para poder integrarse fácilmente con GA4.

¿Qué ocurrirá con los datos generados en Optimize?

VWO nos ha informado que van a incluir una funcionalidad de exportar casi todo de Optimize a VWO (suponemos que lo mismo con las otras herramientas con las que tendrán integración con GA4: Optimizely y AB Tasty). Esto en teoría exportará las segmentaciones, objetivos, etc. Lo cual facilitará bastante la transición a una de estas 3 herramientas.

¿Cuáles son las mejores alternativas a Google Optimize?

En este vídeo te comparto la experiencia que hemos tenido con las herramientas más potentes en el mercado. Espero que te ayuden a tomar la mejor elección.

Herramientas con soluciones básicas

Estas son las herramientas más similares a Google Optimize y que hemos utilizado en viva!. Te detallo lo que nos parece más interesante de cada una de ellas y algunas de sus deventajas.

VWO

Esta es una de las herramientas que más usamos actualmente en nuestra agencia. Tiene una calidad/precio muy competitiva:

Pros

• Acaba de anunciar su plan VWO Testing Starter, un plan gratuito para hasta 50.000 usuarios mensuales.
• Es de las herramientas mejores en calidad-precio.
• Es fácil de utilizar, intuitiva; y si tienes problemas tienen un Customer Support (eso sí, deberás contar con un desarrollador para la mayoría de tests).
• El soporte técnico es excelente; rápido y formado (eso sí, en inglés).
• Tiene múltiples opciones (encuestas, mapas de calor, widgets…), es muy completa.

Contras

• No se pueden visualizar los informes de objetivos a la vez (más complejo el proceso de comparación).
• Las opciones avanzadas son muy interesantes y potentes, pero algunas de ellas son caras en comparación; por lo que los planes reducidos, y utilizando herramientas complementarias, es una gran forma de funcionar (ej: creación de widgets).

Echa un vistazo a esta Guía de VWO: Cómo implementar Test A/B

Zoho PageSense

Pros

• Es una herramienta básica, pero barata (interesante para empresas que están iniciando).
• Tiene una fácil integración con el resto de herramientas de la suite de Zoho (por lo que si tienes ya algunas de la familia Zoho, puede ser una buena opción).
• Sus mapas de calor son muy interesantes (tiempo por nivel de scroll). ¡Una grata sorpresa!

Contras

• Es una herramienta de testeo básica y no tan potente (tanto en segmentación, configuración de los tests y relacionados).
• Tiene algunos bugs o puntos de configuración contra intuitivos (una vez solucionados y sabidos, ya es solo tenerlos en cuenta).
• El soporte técnico no es tan excelente.

AB Tasty

Pros

• El reporting de la herramienta y sus filtros son muy buenos.
• Los widgets disponibles son muy buenos.
• Tiene otras funcionalidades interesantes como encuestas.

Contras

• El soporte no es tan excelente (y muy poco centrados en el cliente; una lástima)
• Aunque hemos visto que a veces peca de tener algunos bugs al preparar los experimentos; y su tiempo de carga es elevado. Lo que sumado incrementa el tiempo de dedicación.
• QA puede ser complicado en mobile.
• Es una herramienta de alto precio para sus opciones.

Optimizely

Pros

• Tiene un filtrado retroactivo.
• Dispone de buena integración con herramientas de terceros, es partner de Google para desarrollar su herramienta de testeo nativa en GA4.
• Es fácil de implementar y configurar tests (como VWO). Necesitarás un desarrollador para los tests complejos.
• Tiene un equipo de Support de calidad.
• Puedes hacer uso de sus 30 días de prueba (quizá poco para saber, pero lo suficiente para olisquear).

Contras

• Su precio. Es una herramienta con coste alto, solo para empresas con facturación elevada.
• El peso del snippet de Optimizely puede retrasar la carga de página más que otras herramientas.
• La integración con Analytics no es perfecta; pero los últimos acercamientos entre ambos pueden cambiar las cosas.
• La vista de Preview puede tener ciertos bugs.

Convert.com

Pros

• Tecnología antiflickering (evita el parpadeo inicial de los tests)
• Tracking de ingresos automático
• Sus precios en los planes avanzados resultan interesantes
• API completa para desarrolladores
• Segmentación avanzada (ej: en base al tiempo/clima)
• Soporte rápido por chat

Contras

• El reporting post-implementación del test es mejorable
• La vista de Preview puede tener ciertos bugs.
• El editor WYSIWYG es útil, pero no siempre perfecto
• Su precio en el plan inicial es más caro que VWO (hasta 50.000 usuarios/mes)

Herramientas con soluciones avanzadas

Si tienes un negocio online con una facturación alta y con un equipo con tiempo para formación, estas herramientas pueden ser la mejora alternativa, son complejas pero con un potencial increíble.

SiteSpect

Pros

• Targeting y personalización avanzadas. Así como recomendación de productos (lo que todo sumado la hace muy potente).
• Su implementación es muy fácil. No necesitas saber sobre HTML para utilizar esta herramienta.
• Tiene tecnología antiflickering.

Contras

• Su precio (solo interesante para empresas con una facturación elevada).
• No tiene la mejor experiencia de usuario en la plataforma.
• Es compleja de usar, por lo que necesitas tiempo y dedicación para dominarla (así como recursos técnicos dedicados).
• Su tecnología antiflickering, viene asociada a un retardo en el tiempo de carga.

Adobe Target

Pros

• Es de las herramientas más avanzadas (para proyectos muy punteros). También cuesta más…
• Tiene una selección de objetivos basada en reglas, selección geográfica de objetivos y optimización en el lado del servidor. Lo dicho, muy TOP!
• Su integración es fácil con el resto de herramientas de la suite de Adobe.

Contras

• Su precio (solo interesante para empresas con una facturación elevada).
• La herramienta es muy potente, pero requiere tiempo y dedicación para dominarla completamente (lo bueno es que tiene cursos para ello).
• El reporte nativo es limitado; requiere de Adobe Analytics.
• Su soporte es por tickets, que puede no ser tan rápido en la respuesta (según prioridad).

Conclusión

Esperamos que este post os ayude a la toma de decisiones de qué herramienta es más adecuada para vuestra empresa. Depende de tu tamaño, madurez digital y otros factores tendrá sentido elegir una u otra herramienta.

Si quieres estar al día de todas las novedades en nuestro ecosistema, no dudes en seguir nuestro videoblog y blog, compartimos todo lo que sabemos e implementamos en la Agencia.

En este artículo compartimos un sencillo test que viene a demostrar dos cuestiones de vital importancia que se deben tener siempre presentes en una estrategia de experimentación: 

• Un pequeño cambio puede producir una importante mejora.
• Elegir correctamente el KPI para valorar si un experimento ha sido un éxito.

El contexto

Durante nuestro análisis y revisión del sitio web de un cliente encontramos que el ordenado por defecto que se daba a los productos en las páginas de categoría (lo que se conoce como product listing) era por precio (de menor a mayor). En realidad esto es más común de lo que parece en muchos sitios. Puede que la motivación detrás de esta elección sea mostrar al usuario productos de menor precio y generar la sensación de que el sitio es económico. 

Sin embargo, algunos estudios de UX (experiencia de usuario) (https://baymard.com/blog/default-sort-type) han mostrado que usar este ordenado por defecto puede generar algunos problemas importantes.

Uno de ellos es que puede hacer creer al usuario que se encuentra en una categoría equivocada. ¿Por qué? Si los primeros productos que se ven en una categoría no son representativos de esta, rápidamente asumimos que estamos en el sitio equivocado y aumenta la probabilidad de abandono. 

A menudo los productos de menor precio de una categoría suelen ser ciertos “accesorios” o “complementos” de los productos principales. Por ejemplo en una categoría de Bombillas led, es fácil encontrar también productos para su instalación: aros, bornas, etc… los cuales tienen un precio menor que el del producto más representativo de la categoría. Mostrar estos productos en primer lugar podría llevar fácilmente a confusión.

Un segundo problema que este tipo de ordenado puede producir es que suele generar agrupaciones de productos muy similares al inicio (al ordenar por precio es fácil que variantes del mismo artículo se muestren muy seguidas) lo que impide al usuario hacerse una idea correcta del abanico de distintos productos y gamas que ofrece el sitio.

Según el estudio de Baymard indicado previamente, lo mejor sería mostrar al usuario un tipo de ordenado ‘por relevancia’. En nuestro caso decidimos testar cómo podría influir esto en eRel rendimiento del ecommerce de nuestro cliente.

El test

Para ello propusimos un test muy sencillo: mostrar a un parte del tráfico una variante en la que el ordenado de los productos por defecto fuera ‘por relevancia’.

Lanzamos el test con la herramienta de A/B testing VWO y lo hicimos tanto para dispositivos de escritorio como móviles. En esta ocasión optamos por un Split test. Para ello el equipo de desarrollo de nuestro cliente preparó una variante en la que el ordenado que se mostraba por defecto en las páginas de categoría era por relevancia. La URL de la variante añadía un parámetro que nos permitía configurar el test en VWO. Enviamos el 50% del tráfico a la versión original (ordenado por defecto por precio de menor a mayor) y el otro 50% a la variante con el ordenado por relevancia.

Recomendado: Split testing para CRO: todo lo que debes saber

Los resultados

Tras unas semanas de funcionamiento recogimos suficiente información para tomar una decisión respaldada por datos. Aunque los resultados nos sorprendieron en un inicio. 

Descubrimos que la tasa de conversión global (el número de compras divido entre el número de usuarios) no se estaba viendo beneficiada del cambio que habíamos planteado (de hecho caía un 3,4%). Sin embargo, los ingresos aumentaban notablemente: un 84%. 

¿Por qué?

El AOV (importe medio de pedido) prácticamente se había duplicado (aumento del 92%), pasando de 576,14 € a 1.106,12 € (es un sector con un ticket medio alto).

Pensándolo bien, todo encajaba. El ordenado por relevancia de la variante mostraba productos más apropiados a lo que el usuario esperaba encontrar en cada categoría, en vez de priorizar productos más baratos. Esto penalizaba algo las ventas haciendo descender algo la conversión global pero al aumentar el ticket medio, los ingresos se disparaban. 

El aprendizaje

Como indicamos al inicio de este caso de éxito, este test produjo dos aprendizajes principales: 

• La importancia de no desechar ideas (por muy sencillas que parezcan). A veces no es posible estimar el impacto correcto que puede tener un cambio hasta que no se prueba.
• No siempre se puede medir el éxito de un test por el aumento de la Conversión. Este es un KPI importante a tener en cuenta, pero no siempre debe dominar nuestras decisiones. En este caso, es positivo para el negocio que la conversión disminuya ligeramente si el ticket medio se duplica y produce una mejora tan notable en los ingresos. Por eso nunca nos cansaremos de repetir la importancia de tener una visión más global de cómo están afectando nuestras acciones a los intereses del negocio. 

Mejorar la tasa de conversión de tu sitio y optimizar los indicadores del negocio principales es posible. Pero para ello es importante seguir una metodología y establecer una hoja de ruta que nos permita saber hacia dónde nos estamos dirigiendo. 

En Viva! Conversion podemos ayudarte a descubrir cómo el CRO puede impactar en tu negocio y los beneficios de implementar un programa de experimentación en tu estrategia de crecimiento.

¿Hablamos?

¿Qué es la accesibilidad web? ¿por qué es tan importante? y ¿cómo puedes evaluar y mejorar la accesibilidad de tu sitio web?

Hemos preparado este artículo para ayudarte a dar los primeros pasos en este área tan importante pero tan a menudo dejada de lado.

Porque es responsabilidad de todos que Internet sea para todos.

Introducción a la Accesibilidad web

¿Qué es la accesibilidad web?

La accesibilidad web es la práctica inclusiva de hacer que cualquiera (independientemente de sus capacidades o discapacidades) pueda usar y aprovechar un sitio web. 

«El poder de la Web está en su universalidad. El acceso por cualquier persona, independientemente de la discapacidad que presente es un aspecto esencial.”

Tim Berners-Lee, creador de la World Wide Web (WWW)

¿Por qué es importante?

Según la OMS (Organización Mundial de la Salud) más de mil millones de personas (aproximadamente el 15% de la población mundial) tienen alguna forma de discapacidad. Esto quiere decir que lo más probable es que tengan alguna dificultad para interactuar con un sitio web que no tenga en cuenta este aspecto.

Las discapacidades son tan diversas como las personas, por tanto estas toman numerosas y variadas formas. Pero algunas de las más habituales que podemos encontrar son: 

• Discapacidades visuales: como ceguera, poca visión, daltonismo…
• Discapacidades auditivas: personas sordas o con niveles de audición bajos.
• Discapacidades motrices, relacionadas con la movilidad, que pueden implicar problemas puramente físicos o trastornos neurológicos/genéticos. Un número significativo de personas tienen problemas de movilidad principalmente por la edad avanzada.
• Discapacidades cognitivas, que pueden presentarse en la forma de una capacidad intelectual más limitada, pero también relacionadas con problemas de memoria, enfermedades mentales o dificultades del aprendizaje como dislexia, TDAH…

Hay muchos tipos y niveles de discapacidades. La clave está en pensar más allá de tu ordenador y cómo tú utilizas la web y empezar a aprender acerca de cómo otros la utilizan. 

Tú no eres tus usuarios.

Además, en muchos países ya existe legislación que obliga, especialmente a los sitios web de las administraciones públicas a cumplir con un nivel mínimo de exigencia en cuanto a Accesibilidad.

Si quieres conocer más sobre cómo está la legislación en España, echa un vistazo a este post de Olga Carreras (consultora freelance y toda una referencia sobre la accesibilidad web)

¿Qué beneficios tiene?

Es ético y socialmente responsable esforzarnos por ofrecer las mismas oportunidades y el acceso a nuestro sitio a todo tipo de usuarios. Trabajar en la mejora de la accesibilidad web tiene un profundo efecto en personas con discapacidades, pero no son los únicos beneficiados. Tiene otros beneficios añadidos. Por ejemplo:

• Usuarios con conexiones lentas o equipos informáticos antiguos también se beneficiarán de que nuestro sitio web cumpla con las normas de accesibilidad. 
• Más usuarios significan más ventas. Ampliar la cantidad de usuarios que pueden relacionarse con nuestra web aumentará la cantidad potencial de clientes que pueden adquirir nuestros productos o servicios.
• Mejor rendimiento y mayor conversión: los sitios web que cumplen con los estándares web son compatibles con más dispositivos, están mejor estructurados y son más eficientes desde el punto de vista del tiempo de carga de la página. La accesibilidad es una de las primeras (tras la funcionalidad) de la conversión a optimizar. Si un sitio web no es lo suficientemente accesible, tendrá serios problemas de conversión.
• Mejora tu posicionamiento (SEO): Un 48% de los criterios de accesibilidad son los mismos que se recomiendan para mejorar la indexación en los motores de búsqueda. De alguna manera estos también son “ciegos”, pues no pueden “ver” imágenes, vídeos o JavaScript. Por tanto, que tu contenido pueda ser interpretado y representado de forma mecánica beneficia tanto a motores de búsqueda como a los usuarios de tecnologías asistivas.

¿Por dónde empezar?

Revisar la Accesibilidad de un sitio web puede resultar una tarea abrumadora. Hay muchos aspectos que debes tener en cuenta. Pero, ¿quién marca las normas?

El consorcio «World Wide Web” (W3C) a través de su iniciativa WAI (Web Accesibility Initiative) proporciona una lista detallada llamada WCAG 2.1 (Web Content Accessibility Guidelines), aceptada globalmente y que sirve de base para la mayor parte de las demás normas. Las WCAG son bastante complejas, no son muy fáciles de resumir, pero sí es interesante que sepas que establecen tres niveles de adecuación o conformidad (de menor a mayor exigencia): nivel A, nivel AA y nivel AAA. El nivel habitualmente requerido es el AA, ya que la propia WAI reconoce que el nivel máximo AAA no es recomendable por la imposibilidad de adecuar muchos contenidos propios de la web. 

¿Qué puedes hacer entonces si no eres un experto en la materia? ¿por dónde empezar?

Una buena recomendación es que empieces echando un vistazo a los errores más comunes a nivel de Accesibilidad. Estas son los 6 más habituales: 

Textos con bajo contraste

Algunas personas no pueden leer si no existe suficiente contraste entre el color del texto y el del fondo, por ejemplo un gris claro sobre fondo blanco. 

Por otro lado, a otros usuarios con otros problemas, como dislexia, les resulta difícil leer colores muy brillantes (con alta luminancia).

¿Qué hacer?

Revisa cuidadosamente todos los textos de tu web o al menos aquellos que creas que pueden tener este problema. La mayoría de navegadores disponen de herramientas útiles para ello. Por ejemplo el selector de elementos de las Herramientas para desarrolladores de Chrome te permite inspeccionar un elemento concreto y te ofrece la información relativa al nivel de contrastes.

Para asegurarte de que los colores que eliges cumplen con las normas de accesibilidad puedes usar alguna de las numerosas herramientas online que existen para ello. Aquí tienes dos de ellas:

• https://coolors.co/
• https://webaim.org/resources/contrastchecker/

Ofrece alternativas textuales al usar imágenes

Revisa las imágenes de tu sitio (empieza por la homepage o las más visitadas) y asegúrate de que poseen una etiqueta alt (alt=””) y el texto alternativo si así lo requieren. Es posible que no todas las imágenes necesiten un texto alternativo, por ejemplo si son decorativas y no aportan nada extra al contenido (aunque siempre necesitarán la etiqueta alt, que en estos casos irá vacía). Pero si la imagen proporciona información que no obtendrías si no existiera, entonces deberías escribir esta información en el texto alternativo. 

Si quieres descubrir todos los aspectos clave que deben cubrir las imágenes de tu ecommerce, no te pierdas: Entrevista con Montse Labiaga de Fotografía Ecommerce

Enlaces vacíos

Los enlaces deben ser capaces de interpretarse incluso fuera de su contexto. Es por ello que usar textos genéricos para enlaces del tipo: Leer más, Clic aquí, Continuar… generan muchos problemas y resultan en menos clics por parte de los usuarios que usan tecnologías asistidas para navegar por la web.

El objetivo es que el propósito de cada enlace pueda ser determinado teniendo en cuenta sólo el texto del enlace o a través del texto sumado al contexto del enlace.  

Etiquetas para controles de formularios

Las etiquetas sirven para identificar los controles del formulario. Es necesario incluir siempre la etiqueta (aunque en algunos casos puede ocultarse para que sea únicamente accesible a los lectores de pantalla). 

Utiliza el elemento label para asociar la etiqueta con el control del formulario, usando los atributos for e id con el mismo valor. 

<label for="name">Nombre</label>
<input type="text" id="name">

Botones vacíos

En primer lugar, si no tienes clara la diferencia entre un botón y un enlace y sus implicaciones a nivel de usabilidad, es muy interesante que le eches un vistazo al siguiente artículo: 

• https://equalizedigital.com/accessibility-checker/empty-button/

A veces es fácil confundirse porque en muchos sitios web a los enlaces se les da un estilo de botón. En términos generales, un enlace se usa para navegar de una URL a otra o para moverte a otra sección en la misma página (en HTML se usa la etiqueta <a> para hacer referencia a ellos). En cambio un botón es un elemento que desencadena una acción, como puede ser la descarga de un archivo, el envío de un formulario o abrir o cerrar algo en la página. Normalmente los botones requieren código JavaScript para ejecutar la funcionalidad (en HTML se referencian con la etiqueta <button> o con <input> e indicando el tipo (por ejemplo: <input type=”submit” value=”Enviar formulario”>).

A nivel de accesibilidad, es importante que los textos de los botones o los valores de las etiquetas input informen al usuario de la acción a realizar. Si estos no describen la funcionalidad del botón, el usuario que utilice, por ejemplo, un lector de pantalla no sabrá para qué sirve el botón y no podrá usarlo.

Declaración del idioma del documento 

Es importante declarar el idioma de la página porque se usa de varias formas por las tecnologías asistivas y sin esta información, usuarios con ciertas discapacidades visuales podría no ser capaces de acceder al contenido del sitio. 

¿Cómo hacerlo?

Revisa el atributo HTML que se usa para declarar el idioma del sitio. Suele tomar esta forma:

<html lang="es">

y debe aparecer inmediatamente después de la declaración DOCTYPE.

Aquí tienes más información sobre cómo debes establecerlo correctamente: 

Recuerda también revisar si alguno de tus contenidos está en otro idioma pues en este caso deberás declararlo en el bloque (página, post, párrafo…) en concreto.

Próximos pasos

Estos son solo algunos aspectos iniciales que puedes empezar a revisar, pero ¿por dónde seguir?

Una buena opción es continuar evaluando con los aspectos que la WAI propone comenzar:

Easy Checks – A First Review of Web Accesibility

Por otro lado, en la actualidad existen una gran cantidad de herramientas que pueden ayudarte a revisar el nivel de cumplimiento de tu sitio en accesibilidad y te dan indicaciones para adecuarla a la norma. Muchas de ellas también te permiten añadir widgets (usualmente de pago dependiendo de las funcionalidades ofrecidas) para mejorar la accesibilidad de tu sitio. Es fácil que ya te hayas cruzado con varias de ellas en sitios web de referencia o de empresas con un mayor sentido de compromiso con la accesibilidad.

Algunas de las más populares son:

• https://www.equalweb.com/
• https://userway.org/
• https://www.siteimprove.com/platform/accessibility/

Otros recursos útiles sobre Accesibilidad

Guía todo en uno sobre la accesibilidad web en España (Observatorio de la Accesibilidad en España)

• https://observatoriodelaaccesibilidad.es/wp-content/uploads/2020/06/Accesibilidad-web.pdf

Para evaluar la Accesibilidad de tu web:

• https://www.w3.org/WAI/test-evaluate/es
• https://www.accessibilitychecker.org/

Legislación sobre Accesibilidad web en España (de Olga Carreras, consultora freelance y una de las randes expertas en Accesibilidad en España)

• https://olgacarreras.blogspot.com/2005/01/referencia-sobre-legislacin-espaola.html

Conclusión

En conclusión, la accesibilidad es una responsabilidad de todos. A nadie se le debería negar el derecho de tener las mismas oportunidades de acceder a la información y sacar el máximo provecho de Internet. Sin embargo, los datos indican que todavía nos queda mucho por hacer en este campo.

El 98,1% de las páginas de inicio incumple al menos una norma de las WCAG 2.0

Estudio de WebAIM realizado en 1 millón de homepages (2020)

Por eso, es vital que continuemos esforzándonos por concienciarnos de la importancia que tiene la accesibilidad y que sigamos trabajando para ofrecer una experiencia más justa y sin barreras en nuestros sitios web.