¡Ayúdanos a crear contenido haciendo una donación mediante Paypal!

sábado, 27 de octubre de 2018

Solución de accesibilidad en el Back office de Prestashop

 ******¡¡¡IMPORTANTE!!!******

- Lo que se explica en este POST, es únicamente con fines didácticos. Úsalo sólo a título personal.
- Tifloinformático, su autor y/o los desarrolladores de las herramientas mencionadas, no se hacen responsables del mal uso que le des al contenido de esta entrada, siendo tú el/la único/a responsable.
- Las herramientas mencionadas, son propiedad de sus autores.
- Si citas total o parcialmente este artículo, en internet o por otros medios, debes mencionar la fuente:
http://tifloinformatico.blogspot.com
- Las instrucciones que se describen a continuación han sido probadas en Windows 10. Aunque pueden servir para otras versiones, no se garantiza que sean válidas para versiones distintas de Windows.


-------------------------

En esta entrada

(Se abre en una nueva ventana para mayor comodidad)

 explicábamos como montar una tienda online con Prestashop, uno de los cms de ecommerce más potentes del momento.

Vimos como montar un servidor WEB con Apache, PHP y Mysql, y como instalar Prestashop en el servidor, en modo local.

Al final de la entrada decía

Por último; aunque dijimos que no tocaremos la configuración de Prestashop en esta entrada, un consejo: existen distintos CMS para montar tiendas online, de los que Prestashop pese al inconveniente del alto coste de los temas y módulos, es el mejor, teniendo en cuenta que su rival más directo (Magento) es mucho más complejo de usar, requiere de licencias carísimas y tiene problemas de rendimiento, a diferencia de Prestashop que funciona muy bien en equipos con hardware de lo más normal; y el resto de opciones no son tan potentes como Prestashop y Magento, aunque igualmente válidas para crear tiendas online sencillas.

Pero si os decidís a montar una tienda con Prestashop y tenéis que gestionarla vosotros, armaros de paciencia y no queráis correr. Porque además del tiempo que necesitaréis para controlar bien el montón de funciones de Prestashop, las apariencias engañan... Y si bien la interfaz del back office parece totalmente accesible (o en un 99% diría yo) la realidad es que no es así.

Hay muchas funciones, que de no ser porque las he leído en páginas, foros, blogs ETC, no sabría ni que existen. Y aun así, he estado mucho tiempo pensando que en las instalaciones que hacía de Prestashop, por algún motivo que no entendía, no estaban muchas de ellas.

pero sí; sí que están... Pero los lectores de pantalla no las leen, si no se rebusca mucho con los cursores más complejos de revisión, como el táctil de Jaws, o el cursor de revisión de NVDA.

Por ejemplo, si queréis alguna de estas opciones del Back office, en "Configuración":

- Configuración de Pedidos
- Configuración de Productos
- Ajustes sobre clientes
- Contacto
- Tráfico & SEO
- Buscar
- Merchant Expertise

Tened paciencia porque cuestan de encontrar, aunque es más sencillo de lo que parece: Con NVDA no he sido capaz de encontrar algunas opciones, aunque por contra otras se encuentran la mar de rápido; pero sabiendo donde están, porque aparecen al principio de la página... ¿Quien se lo iba a imaginar?.

Pero otras no he conseguido encontrarlas.
En cambio con el cursor táctil de Jaws, pueden leerse todas las opciones. El problema es entrar en ellas, porque no he encontrado la forma con ningún comando de Jaws, de entrar por ejemplo, en "Configuración avanzada">"Rendimiento": a la opción no es difícil llegar. Pero entrar en ella es otra cosa.

Por suerte, finalmente con Jaws no es tan difícil, ya que no hace falta usar el cursor táctil. Con el cursor de Jaws/Jaws a PC y jugando un poco con el comando para actualizar la pantalla (Jaws+Escape) puede no sólo llegarse a las opciones, sino entrar sin problema; ya que son simplemente enlaces... Pero no sé por qué los lectores de pantalla no son capaces de leerlos normalmente.

El único problema, es que por ejemplo, para las opciones de arriba, hay que hacer varios intentos hasta que Jaws consigue leer la lista en la que se muestran, con el cursor virtual: con el de Jaws o Jaws a PC, rápidamente se encuentran algunas opciones, si se pulsa por ejemplo en "Configuración", con el cursor de Jaws a PC activo, y con la tecla "Click izquierdo del ratón" (barra del teclado numérico).

Bastará hacer esto una vez para que con el mismo cursor de Jaws a PC, podamos leer algunas opciones de las que aparecen. Pero leer con este cursor no es lo más cómodo; así que lo normal es que queráis hacerlo con el cursor virtual... ¡Y eso es lo que realmente cuesta!.
Para ello hay que pulsar en alguna de las opciones, también con el cursor de Jaws a PC, y tecla "Click izquierdo del ratón" e ir actualizando la pantalla con Jaws+Escape.

Lo malo es que esto ocurre con varias opciones principales. Por lo que lo mejor es, si no conocéis bien todo el Back office de Prestashop, no dejaros llevar por lo que veáis en la interfaz, y leer la documentación.
De esta forma, sabréis si una opción es complicada de usar con lectores de pantalla, si no la encontráis con el cursor virtual.

*Recordad que el Back office de Prestashop es una interfaz WEB.

 Pues bien, en esta entrada (que prometo será más corta que la anterior... ¡MUCHO MÁS!) voy a explicaros como solucionar el problema que hay para llegar a muchas opciones del back office, con lectores de pantalla.

No lo expliqué en la entrada anterior, ya que acabo de descubrir una forma mucho más sencilla de lo que dije que había que hacer.

Decíamos que hay opciones, que pese a ser enlaces, los lectores de pantalla no son capaces de leer; al menos con los cursores de revisión de páginas WEB, como el cursor virtual de Jaws. Pero que en cambio, con otros cursores, como el de Jaws o el táctil de Jaws (con NVDA no he conseguido encontrarlas) sí puede verse que están dichas opciones.

El problema viene a la hora de activarlas, ya que es muy difícil, por más comandos que se usen.

Ahora que he encontrado una forma mucho más sencilla de acceder y entrar en estas opciones, parece que más bien es un problema de refresco de la página, que los lectores de pantalla por algún motivo no hacen, o al menos, no correctamente.

Esto que vamos a ver, al menos sirve tanto para Internet explorer, como para Firefox. Y seguramente, aunque no lo he probado en otros navegadores como Chrome o Edge, también sirva para ellos.

Una vez instalada la tienda Prestashop, y entrado en el Back office como explicamos

en esta entrada

(Se abre en una nueva ventana para mayor comodidad)

debemos buscar la opción que queramos en lo que viene a ser una especie de menú principal donde hay varias opciones, en la página principal del Back office

 Inicio
Vender
Pedidos
Catálogo
Clientes
Servicio al Cliente
Estadísticas
Personalizar
Módulos
Diseño
Transporte
Pago
Internacional
Configurar
Parámetros de la tienda
Parámetros Avanzados

 Varias de estas opciones contienen una lista de opciones que como decíamos, los lectores de pantalla no muestran correctamente al navegar normalmente por la interfaz WEB; pero en cambio, sí muestran otras.

Por ejemplo, vamos a la opción "Internacional". Sobre ella, pulsamos la tecla Enter: En principio, tras unos segundos que puede tardar en cargarse la página, en el menú principal, todo sigue igual, salvo que "Internacional", debería aparecer como un enlace visitado.

Si bajamos con flecha abajo, o nos movemos con la tecla Tabulador; o más rápidamente por encabezados, llendo al siguiente encabezado de nivel 2, vamos a lo que parecen las opciones del apartado "Internacional"

 Localización

 Aquí empieza el nuevo contenido de la página, que se ha cargado al pulsar en "Internacional".

Si seguimos bajando, podemos ver cuatro opciones

 Localización
Idiomas
Monedas
Geolocalización

 Efectivamente: si pulsamos en cualquiera de ellas, se van cargando unas opciones u otras, relacionadas con el subapartado que elijamos.

Hasta aquí todo parece ir bien, y no haber ningún problema de accesibilidad ¿verdad?.
Si hecháis un vistazo a las opciones de cada apartado veréis que no hay ningún problema para interactuar con los elementos de los formularios.

Pero resulta, que si quisiéramos por ejemplo ... Traducir algún texto del Front office; o incluso del Back office (sí, puede traducirse cualquier texto; o lo que es lo mismo, modificarlo, aunque sea en el mismo idioma) en Prestashop, no encontraríamos como hacerlo por ninguna parte, en nada de lo que nos leen Jaws o NVDA en la interfaz del Back office.

Y es que, en realidad dentro de la opción "Internacional" del menú principal, hay más opciones de las que hemos visto hasta ahora

 Localización
Ubicaciones Geográficas
Impuestos
Ubicaciones Geográficas
Impuestos
Traducciones

 ¿Y dónde está todo eso?.

Seguro que los que más experiencia tengáis con el uso de lectores de pantalla, no tardáis en encontrarlas con cursores de revisión avanzados, como el táctil de Jaws. Pero ¿podréis entrar en ellas?. Si lo conseguís, estaría bien que dejárais vuestros comentarios para explicar cómo.

Por cierto, no vamos a ver como modificar textos en Prestashop: era sólo un ejemplo para mostraros que hay opciones que cuestan de encontrar. Pero ya puestos, sí que os diré, que para ello hay que ir a la última ("Traducciones")

Pues bien, estas opciones aparecen simplemente, debajo de la opción principal que las contiene; que en este caso sería "Internacional".
Y además, son enlaces como cualquier otro, así que no sé por qué ocurre esto.

Para que aparezcan las opciones que contiene un elemento del menú principal, la forma más sencilla es pulsar en dicha opción normalmente (con la tecla Enter).
*Puede que tarde unos segundos en recargarse la página.

Ahora que se supone que ya aparecen las opciones que contiene, sobre la opción del menú principal pulsamos tecla Aplicaciones, y podemos pulsar, bien en "Abrir en una nueva pestaña", o en "Abrir en una nueva ventana" (es más práctico lo primero).

De esta forma, cerrando la nueva página que se abre (que es exactamente la misma que ya teníamos abierta del Back office) debería aparecer el contenido actualizado; y ahora sí, podemos ver las opciones debajo del elemento del menú principal.

Tras varias pruebas tanto con Internet explorer, como con Firefox, he de decir, que el comportamiento no ha sido siempre idéntico de una vez a otra: por ejemplo, en Firefox, si pulsamos en "Abrir en una nueva pestaña", y una vez cargada la página en la nueva pestaña la cerramos, sí suelen poderse leer las opciones que contiene la opción principal. Pero pocas veces, en la nueva pestaña, pueden verse éstas.

En cambio, en Internet explorer, tras varias pruebas, el comportamiento no es el mismo: al abrirse la página en la nueva pestaña, suelen poderse leer con los lectores de pantalla las opciones que contiene el elemento del menú principal; pero si cerramos la nueva pestaña, no siempre pueden leerse.

En el caso de Internet explorer, como normalmente pueden leerse las opciones en la nueva pestaña, no es necesario cerrarla. Además, normalmente, el foco queda sobre las opciones, así que no hay que volverlas a buscar.

Pero todo esto puede variar, según las versiones de cada navegador, de los lectores de pantalla o incluso del sistema operativo.

Lo importante es, que a groso modo ahora ya sabéis una forma muy sencilla de llegar y entrar en opciones que aparentemente eran muy complicadas de usar con lectores de pantalla.

Ahora que hemos pulsado en "Internacional", al entrar en otra opción del menú principal (siempre que queramos ir al submenú de cualquier elemento del menú principal tendremos que hacer lo mismo) si quisiéramos volver al apartado "Internacional" y a cualquiera de las opciones de su submenú, como ya habíamos pulsado Enter sobre la opción principal, podríamos incluso intentar saltarnos este paso, y directamente abrir la página en una nueva pestaña o ventana: las veces que lo he probado ha funcionado. Si véis que no, deberéis pulsar Enter sobre la opción principal y volver a abrir la página en una nueva pestaña o ventana.

Si bien es cierto que me he encontrado en casos en los que esto no ha funcionado a la primera, han sido los menos. Y en cualquier caso, es mucho más fácil repetirlo que intentar buscar y activar las opciones con cursores de revisión avanzados.

¡Haced la prueba!: si váis a "Parámetros avanzados" y entráis pulsando Enter, si bajáis con flecha abajo, navegáis con la tecla Tabulador o váis más rápidamente al siguiente encabezado de nivel 2, veréis que a penas hay nada que configurar.

info_outline Información de Configuración

 Aquí básicamente hay información de Apache, Mysql, PHP, Prestashop... Y poca cosa más.

Haced lo que os he explicado ¡y veréis si hay opciones!

 Información
Rendimiento
Administración
Dirección de email
Importar
Equipo
Base de datos
Registros/Logs
Webservice

 Esto ya es otra cosa ¿eh?

Así que sigo aconsejándoos que si no tenéis experiencia con Prestashop; y aunque es un tostón, os leáis la documentación para que veáis todas las opciones que tiene el CMS.

Además, no está demás que investiguéis un poco en el Back office, y hagáis lo que os he explicado, en cada opción del menú principal para ver si hay o no, submenús que se os podrían pasar por alto.

¡Y esto es todo!.

Espero que os haya gustado este artículo y que os sea de utilidad.

Para cualquier duda, consulta, sugerencia o lo que se os ocurra, podéis escribirnos al e-mail del blog:

tifloinformatico@gmail.com

¡Hasta pronto!

No hay comentarios:

Publicar un comentario