IMPORTANTE: consulta también el análisis más reciente Análisis de la accesibilidad de Renfe (06/03/2015).
Este análisis se ha realizado entre el 1 de mayo y el 5 de junio de 2013. Este análisis se compone de dos vídeos que muestran los principales problemas de accesibilidad que presentan dos páginas del sitio web de Renfe, el principal operador ferroviario de España: la página principal del sitio web y la página que aparece cuando se introducen los datos de un viaje y se pulsa en el botón "Comprar" en la página principal.
En la página principal los principales problemas son:
En la segunda página, la que sale una vez se han completado el formulario de compra, los principales problemas son:
De acuerdo a la legislación vigente actual, el sitio web de Renfe debe ser accesible por varios motivos.
Por un lado, Renfe es una entidad pública empresarial dependiente del Ministerio de Fomento.
Desde el año 2002, varios decretos y leyes establecen que las páginas web de las Administraciones Públicas deben ser accesibles para garantizar el acceso universal y no discriminar a ningún ciudadano.
Por ejemplo, el Real Decreto 1494/2007, o la Ley 56/2007, estipulan que
a partir del 31 de diciembre de 2008, las páginas de Internet de las Administraciones Públicas satisfarán,
como mínimo, el nivel medio de los criterios de accesibilidad al contenido generalmente reconocidos
,
es decir, el nivel AA de WCAG 1.0.
Pero además, en el caso de Renfe también se debe aplicar la Ley 56/2007 por un segundo motivo,
ya que el artículo 2.g obliga a satisfacer un mínimo de accesibilidad web a las empresas de
Servicios de transporte de viajeros por carretera, ferrocarril, por vía marítima,
o por vía aérea, de acuerdo con lo dispuesto en la normativa específica aplicable
.
En realidad, el sitio web de Renfe tiene numerosos errores de todo tipo, no sólo de accesibilidad. En las siguientes noticias se comentan algunos de los errores detectados en otras áreas, como la funcionalidad, la recuperación ante los errores o la usabilidad, pero los siguientes vídeos de este análisis se centran principalmente en la accesibilidad:
Este análisis se completa con dos vídeos adicionales en los que se muestra lo que escucha un usuario ciego que utilice un lector de pantallas: estos vídeos muestran que los usuarios ciegos no reciben información imprescindible para realizar una compra de un billete en la web de Renfe.
Si no puedes ver el vídeo, prueba con alguno de los siguientes enlaces:
Hola, soy Sergio Luján Mora, profesor de informática de la Universidad de Alicante, y este vídeo forma parte de una serie de videotutoriales dedicados a la accesibilidad web. En este vídeo vamos a ver unos problemas graves de accesibilidad que presenta el sitio web de Renfe.
Este vídeo consta de varias partes y ha sido realizado con la colaboración de Ramón Corominas y Jesús Álvarez del Amo, que realizaron una presentación sobre los problemas de la web de Renfe en el marco de las reuniones de "Madrid Accesibilidad TICS".
En esta primera parte vamos a ver el porqué de estos vídeos sobre la accesibilidad de la web de Renfe.
El pasado 8 de febrero, Renfe cambió sus tarifas y aprovechó el cambio para introducir algunos cambios en su web.
El cambio de tarifas produjo un "efecto llamada" y fue masiva la afluencia de gente que visito la nueva web.
Desgraciadamente, durante las siguientes semanas, también fueron masivas las quejas de los usuarios que aparecieron en Twitter.
Los usuarios comentaban los graves problemas que tenían para usar la nueva web. En algunos casos era un misión imposible comprar un billete en la nueva web.
Los mensajes de queja siguieron durante los siguientes meses al estreno de la nueva web de Renfe.
Algunos mensajes también señalaban un problema importante, la falta de usabilidad de la web de Renfe.
En enero del año 2013, se publicó un trabajo en el que se analizaba la usabilidad de la web de Renfe, y se comparaba con otras dos compañías europeas, las empresas ferroviarias nacionales de Alemania y de Francia.
Los resultados que obtuvo la web de Renfe no fueron muy buenos.
Así, por ejemplo, al comparar la eficiencia en la realización de ciertas tareas, en el caso de la web de Renfe, prácticamente 1 de cada 2 tareas era ineficiente, mientras que en el caso de la web alemana, eso ocurría, prácticamente, sólo en 1 de cada 10 casos, y en el caso de la web francesa, en casi 1 de cada 3 casos.
Y con respecto a la satisfacción general, la web de Renfe también obtenía peores resultados que las otras dos webs.
¿Qué le pasa a la web de Renfe? Estos problemas no son de ahora, son problemas que la web arrastra desde hace muchos años.
En una noticia publicada en el periódico digital eldiario.es poco después del estreno de la nueva web de Renfe, encontramos una posible explicación. La web de Renfe "es un engendro", un monstruo de Frankenstein, en el que participan numerosas empresas y consultores.
Y ya se sabe lo que dice el refrán, "muchos cocineros, estropean el caldo". Y más si son cocineros a los que les gusta comer bien.
Pero además de los problemas de usabilidad, lo que me interesa contar en este vídeo son los problemas de accesibilidad.
En Twitter también se publicaron algunas quejas sobre los problemas de accesibilidad de la nueva web.
En particular, José Ángel Carrey, un usuario ciego, se dirigió varias veces a Renfe para que resolviera los problemas de accesibilidad.
José Ángel Carrey se dirigió directamente a Renfe por varios medios, por Twitter, por Facebook y por correo electrónico.
La respuesta que obtenía de Renfe era siempre la misma: la nueva web es accesible o tiene algunos pequeños problemas que se están solucionando.
Sin embargo, casi 4 meses después del estreno de la nueva web de Renfe, los problemas siguen existiendo.
Pero, ¿la web de Renfe tiene que ser accesible?
Sí, en España existen diversas leyes que obligan a que la web de Renfe sea accesible.
Y no vale decir eso de que "son desarrollos nuevos y estamos subsanando los errores".
La ley establece que los desarrollos nuevos tienen que ser accesibles desde el principio.
Ahora te invito a que veas la siguiente parte de este vídeo, en el que veremos los problemas concretos de accesibilidad que presenta la nueva web de Renfe.
Y con esto finaliza esta primera parte del vídeo dedicado a los problemas de accesibilidad de la nueva web de Renfe.
Si necesitas más información o quieres contactar conmigo, en mis páginas web http://accesibilidadweb.dlsi.ua.es y en http://desarrolloweb.dlsi.ua.es podrás encontrar más información sobre la accesibilidad web y el desarrollo web o también puedes contactar directamente conmigo a través de mi dirección de correo electrónico sergio.lujan@ua.es o a través de mi cuenta de Twitter @sergiolujanmora.
Muchas gracias por tu atención.
Si no puedes ver el vídeo, prueba con alguno de los siguientes enlaces:
Hola, soy Sergio Luján Mora, profesor de informática de la Universidad de Alicante, y en este vídeo vamos a ver algunos problemas graves de accesibilidad que presenta el nuevo sitio web de Renfe.
Este vídeo consta de varias partes y ha sido realizado con la colaboración de Ramón Corominas y Jesús Álvarez del Amo, que realizaron una presentación sobre los problemas de la web de Renfe en el marco de las reuniones de "Madrid Accesibilidad TICs".
En el vídeo anterior, vimos que en los últimos meses ha habido varias quejas de usuarios respecto a los problemas de usabilidad y de accesibilidad de la nueva web de Renfe. En este vídeo vamos a ver los principales problemas de accesibilidad.
En concreto, vamos a ver los problemas que presentan dos páginas, la página principal y la página que aparece al introducir los datos de un viaje y pulsar en el botón comprar.
Voy a empezar con la validación del código HTML de la página principal, ya que las dos versiones de las Pautas de Accesibilidad al Contenido en la Web del W3C lo exigen.
Los resultados que se obtienen con el validador oficial del W3C son desastrosos, 75 errores y 7 advertencias.
Vamos a ver los primeros errores simplemente para tener una idea de su naturaleza.
La página tiene definido el DOCTYPE XHTML 1.0 Strict, lo cual está muy bien.
El primer error es que la página contiene el atributo "onLoad" con la "l" en mayúsculas. En XHTML los atributos se tienen que escribir todos en minúsculas.
A continuación, hay errores en el primer formulario, porque está escrito directamente dentro de la etiqueta <form>, y eso no es posible. Los campos de un formulario deben de escribirse dentro de un elemento de bloque, como un párrafo <p> o un contenedor <div>.
Este formulario tiene campos de tipo <input> que no han sido cerrados. Sin embargo, es gracioso ver que otras etiquetas de tipo <input> sí que han sido cerradas correctamente. ¿A qué se debe este error? ¿A un olvido? ¿A las prisas? ¿A una falta de control de calidad?
Y bueno, así hasta llegar a los 75 errores.
La herramienta de evaluación de la accesibilidad WAVE detecta 5 errores y 22 advertencias.
Los cinco errores son campos del formulario que no tienen asociados una etiqueta <label> que los identifique.
En realidad, como podemos ver, sí que existen las etiquetas <label> para esos campos, pero la asociación está mal hecha, porque el valor del atributo "for" no se corresponde con el atributo "id" o el campo no tiene atributo "id".
Por cierto, en este fragmento de código sorprende encontrarse dos etiquetas <input> escritas en mayúsculas. Eso es otro error de validación.
En 10 ocasiones, el atributo "title" usado en enlaces es redundante, porque repite el mismo texto que contiene el enlace. Eso es totalmente inútil, no sirve para nada, pero puede ocasionar problemas.
WAVE señala como una advertencia, como un posible error el uso de "accesskey", los atajos de teclado, nueve veces. Aunque en principio es una característica destinada a mejorar la accesibilidad, normalmente se desaconseja su uso, ya que estos atajos de teclado pueden interferir con los atajos de teclado que tenga definido el usuario. Por lo tanto, es mejor no usarlo en un sitio web destinado a todo el público.
La herramienta de evaluación TAW detecta 13 errores automáticos de prioridad 2.
Los errores detectados son básicamente los mismos que hemos visto antes: los campos de los formularios están mal etiquetados.
La herramienta de evaluación eXaminator proporciona una nota de 6,5 sobre 10. En la página web de Renfe hay 6 pruebas que se valoran como "mal".
eXaminator detecta un error importante: hay un formulario sin un botón de envío.
Efectivamente, el formulario principal, el de compra de billetes, el que seguramente más le interesa a los usuarios, y más le tiene que interesar a Renfe porque es su fuente de ingresos, no tiene botón de envío.
Estos dos botones que vemos aquí, "Todas las estaciones" y "Comprar", no son realmente botones, visualmente parecen botones, pero son enlaces que realizan la función de botones.
Aunque no es una barrera de accesibilidad grave, sí que puede causar confusión entre algunos usuarios.
Además, eXaminator también detecta que hay un valor del atributo id repetido en la página.
Este error está otra vez relacionado con los campos de los formularios.
En definitiva, que la página web contiene numerosos errores. Alguien puede decir que no son errores importantes, pero aunque fuese verdad, que no lo es, son un claro síntoma del poco cuidado que tiene la gente que desarrolla el sitio web de Renfe.
Antes de continuar, hay que recordar que las herramientas automáticas de evaluación de la accesibilidad no son capaces de detectar todos los problemas. En realidad, los problemas más graves que presenta la página web de Renfe, que los vamos a ver a continuación, no son detectados por las herramientas que acabamos de ver.
Como ya podemos intuir por los resultados de las herramientas automáticas de evaluación de la accesibilidad, los problemas más graves están en el formulario de compra.
En este formulario, el origen y el destino de un viaje sí que están correctamente identificados por una etiqueta <label>.
Pero la fecha de salida y la fecha de regreso no están correctamente relacionadas con sus correspondientes etiquetas.
Por cierto, en este fragmento de código, ¿qué hace un <div> dentro de un párrafo? Eso es otro error de validación.
Sin la correcta identificación de los campos, un usuario ciego que utiliza un lector de pantallas, no sabe qué tiene que introducir en estos dos campos.
Además, ¿qué formato de fecha se debe emplear? Este ya no es sólo un problema de accesibilidad, sino que es un problema de usabilidad porque afecta a todos los usuarios.
Y ya que estamos, otro problema de usabilidad. Si aquí se habla de "Ida" y "Vuelta", ¿por qué no emplea la misma denominación aquí? ¿Por qué se emplea "Salida" y "Regreso"?
En realidad, podemos ver que en esta versión del sitio web de Renfe de abril de 2010, se empleaban los términos "Ida" y "Vuelta" para la fecha de ida y la fecha de vuelta.
Pero el problema más grave es la lista de búsqueda de estaciones para el origen y el destino.
La lista desplegable que aparece se puede emplear con el teclado sin problemas, pero no es accesible para los usuarios ciegos que utilizan un lector de pantallas, pero este problema se explicará en un siguiente vídeo.
Un aspecto positivo que tiene la página principal de Renfe es el empleo correcto de los encabezados. Sin embargo, vamos a ver que no ocurre lo mismo en todas las páginas.
Estos son todos los encabezados que hay en la página principal de Renfe.
Se podría haber hecho un poco mejor, ya que hay una zona muy importante que no tiene encabezados, el apartado de redes sociales.
Justo en el apartado de redes sociales encontramos un problema importante: no avisa de que los enlaces se abren en una ventana nueva.
En realidad, abrir un enlace en una ventana nueva es una mala opción para todos los usuarios, el usuario tiene que tener la libertad de tomar la decisión de abrir un enlace en una ventana nueva, no se debe decidir por el usuario.
Y otra pregunta, ¿por qué dos listas? Se podría haber hecho con una sola lista y habría sido más significativo.
Pero curiosamente, esta barra de navegación, cuyos enlaces también se abren en una ventana nueva, como podemos ver en este fragmento de código, sí que tienen un aviso, en concreto "Se abre en ventana nueva", que añade un pequeño icono con ese texto alternativo a los enlaces anteriores que tienen un id con el valor "opc" más un número.
¿Y el "BonoAVE", por qué no tiene la imagen y el aviso? Muy sencillo, porque se les olvidó poner atributo id en el enlace de "BonoAVE".
Bien, ahora vamos a ver la segunda página, la página que aparece al introducir los datos de un viaje y pulsar en el botón comprar.
En esta página el usuario tiene que elegir el tren que desea utilizar entre todos los que ha encontrado Renfe que cumplen sus criterios de búsqueda.
En esta página hay un error tremendo.
Mientras que en la página anterior, la página principal, los encabezados estaban correctamente etiquetados, en esta página los encabezados son un desastre y no sirven para nada.
¿Dónde está el problema? El problema está en que no se han cerrado correctamente los encabezados.
Por ejemplo, aquí tenemos el primer encabezado <h1> que sí que está cerrado correctamente.
Pero el segundo encabezado <h1> no se cierra correctamente, e incluye todo lo que viene a continuación.
Este encabezado se abre en la línea 511, y se cierra posteriormente en la línea 597.
Pero como podemos ver aquí, esto no sólo ocurre con este encabezado, ocurre lo mismo con los siguientes encabezados de la página.
Otro problema importante se encuentra en este panel para cambiar el día del viaje.
En primer lugar, hay un problema de usabilidad importante. El color gris se suele emplear para indicar que un elemento de interacción como un botón, no es utilizable, sin embargo, en esta página, estos dos botones que aparecen en gris sí que se pueden utilizar.
Pero el problema de accesibilidad lo detectamos al ver el código fuente. Otra vez, lo que aparentemente son botones, en realidad no son botones.
Son enlaces a los que se les ha asignado una acción con el evento "onclick".
Si algo parece un botón y actúa como un botón, ¿por qué no está etiquetado como un botón?
Pero además, el texto de estos enlaces no es significativo, no identifica correctamente la función del enlace, del botón. ¿"Día antes" y "Después", de qué?
Algunos usuarios, por ejemplo los usuarios ciegos que utilizan un lector de pantallas, navegan por las páginas web a través de una lista que contiene todos los enlaces de la página.
En la página de Renfe, a los usuarios ciegos les aparece repetido el enlace "Día Antes" y "Después", pero no saben si se refiere al viaje de ida o de vuelta.
Por cierto, en la página principal se usan los términos "Salida" y "Regreso", ¿por qué se emplean ahora los términos "Ida" y "Vuelta"? ¿No crea un poco de confusión?
Y ya para finalizar, dos botones más que no son realmente botones.
Por un lado, el botón "Entrar", del formulario para acceder como un usuario registrado no es realmente un botón, es, otra vez, un enlace que hace creer que es un botón.
Por otro lado, al final de la página aparece el botón "Continuar", que tampoco es realmente un botón, sino que es un enlace con una acción asociada.
Y además, qué codigo HTML más raro: un <h3>, que tiene dentro un <div>, que a su vez tiene un enlace <a>, que a su vez tiene otro <div>.
En resumen, sin duda alguna, de la nueva página web de Renfe se puede decir que se puede hacer mal, pero peor que esto, imposible.
Y con esto finaliza este videotutorial que ha mostrado algunos de los problemas de accesibilidad que presenta el sitio web de Renfe.
Si necesitas más información o quieres contactar conmigo, en mis páginas web http://accesibilidadweb.dlsi.ua.es y en http://desarrolloweb.dlsi.ua.es podrás encontrar más información sobre la accesibilidad web y el desarrollo web o también puedes contactar directamente conmigo a través de mi dirección de correo electrónico sergio.lujan@ua.es o a través de mi cuenta de Twitter @sergiolujanmora.
Muchas gracias por tu atención.
Si no puedes ver el vídeo, prueba con alguno de los siguientes enlaces:
Si no puedes ver el vídeo, prueba con alguno de los siguientes enlaces:
