Storefront Theme

Cómo hacer accesible su tienda WooCommerce

Muchos propietarios de tiendas online parecen creer que sus sitios no podrían interesar a personas con discapacidad, o que el porcentaje de personas con discapacidad que podría visitarlos es tan pequeño que no justifica la inversión necesaria para hacerlos accesibles. Las estadísticas pintan, sin embargo, un cuadro muy distinto.

Según la Organización Mundial de la Salud, hay al menos 285 millones de personas en el mundo con discapacidad visual. De ellas, 39 millones son ciegas y 246 millones tienen baja visión. Si tenemos en cuenta también a las personas con errores refractivos, la cifra se sitúa entre 800 millones y 2.300 millones.

Ceguera y discapacidad visual globales

Solo en EE. UU. hay cerca de 60 millones de personas con discapacidad. Esa cifra incluye todas las discapacidades, algunas irrelevantes para la accesibilidad web. Pero si nos centramos en las discapacidades visuales y auditivas — las más comunes en relación con la accesibilidad — vemos que afectan a más del 7 % de la población de 15 años o más y al 22 % de la población mayor de 65 años. Un 82 % de este último grupo tiene además dificultades para manipular objetos, como un ratón de ordenador.

Todos estos datos demuestran que quienes antes podía despreciarse como un grupo minoritario de personas con discapacidad constituyen en realidad una parte amplia e importante de los posibles visitantes con recursos económicos y experiencia para convertirse en clientes muy importantes de su tienda online, ya sea comprando productos para sí mismos o, en muchos casos, para familiares y amigos. Pueden ser incluso las mismas personas que hasta no hace mucho compraban en su sitio y que, por una enfermedad que empeora o un accidente, ya no pueden navegar por su web y se ven obligadas a irse a un sitio accesible para encontrar productos similares que sí puedan adquirir.

Ceguera y discapacidad visual globales por edad

Una vez comprendida la importancia de hacer accesible su tienda online, el siguiente paso es probar su sitio desde el punto de vista de una persona que sufre alguna de las discapacidades que afectan al acceso a la web — visuales, auditivas, físicas, del habla, cognitivas y neurológicas — tal como las describe el World Wide Web Consortium en su Web Accessibility Initiative.

Existen herramientas online gratuitas que le ayudan a emular la experiencia de una persona con discapacidad. Una de las más completas y útiles es WAVE (Web Accessibility Evaluation Tool), desarrollada y puesta a disposición como servicio gratuito a la comunidad por WebAIM. WAVE inspecciona cualquier página web y produce un resumen con errores, alertas, funcionalidades, elementos estructurales, HTML5 y ARIA, etc.

Logotipo de WAVEWAVE muestra la información de accesibilidad en distintas vistas:

  1. Styles View presenta su página con los iconos e indicadores de accesibilidad incrustados. Es la vista por defecto con la mayoría de funciones de WAVE activadas. Debido a su complejidad, los informes para diseños CSS complejos pueden resultar difíciles de leer. En ese caso, cambie a la No Styles View.
  2. No Styles View muestra su página con los estilos desactivados y las tablas linealizadas, revelando el HTML sin estilos y los iconos e indicadores de WAVE. Esta vista también muestra el orden de lectura y navegación subyacentes — el orden en el que acceden a la página los usuarios que dependen del teclado y de lectores de pantalla.
  3. Contrast View solo muestra los problemas de contraste de su página, basados en las directrices WCAG 2.0. Puede usar las herramientas del panel de detalles para revisar el contraste cromático e incluso obtener colores actualizados que cumplan estas pautas.
  4. Además de las vistas anteriores, puede seleccionar la pestaña Code en la parte inferior para ver el marcado subyacente de su página.

WAVE hace un buen trabajo explicando y proponiendo soluciones para los problemas de accesibilidad que detecta. Si solo pudiera usar una herramienta para probar la accesibilidad de su web y su tienda online, WAVE estaría probablemente en el primer puesto.

También existen herramientas específicas para WordPress y WooCommerce, en forma de plugins y widgets. Abajo listamos algunas de las más importantes.

Access Monitor

Access Monitor

«Access Monitor» hace dos cosas para ayudarle a probar la accesibilidad de su sitio.

En primer lugar, automatiza las auditorías de accesibilidad programando informes semanales o mensuales y avisándole cada vez que se ejecutan. Puede probar un conjunto concreto de páginas y obtener una lista de los distintos problemas detectados.

En segundo lugar, solo reporta problemas que son comprobables de forma automatizada, por lo que se le pueden escapar algunos, pero a cambio ahorra tiempo que, de otra forma, se iría en falsos positivos.

Accessibility Widget

Accessibility Widget

El plugin «Accessibility Widget» añade un widget de barra lateral para cambiar el tamaño del texto en su sitio WordPress o WooCommerce.

En el widget puede configurar las siguientes opciones:

  • Redimensionar el contenido dentro de etiquetas HTML y CSS.
  • Definir tamaños de fuente.
  • Definir el texto del controlador.
  • Definir el texto de la descripción emergente al pasar el ratón.

wA11y – The Web Accessibility Toolbox

wA11y
El plugin «wA11y – The Web Accessibility Toolbox» es software de código abierto que le ayuda a evaluar y mejorar la accesibilidad de su web o tienda online, aportando información, formación, recursos y herramientas.

WP Accessibility

WP Accessibility
El plugin «WP Accessibility» le ayuda a resolver con facilidad una serie de problemas comunes de accesibilidad en temas de WordPress y WooCommerce añadiendo múltiples funciones útiles que cualquiera puede aplicar con unos mínimos conocimientos técnicos.

Todas las funciones basadas en modificar hojas de estilo se pueden personalizar con sus propios estilos, colocando la hoja de estilos correspondiente en el directorio de su tema.

Estos son recursos valiosos que le mantendrán ocupado identificando y corrigiendo muchos de los problemas que impiden que su tienda online sea accesible para todo el mundo. Si hace las cosas bien, mejorará la experiencia de usuario tanto de personas sin discapacidad como de aquellas cuyas discapacidades las obligan a luchar por comprender el contenido de su web. Un sitio accesible pronto se traducirá en un aumento de visitantes, lo que probablemente afectará también a la tasa de conversión.

Todo el software listado arriba es Open Source, lo que significa que su código fuente está abierto para que cualquiera pueda inspeccionarlo, modificarlo y mejorarlo. Puede utilizarlo gratuitamente, y si necesita ayuda no dude en ponerse en contacto con nosotros: estaremos encantados de ayudarle a hacer accesible su sitio WooCommerce.


Actualización:

Como miembro del equipo de AccessibleWeb, se me pidió dar una presentación sobre este tema los días 19 y 20 de mayo durante los «HACK-cessibility Days», un evento de sensibilización dirigido a desarrolladores, diseñadores, fabricantes y demás.

Finalmente asuntos familiares me impidieron asistir, pero aún puede consultar y descargar la presentación original desde:
https://www.slideshare.net/RafaelMinuesa/how-to-make-your-woocommerce-store-accessible

Además, celebraremos un Google Hangout en las próximas semanas con una ronda de preguntas y respuestas después. Si desea participar, póngase en contacto con nosotros antes del 1 de junio.



Leave a Comment

Your email address will not be published. Required fields are marked *


Shopping Cart