Accesibilidad en Pevgrow: comprar con teclado y lector de pantalla

Hemos preparado la web de Pevgrow para que puedas hacer tu compra con teclado y lector de pantalla, sin depender del ratón. Hemos pasado pruebas de navegación y validadores de accesibilidad, y seguimos comprobando el recorrido completo. En esta guía ves qué hemos mejorado, qué hemos probado y qué todavía no, cómo intentar una compra paso a paso (con una maceta como ejemplo) y cómo avisarnos si encuentras una barrera.

Qué hemos preparado y comprobado en Pevgrow#

Empecemos por lo importante: te contamos lo que sí hemos hecho y lo que todavía no. Así sabes con qué te vas a encontrar.

Estas son las mejoras que ya están integradas en la tienda:

• Aviso de cookies. Ya no oculta el control que tienes enfocado cuando recorres la página con Tab.
• Mari, el asistente de la tienda. Al cerrarlo, el foco vuelve al botón que lo abrió. El foco es el punto donde está el teclado en cada momento: así no pierdes tu sitio.
• Contraste. Hemos mejorado el contraste de los textos del catálogo y de la compra, para que se lean mejor.
• Tablas de los artículos. Las que revisamos se pueden desplazar con el teclado, sin ratón.

No hay un modo especial que activar: las mejoras forman parte de la web normal.

Qué hemos probado y qué no#

Una primera revisión de accesibilidad incluye comprobar el acceso con teclado y que el foco se vea (W3C WAI). Eso hicimos, y algo más:

Por eso no decimos que Pevgrow sea totalmente accesible ni que tenga una certificación. Tampoco podemos garantizar que la pasarela de pago de un tercero lo sea. Te invitamos a probarlo y a contarnos cualquier barrera, error o mejora que encuentres.

Cómo moverte con teclado y lector de pantalla#

Un lector de pantalla es un programa que lee en voz alta lo que hay en la página. NVDA (para Windows) y VoiceOver (para Mac y iPhone) son dos de los más conocidos. Con ellos y con el teclado puedes moverte sin ver ni usar el ratón.

Estas son las teclas que necesitas:

Dos cosas más que conviene saber:

• Los lectores tienen dos formas de trabajar. NVDA las llama modo exploración (para leer la página) y modo foco (para escribir en un campo). Normalmente cambia solo. Si no lo hace, NVDA+Espacio alterna entre ambos, y Escape vuelve al modo exploración si pasó a modo foco por sí solo (NV Access). NVDA usa por defecto la tecla Insert como tecla NVDA.
• Algunos controles piden Espacio o «interactuar». Es lo que a veces se llama modo interacción: en ciertos controles compuestos tienes que entrar en ellos antes de usarlos.

Esto es una guía de uso, no una validación con NVDA ni con VoiceOver. En Mac, además, el navegador puede necesitar que actives la navegación con teclado a todos los controles (W3C WAI).

Buscar un producto, revisar la ficha y el carrito#

Para que el ejemplo sea sencillo, usamos un producto ordinario de jardinería: una maceta. Este es el recorrido completo de un vistazo.

Ampliar imagen

Ver la infografía en texto

1. 1. Busca una maceta

   Escribe «maceta» en el buscador y pulsa Intro.

2. 2. Abre la ficha

   Avanza con Tab hasta el nombre del producto y pulsa Intro.

3. 3. Lee unidad, opciones, disponibilidad y precio

   Comprueba si es una maceta suelta o un pack, qué opciones hay y si está disponible.

4. 4. Elige la cantidad

   Indica cuántas unidades quieres.

5. 5. Añade al carrito y revísalo

   Comprueba nombre, cantidad y precio antes de seguir.

6. 6. Continúa a la compra

   Pasa al formulario de compra.

7. 7. Rellena Nombre, Apellidos y Correo

   Completa los tres campos de contacto.

8. 8. Confirma el correo

   Si compras como invitado y el correo aún no está confirmado, pulsa «Enviar código de confirmación», escribe el código recibido y confírmalo.

9. 9. Añade teléfono y dirección

   Elige una sugerencia de dirección o completa los campos a mano.

10. 10. Elige una entrega disponible

    Selecciona una de las opciones de entrega que aparezcan.

11. 11. Elige el pago

    Algunos pasos de pago pueden depender del proveedor externo.

12. 12. Revisa el total y las condiciones

    Pulsa «Comprar con obligación de pago» solo si quieres hacer el pedido: el botón lleva el total.

13. 13. Sigue al proveedor y comprueba la confirmación

    Completa el pago con el proveedor y verifica que ves la confirmación del pedido.

Tab y Mayús+Tab recorren los controles; Intro activa enlaces; Espacio pulsa botones y marca casillas.

Infografía Pevgrow

Los cinco primeros pasos te llevan hasta el carrito:

1. Busca una maceta. Ve al buscador de la tienda, escribe «maceta» y pulsa Intro.
2. Abre la ficha. Avanza con Tab hasta el nombre del producto que te interese y pulsa Intro.
3. Lee la ficha. Fíjate en la unidad (una maceta suelta o un pack), en las opciones, en la disponibilidad y en el precio. Es lo que decide si es lo que buscas.
4. Elige la cantidad. Indica cuántas unidades quieres.
5. Añade al carrito y revísalo. Comprueba nombre, cantidad y precio antes de seguir.

Si algo no se lee bien o no puedes llegar con Tab, anota la página y qué intentabas. Lo necesitamos para arreglarlo, y más abajo ves cómo contárnoslo.

Contacto, código de confirmación, dirección, entrega y pago#

Llegas al carrito y quieres continuar. Estos son los pasos que quedan hasta la confirmación. Para escribir este artículo no hemos generado pedidos reales ni enviado códigos de confirmación.

6. Continúa a la compra. Pasa al formulario de compra.
7. Rellena Nombre, Apellidos y Correo. Son los tres campos de contacto.
8. Confirma el correo cuando se solicite. Si compras como invitado y el correo aún no está confirmado, pulsa «Enviar código de confirmación», escribe el código recibido y confírmalo. Si el correo ya está confirmado, continúa con la dirección.
9. Añade teléfono y dirección. Puedes elegir una sugerencia de dirección o completar los campos a mano.
10. Elige una entrega disponible. Selecciona una de las opciones que aparezcan.
11. Elige el pago. Algunos pasos pueden depender del proveedor de pago, que es un servicio externo. No podemos garantizar que todos sean accesibles.
12. Revisa el total y las condiciones. El botón «Comprar con obligación de pago» incluye el total del pedido. Púlsalo solo si quieres hacer el pedido.
13. Sigue al proveedor y comprueba la confirmación. Completa el pago y verifica que ves la confirmación de tu pedido.

Para llevar la cuenta sin depender de la memoria, usa esta lista. Marca cada paso cuando lo completes:

Si te quedas sin poder avanzar, avísanos: es justo la información que nos falta.

Qué seguimos verificando y cómo comunicarnos una barrera#

Seguimos comprobando el recorrido completo. Lo que falta es verlo con lectores de pantalla reales y con personas que los usan a diario. Hasta entonces, tu experiencia es la prueba que más nos ayuda.

Cuando nos escribas, cuéntanos cuatro cosas: la página, qué intentabas, qué pasó y, si lo sabes, el dispositivo, el navegador y el lector de pantalla. No hace falta que mandes capturas ni datos personales. Con este generador puedes preparar el mensaje:

Puedes avisarnos por estos canales. La atención al cliente es de lunes a viernes, de 8:00 a 17:00:

• Correo: customer@pevgrow.com
• Teléfono: +34 722 619 284
• WhatsApp: escribir por WhatsApp

También encuentras ayuda en el centro de ayuda de la tienda.

Lo que puedes hacer hoy: busca una maceta, sigue los trece pasos con el teclado y avísanos de lo que no funcione.

Preguntas frecuentes#